/* Handy-Fassung (Matteo 03.11.2026: „dann Handy-Ansicht“). Lädt zuletzt; gilt nur für schmale Bildschirme. */
@media(max-width:760px){
  /* Kopf kompakter, damit das iPhone schon im ersten Bild anfängt */
  .hero{padding-top:92px}
  .hero h1{font-size:44px;margin:12px 0 14px}
  .hero .knoepfe{margin-top:22px;gap:4px}
  .hero .vertrauen{flex-direction:column;gap:6px;margin-top:20px;font-size:13px}
  .product-stage::before{display:none}
}
@media(max-width:600px){
  /* Kleine Vorteils-Kacheln als volle Zeilen: Zeichen links, Text rechts, keine Silbentrennung in Schmalspalten */
  .kachel:not(.gross,.streifen){grid-column:1/-1;min-height:0;padding:20px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;align-items:start}
  .kachel:not(.gross,.streifen)>.sym{grid-row:1/3;margin:0}
  .kachel:not(.gross,.streifen) h3{margin:0;font-size:19px;hyphens:manual}
  /* Büro: erst Überschrift und Text, dann die Karl-Nachbildung */
  .buero-teil{display:grid}
  .buero-teil>.karl-demo{order:2}
}
/* Handy-Nachzug 09.11.2026 (Matteo: „am Handy … sieht fürchterlich aus“) */
@media(max-width:760px){
  /* Fehler: Kopf im hellen Modus ließ beim Scrollen den Text darunter durchscheinen */
  [data-theme=light] .header.is-compact{background:#f6f6f4}
  /* Fehler: Silbentrennung zerriss die Überschrift „Auf-trag kostet“ */
  .kachel.gross h3{hyphens:manual}
}
@media(max-width:500px){
  /* Fehler: Riesen-Schriftzug „Kalstro.“ war rechts abgeschnitten (Mindestgröße 120 px passte nicht in 390 px) */
  .riesig{font-size:24vw}
}
/* Matteo 09.11.2026 („Beide Vorschläge, hochladen“): weniger Leerraum am Handy, Rechner-Tabelle im Vorteile-Block nur am Rechner */
@media(max-width:760px){.product-stage{height:730px}}
@media(max-width:600px){
  .abschnitt{padding:56px 0}
  .schluss{padding-top:64px}
  #vorteile .kachel.gross .mini{display:none}
}
/* Runde 2 (Matteo 09.11.: „Warum ist das nicht das gleiche Handy wie oben?“): Arbeitstag-Handy am Handy mit demselben
   Blender-Rahmen wie das Hero-Handy (hero.css ≤760), ganz sichtbar statt unten abgeschnitten. app.js setzt dazu die Bildschirmhöhe 790. */
@media(max-width:760px){
  #arbeitstag .day-stage{height:auto;max-height:none}
  /* Zeitleiste über dem Handy, damit beide zugleich im Bild sind */
  #arbeitstag .tageslinie{grid-row:2}#arbeitstag .day-phone{grid-row:3}#arbeitstag .tl-nochmal{grid-row:4}
  #arbeitstag .day-phone{--b:min(300px,100%);position:relative;width:var(--b);padding:calc(var(--b) * .0815) calc(var(--b) * .0641);border-radius:0;
    align-self:start;min-height:0;overflow:visible;box-shadow:none;
    background:url('assets/hero/rahmen.webp') center/199.14% 132.73% no-repeat;filter:drop-shadow(0 40px 40px rgb(20 24 28 / .25))}
  /* Texte wechseln im Ablauf zwischen 1 und 3 Zeilen: Platz halten, damit Handy und Zeitleiste nicht springen */
  #day-title{min-height:2.5em}#day-text{min-height:4.2em}
  #arbeitstag .day-phone::after{content:'';position:absolute;inset:calc(var(--b) * .0815) calc(var(--b) * .0641);z-index:3;border-radius:calc(var(--b) * .122);pointer-events:none;
    background:linear-gradient(118deg,#ffffff1c 0%,#ffffff08 26%,transparent 38%)}
  #arbeitstag .day-phone>.app-device{position:relative;z-index:2;border-radius:52.5px}
}
@media(max-width:760px){
  [data-theme=dark] #arbeitstag .day-phone{filter:drop-shadow(0 40px 60px #000)}
  [data-theme=dark] #arbeitstag .day-phone::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
    background:url('assets/hero/rahmen-gegenlicht.webp') center/199.14% 132.73% no-repeat}
}
/* Wischen bleibt nie hängen (Matteo 09.11.: „in Karl auch swipen … und dann muss ich irgendwo an die Seite gehen“): Karl-Fenster
   so hoch, dass der Startinhalt samt Vorschlägen ganz hineinpasst (innen scrollt nichts); spätere Verläufe geben das Wischen an ihrem
   Ende an die Seite weiter */
@media(max-width:760px){
  .karl-buehne{height:688px}
  .karl-buehne .ki-fenster{height:auto;top:61px}
  .phone-screen>.app-inhalt,.day-screen>.app-inhalt,.day-live-screen .app-inhalt,.karl-buehne .ki-verlauf{overscroll-behavior:auto}
}
/* Prägung am Handy wieder tief (Matteo 09.11.: „bei Schrift zu unten geht ein bisschen der 3D-Effekt verloren“): Kante in festen px statt em */
@media(max-width:500px){
  .riesig{transform:perspective(600px) rotateX(16deg);margin-bottom:.14em;
    text-shadow:0 1px 0 var(--metall-kante),0 2px 0 var(--metall-kante),0 3px 0 var(--metall-kante-tief),0 4px 0 var(--metall-kante-tief),
      0 5px 0 var(--metall-kante-tief),0 6px 0 var(--metall-kante-tief),0 7px 0 var(--metall-kante-tief),0 12px 14px var(--metall-schatten)}
}