/* Landingpage mobil (bis 767px) - 27.09.2026. Nur index.html.

   Sammelt die Handy-Korrekturen der Startseite an einer Stelle. Oberhalb von
   767px steht hier nichts, Desktop und Tablet bleiben unveraendert.

   Wird nach home.css, scrolly-hero.css, wizard.css und navbar-mobile.css
   geladen - bei gleicher Spezifitaet gewinnt diese Datei. Die Regeln fuer die
   React-Inseln (Projekte, Ablauf) stehen dort in :where() mit Spezifitaet 0,
   deshalb reichen hier normale Klassen-/ID-Selektoren, ohne die Inseln neu
   zu bauen. */

/* Hero-Button gibt es nur mobil (Markup in index.html, im Hero). */
.hero-split__cta {
  display: none;
}

@media (max-width: 767px) {

  /* ── Seite 3 "Design trifft Technik." (10.10.2026, Leo: mobil mittig, als
     Block mit Absaetzen) ──────────────────────────────────────────────────
     Headline, die drei Absaetze und "Weiterlesen" stehen auf dem Handy
     zentriert statt linksbuendig; die Absaetze bleiben getrennte Bloecke mit
     ihrem Abstand. Die Zeilen des Scroll-Verlaufs (.scroll-sweep-line, von
     SplitText erzeugt) sind eigene Bloecke und erben die Ausrichtung. */
  .about-section .s3-inner--solo .s3-head,
  .about-section .s3-h--editorial,
  .about-section .s3-body--editorial,
  .about-section .s3-body--editorial .s3-p,
  .about-section .s3-body--editorial .scroll-sweep-line {
    text-align: center;
  }
  .about-section .s3-inner--solo .s3-head,
  .about-section .s3-body--editorial {
    margin-inline: auto;
  }
  /* "Weiterlesen": die Insel legt einen Rahmen in voller Breite um den Link
     (learn-more-link-demo.tsx), der Link stand darin links. .s3-learnmore ist
     der Ersatz-Link ohne JavaScript. */
  .about-section #dwc-learnmore-root > div,
  .about-section .s3-learnmore {
    display: flex;
    justify-content: center;
    text-align: center;
  }

  /* ── Hero (Idee 1, 27.09.2026, Leo) ──────────────────────────────────────
     Vorher: nur die Kopfzeile links, darunter ein leerer weisser Bildschirm
     (Video war unter 768px aus). Jetzt mittig untereinander:
     Headline (12vw, fuellt die Breite, bis 320px ohne Ueberlauf) →
     "Strategie × Design × Technologie" → Button → Showreel im 16:9-Rahmen.
     Keine Subheadline (Leo). Die Gruppe steht senkrecht mittig im Bereich
     unter der Kopfzeile. */
  .hero-split {
    grid-template-rows: auto auto;
    align-content: center;
    padding: calc(var(--nav-height, 72px) + 12px) 0 28px;
  }
  .hero-split .hero-split__content {
    grid-row: 1;
    padding: 0 20px;
    transform: none;
  }
  .hero-split__stage-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    max-width: none;
    text-align: center;
  }
  .hero-split__stage {
    font-size: 12vw;
    letter-spacing: 0.01em;
    -webkit-text-stroke-width: 1.2px;
  }
  .hero-split__rotator {
    width: 100%;
    height: 13.2vw;
    margin-top: 1vw;
  }
  .hero-split__rotate-word {
    inset: 0 0 auto 0;
    font-size: 12vw;
    letter-spacing: 0.01em;
    text-align: center;
  }
  /* Laufweite haengt auch hinter dem letzten Buchstaben - padding-left in
     derselben Groesse gleicht das aus, sonst steht die Zeile optisch links. */
  .hero-split .hero-split__disciplines {
    justify-content: center;
    margin: 20px 0 0;
    padding-left: 0.22em;
    font-size: clamp(10px, 3vw, 12px);
  }
  .hero-split__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 26px;
    padding: 0 24px;
    border-radius: 12px;
    background: var(--dwc-action-blue, #0757f7);
    color: #fff;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(7, 87, 247, 0.25);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
  }
  .hero-split__cta:active {
    transform: scale(0.98);
  }
  /* Video: scrolly-hero.css blendet es unter 768px aus - hier wieder an, als
     16:9-Karte. Die Handy-Datei ist schon 16:9 zugeschnitten (mittiger
     Ausschnitt: Mockups, am Ende Wortmarke + Auszeichnungen). Der Rahmen
     steht sofort da (Standbild = erstes Videobild), das Video selbst wird
     erst mit .is-ready sichtbar - bewusst opacity, nicht visibility
     (Safari-Drosselung, siehe scrolly-hero.css). */
  .hero-split .hero-split__video-area {
    display: block;
    grid-row: 2;
    position: relative;
    margin: 30px 20px 0;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: #0c0a08 url("../images/hero-showreel-mobil-poster.webp") center / cover no-repeat;
    opacity: 1;
  }
  .hero-split .hero-split__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
  }
  .hero-split .hero-split__video-area.is-ready .hero-split__video {
    opacity: 1;
  }

  /* ── Trustbar: 2 x 2 statt 4 nebeneinander ─────────────────────────────
     Vier Spalten mit 40px-Zahlen ueberlappten sich auf 390px gegenseitig
     ("12+ PROJEKTERÜCKMELDUNG ..."). */
  .landing-trustbar {
    --trust-icon-size: 24px;
    --trust-icon-gap: 10px;
    padding: 4px 12px;
  }
  .landing-trustbar__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 0;
  }
  .landing-trustbar__item {
    padding: 22px 8px;
  }
  .landing-trustbar__item + .landing-trustbar__item::before {
    top: 20px;
    bottom: 20px;
  }
  /* Links in der zweiten Zeile kein senkrechter Strich, dafuer ein
     waagrechter ueber der ganzen zweiten Zeile. */
  .landing-trustbar__item:nth-child(3)::before {
    display: none;
  }
  .landing-trustbar__item:nth-child(n + 3)::after {
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: rgba(8, 11, 17, 0.2);
    content: "";
  }
  .landing-trustbar__value {
    font-size: clamp(30px, 9vw, 38px);
  }
  .landing-trustbar__label {
    margin-top: 8px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  /* ── Leistungen (Service-Explorer, #leistungen): Liste statt 2er-Raster ──
     27.09.2026, Leo. Vorher zwei 175px schmale Spalten mit 128px-Buchstaben
     (~1480px hoch, "Automatisie-rungen" getrennt). Jetzt eine Zeile pro
     Leistung: Buchstabe links, Titel + Pfeil, darunter die drei Unterpunkte
     untereinander (nebeneinander brachen sie je nach Laenge unterschiedlich
     um - unruhig). Feine Trennlinien statt der senkrechten Striche.
     Buchstaben-Optik (Schrift, Gewicht 300, enge Laufweite) bleibt. Das
     Hover-Skript im index.html setzt beim Antippen weiter .is-active - hier
     wirkt das nur auf den Pfeil. Unterpunkte #6b6b6b statt #999 (4,9:1
     statt 2,8:1 Kontrast auf Weiss, bei 14px sonst kaum lesbar). */
  .service-explorer {
    padding: 64px 20px 56px;
  }
  .service-explorer .service-explorer__title {
    font-size: clamp(30px, 8.4vw, 40px);
    line-height: 1;
  }
  .service-explorer .service-explorer__rail {
    display: block;
    margin-top: 36px;
    border-bottom: 1px solid rgba(3, 13, 31, 0.14);
  }
  .service-explorer .service-explorer__item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 8px;
    align-items: start;
    min-height: 0;
    padding: 20px 4px 20px 0;
    border-top: 1px solid rgba(3, 13, 31, 0.14);
    -webkit-tap-highlight-color: transparent;
    transition: background-color 180ms ease;
  }
  .service-explorer .service-explorer__item::before {
    display: none;
  }
  .service-explorer .service-explorer__item:active {
    background: #f4f4f6;
  }
  .service-explorer .service-explorer__letter {
    position: static;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    font-size: 72px;
    line-height: 0.74;
    text-align: center;
  }
  .service-explorer .service-explorer__item-head {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 22px;
    hyphens: manual;
  }
  .service-explorer .service-explorer__item-head svg {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    opacity: 0.7;
  }
  .service-explorer .service-explorer__details {
    grid-column: 2;
    grid-row: 2;
    gap: 3px;
    font-size: 14px;
    line-height: 1.3;
    color: #6b6b6b;
  }
  .service-explorer .service-explorer__details span {
    padding-left: 10px;
  }
  .service-explorer .service-explorer__details span::before {
    width: 4px;
    height: 4px;
    background: #8a8a8a;
  }

  /* ── Projekte (Radial-Insel): Ueberschrift umbrechen statt abschneiden ──
     white-space:nowrap + 64px liess "Gemeinsam weiter, immer besser." auf
     1032px laufen, die Unterzeile auf 456px. Oben mehr Luft, weil die
     gepinnte Buehne sonst unter der 90px hohen Kopfzeile beginnt. */
  #dwc-radial-projects-root .rcs__viewport {
    padding-top: 108px;
  }
  /* Headline zweizeilig "Gemeinsam weiter, / immer besser." (27.09.2026,
     Leo: nur Headline/Subheadline anpassen, Karten, Drehung, Scrollweg und
     Button bleiben wie am Desktop). Mit 11vw brach sie dreizeilig um, mit
     "weiter," allein in der Mitte. 10vw passt "Gemeinsam weiter," bis 320px
     in eine Zeile; balance haelt die Unterzeile ohne einzelnes "besser.". */
  #dwc-radial-projects-root .rcs__title {
    padding: 0 20px;
    white-space: normal;
    font-size: clamp(28px, 10vw, 44px);
    text-wrap: balance;
  }
  #dwc-radial-projects-root .rcs__titleGroup {
    gap: 12px;
  }
  /* Karten mit Abstand statt Ueberlappung, wie am Desktop (27.09.2026, Leo).
     Die Karten liegen auf einem Kreis (Drehpunkt --radius unter der
     Kartenoberkante), benachbarte Karten um --step gedreht. Engste Stelle ist
     die Kartenunterkante: Bogen = (Radius - Kartenhoehe) * Schritt.
       Desktop: (1568 - 440) * 24° = 473px bei 440px Karte → 34px Luft.
       Mobil vorher: (1312 - 315) * 14° = 244px bei 315px Karte → 71px Ueberlappung.
     Der Schritt 14° bleibt (steht auch in radial-cards-section.tsx als
     Drehweg - aendern hiesse Insel neu bauen und die Endstellung verschieben).
     Stattdessen Karte 280px (unter 368px Breite 76vw) und Radius so, dass
     immer 24px Luft bleiben:
       R = K + (K + 24) / 0.2443 = 5.0933 * K + 98px   (bei K = 280: 1524px).
     Gemessen (Ecken der gedrehten Karten): 320-414px je ~25px Luft.
     40svh: auf niedrigen Bildschirmen (iPhone SE 375x667, iPhone in Safari
     mit eingeblendeten Leisten ~390x664) schrumpft die Karte mit, sonst lag
     der Button in der gepinnten Buehne unter dem Bildrand (vorher 644-700px
     bei 667px Hoehe). Dazu enger: Luft Titel→Karten 28px, Button 30px unter
     den Karten (Button selbst und seine Animation unveraendert). */
  #dwc-radial-projects-root .rcs__cluster {
    gap: 28px;
  }
  #dwc-radial-projects-root .rcs__centerLink {
    top: calc(100% + 58px);
  }
  /* Buehne nutzt den Bildschirm (06.10.2026, Leo: Karussell mobil
     optimieren, Animation unveraendert). Vorher klebten Titel, Karte und
     Button oben, darunter blieben bei 390x844 rund 210px Schwarz, und die
     Karte war mit 280px klein.
     - Karte waechst mit: hoechstens 340px bzw. 84vw, und nur so gross, dass
       Titel + Karte + Button in die gepinnte Hoehe passen (100svh - 370px:
       108px oben, Titel ~130px, 28px Luft, Button 86px unter der Karten-
       unterkante, ~20px Rest; nie kleiner als die bisherigen 40svh). Radius-Formel
       unveraendert -> weiter 24px Luft zwischen den Karten, Schritt und
       Drehweg bleiben 1:1.
     - Restplatz verteilt sich gleich ueber und unter Karte+Button (margin-
       block:auto); der absolut haengende Button bekommt unten 88px
       reserviert, damit er nie unter den Bildrand rutscht.
     Gemessen 320x568 bis 430x932: Button immer ganz im Bild. */
  #dwc-radial-projects-root .rcs__viewport {
    padding-bottom: 88px;
  }
  #dwc-radial-projects-root .rcs__stage {
    margin-block: auto;
  }
  #dwc-radial-projects-root .rcs__list {
    --rcs-card: min(340px, 84vw, max(40svh, calc(100svh - 370px)));
    --radius: calc(var(--rcs-card) * 5.0933 + 98px);
  }
  #dwc-radial-projects-root .rcs__card {
    width: var(--rcs-card);
  }
  #dwc-radial-projects-root .rcs__subtitle {
    padding: 0 20px;
    white-space: normal;
    font-size: clamp(15px, 4.2vw, 17px);
    line-height: 1.4;
    text-wrap: balance;
  }

  /* ── Ablauf (Sticky-Stack-Insel): kompakter Stapel mit Reitern ──────────
     27.09.2026, Leo (Idee A). Vorher war jede Karte fast bildschirmhoch
     (sticky-stack-section.tsx: max(448px, Fensterhoehe - ...) ≈ 660px) bei
     nur Nummer + Titel + vier Woertern Text. Jetzt:
     - feste Kartenhoehe 250px. Das Skript setzt --stack-card-height inline,
       gelesen wird die Variable aber nur in einer :where()-Regel - diese
       Klassenregel gewinnt, ohne die Insel neu zu bauen. Die gemessene Hoehe
       (fuer das senkrechte Zentrieren des Stapels) folgt automatisch.
     - --stack-stagger 68px: so viel bleibt von jeder ueberdeckten Karte oben
       sichtbar, genug fuer Nummer + erste Titelzeile inkl. Unterlaengen
       (= "Reiter"). Das Skript liest den Wert per getComputedStyle.
     - grosse, blasse Schrittnummer als Hintergrund (CSS-Zaehler, kein Markup).
     - Abstandhalter hinter der letzten Karte (.sss__stack::after): ohne ihn
       schoben sich die Reiter sofort nach dem Andocken der letzten Karte
       zusammen (Sticky-Grenze = Ende von .sss__stack). So steht der fertige
       "Ordner" ~190px Scrollweg lang still. Kein sichtbarer Leerraum - die
       Karten liegen beim Hinausscrollen ueber dem Abstandhalter.
     Unterzeile war nowrap und lief aus dem Bild. */
  .sss {
    --stack-stagger: 68px;
  }
  .sss .sss__stack::after {
    content: "";
    flex: none;
    height: 140px;
  }
  .sss .sss__introText {
    white-space: normal;
    font-size: clamp(1.25rem, 6vw, 1.5rem);
    line-height: 1.15;
  }
  .sss .sss__stack {
    gap: 48px;
    counter-reset: sss-step;
  }
  .sss .sss__flowCard {
    counter-increment: sss-step;
  }
  .sss .sss__card {
    height: 250px;
    padding: 18px 20px 20px;
    border-radius: 16px;
  }
  .sss .sss__card::before {
    position: absolute;
    right: -6px;
    bottom: -34px;
    z-index: 1;
    content: counter(sss-step, decimal-leading-zero);
    font-family: var(--font, "DM Sans", Arial, sans-serif);
    font-size: 150px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.06em;
    color: rgba(13, 11, 10, 0.06);
    pointer-events: none;
  }
  .sss .sss__top {
    gap: 6px;
  }
  .sss .sss__number {
    font-size: 18px;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .sss .sss__cardTitle {
    max-width: none;
    font-size: clamp(18px, 5.6vw, 24px);
    line-height: 1.1;
    letter-spacing: -0.04em;
  }
  .sss .sss__cardText {
    max-width: 16em;
    margin: 0;
    font-size: 17px;
    line-height: 1.25;
  }

  /* ── Kundenstimmen: Abschlusszeile passt in die Breite ─────────────────── */
  #bewertungen .cf-outro .cf-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  /* ── Footer: kompakt (Leo, 27.09.2026: "deutlich kleiner") ──────────────
     Vorher alle Spalten untereinander, ~1300px hoch. Jetzt: Logo und Social
     in einer Zeile, Leistungen + Navigation nebeneinander, engere Abstaende.
     Inhalte und Links unveraendert; nur die Ueberschrift "Folgen Sie uns"
     entfaellt sichtbar (die Icon-Leiste traegt aria-label "Social Media"). */
  #kontakt .footer-inner {
    padding: 44px 0 30px;
  }
  #kontakt .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px 20px;
  }
  #kontakt .footer-logo {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  #kontakt .footer-logo img {
    height: 40px;
  }
  #kontakt .footer-social-title {
    display: none;
  }
  #kontakt .footer-social {
    gap: 8px;
  }
  #kontakt .footer-social a {
    width: 32px;
    height: 32px;
  }
  #kontakt .footer-col-title {
    margin-bottom: 12px;
    font-size: 11px;
  }
  #kontakt .footer-links {
    gap: 9px;
  }
  #kontakt .footer-links a {
    font-size: 13px;
  }
  #kontakt .footer-grid > div:nth-child(4),
  #kontakt .footer-news {
    grid-column: 1 / -1;
  }
  /* Kontaktzeilen einspaltig, aber enger. Zweispaltig brachen Antwortzeit,
     Telefonnummer und E-Mail-Adresse mitten im Wort um. */
  #kontakt .footer-contact {
    gap: 9px;
  }
  #kontakt .footer-contact__row {
    gap: 8px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  #kontakt .footer-contact__row svg {
    width: 15px;
    height: 15px;
  }
  #kontakt .footer-news__p {
    margin-bottom: 12px;
    font-size: 12.5px;
    max-width: none;
  }
  #kontakt .footer-bottom {
    margin-top: 30px;
    padding-top: 18px;
    gap: 8px 20px;
    font-size: 12px;
  }
  /* Rechtliches darf umbrechen - auf 320px ragte "Cookie-Einstellungen"
     sonst 18px ueber den Rand. */
  .footer-bottom__legal {
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 16px;
  }
  #kontakt .footer-bottom__legal a {
    font-size: 12px;
  }
}

/* Sehr schmale Handys: Logo + vier Social-Icons passen sonst nicht in eine
   Zeile (bei 320px ragte das X-Icon ueber den Rand). */
@media (max-width: 374px) {
  #kontakt .footer-logo img {
    height: 34px;
  }
  #kontakt .footer-social {
    gap: 6px;
  }
  #kontakt .footer-social a {
    width: 30px;
    height: 30px;
  }
}

/* ── Versprechen "Immer Inklusiv.": horizontal statt gestapelt ────────────
   Grenze 720px wie in quality-promise-scroll.js/home.css (darueber greift die
   Desktop-Geometrie). Das Skript pinnt die Section und schiebt die Bilder
   waagrecht durch. Hier nur die Geometrie: Bilder in echtem 16:9, 90 % breit,
   damit das naechste Bild rechts anschneidet und das Wischen erkennbar ist;
   Sichtfenster so hoch wie das Bild (kein Leerraum darunter), Inhalt in der
   gepinnten Bildschirmhoehe senkrecht mittig. */
@media (max-width: 720px) {
  .pcta.quality-scroll .pcta-inner {
    justify-content: center;
    padding: 96px 0 30px;
  }
  .pcta.quality-scroll .pcta-header {
    padding: 0 18px;
  }
  .pcta.quality-scroll .pcta-viewport {
    height: auto;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .pcta.quality-scroll .pcta-track {
    gap: 12px;
  }
  .pcta.quality-scroll .pcta-panel.pcta-panel--image {
    flex: 0 0 90%;
    width: auto;
    min-width: 0;
    max-height: none;
    margin: 0;
    border-radius: 14px;
  }
}