/* schraubklar.de: Anpassungen fuer Tablet und Handy, dann weniger Bewegung.
   Steht als letzte Datei, damit alles hier die Grundregeln ueberschreibt. */

/* ---------------------------------------------------------------
   Tablet und Handy
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* Kopf: Menue enger, damit es neben Team und Schild in eine Zeile passt */
    .or-nav { gap: 8px 14px; font-size: 14px; }
    .or-besetzung { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
    /* Kopf: nur noch Leistungen, Magazin und Erstgespraech, sonst bricht das Menue unter die Figuren */
    .or-kopf-innen { flex-wrap: nowrap; }
    .or-nav a:not(.or-nav-termin):not([href="/magazin"]):not([href="/#leistungen"]) { display: none; }
}

@media (max-width: 860px) {
    .or-bereiche { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .or-seite-kopf { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .or-check-antworten { grid-template-columns: minmax(0, 1fr); }
    .or-preis-treiber dl { grid-template-columns: minmax(0, 1fr); }
    /* Magazin (css/magazin.css, nur auf Magazinseiten geladen; hier harmlos) */
    .or-magazin-liste { grid-template-columns: minmax(0, 1fr); }
    .or-artikel-text { padding: 28px 18px 24px; }
    .or-magazin-kopf, .or-artikel-kopf { padding-top: 136px; }
    :root { --rand: 16px; }
    .or-held-text { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .or-raster { grid-template-columns: minmax(0, 1fr); }
    .or-breit { grid-column: auto; flex-direction: column; gap: 12px; padding: 36px 26px 26px; }
    .or-breit .or-icon { width: 56px; height: 56px; }
    .or-raster--zwei, .or-dienstag, .or-schutz-liste { grid-template-columns: minmax(0, 1fr); }
    .or-ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 18px; }
    .or-test { grid-template-columns: minmax(0, 1fr); padding: 26px 18px; }
    .or-test-ergebnis { border-left: 0; border-top: 3px dashed var(--tinte); padding: 18px 0 0; }
    .or-nav { gap: 6px 14px; font-size: 14px; }
    .or-gucker { top: calc(var(--luft) - 70px); }
    .or-gucker-fenster { width: 60px; height: 60px; }
    .or-gucker-fenster svg { width: 60px; height: 60px; }
    .or-briefe { grid-template-columns: minmax(0, 1fr); }
    .or-sticker { right: -6px; width: 66px; height: 66px; font-size: 14px; }
    .or-sticker--lang { font-size: 12px; }
    .or-ende { padding: 48px 22px 32px; }
    .or-rechtstext-panel { padding: 36px 20px 32px; }
    .or-rechts-figur { right: 12px; }
    .or-rechts-figur .or-bubble { display: none; }
    .sz-say { max-width: 150px; }
    .sz-say .or-bubble { font-size: 12px; padding: 6px 9px; border-radius: 12px; }
    .sz-say .or-bubble::after { width: 12px; height: 12px; bottom: -8px; }
}

@media (max-width: 760px) {
    .or-nav a:not(.or-nav-termin) { display: none; }
    /* Termin-Fenster auf dem Handy: ganze Flaeche, oben nur Titel und Hinweis, darunter der Kalender */
    .or-termin { width: 100vw; height: 100dvh; }
    .or-termin-panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); rotate: 0deg; }
    .or-termin-seite { gap: 6px; padding: 16px 64px 12px 16px; border-right: 0; border-bottom: 3px solid var(--tinte); }
    .or-termin-seite h2 { font-size: 22px; }
    .or-termin-seite .or-cap, .or-termin-figur, .or-termin-vorab, .or-termin-fragen { display: none; }
    .or-termin-zu { top: 10px; right: 10px; }
}

@media (max-width: 600px) {
    .or-check, .or-laufzettel { padding-inline: 18px; }
    .or-seite { hyphens: auto; }
    .or-seite-marken li { flex-direction: column; gap: 4px; }
    /* Handy: im Kopf nur Logo und Erstgespraech, sonst bricht die Navigation
       auf drei Zeilen um und schiebt sich ueber die Figuren. Die Seite ist
       einseitig, alles andere erreicht man durch Scrollen. */
    .or-kopf-innen { flex-wrap: nowrap; gap: 12px; }
    .or-nav a:not(.or-nav-termin) { display: none; }
    .or-nav-termin { font-size: 14px; padding: 4px 9px; }
    .or-wort--kopf { font-size: 18px; }
    .or-wort-schild { padding: 3px 18px 4px; }
    .or-besetzung { grid-template-columns: minmax(0, 1fr); max-width: 380px; margin-inline: auto; }
    .sz-say, .sz-ruf { display: none; }
    .or-gucker .or-bubble { display: none; }
}

@media (max-width: 480px) {
    .or-besetzung { gap: 16px; }
    .sz-say--1 { left: 22%; }
    .sz-say--2 { left: 46%; }
    .sz-say--3 { left: 2%; }
    /* Kopf: Figuren, Schild und Knopf schrumpfen, damit alles in eine Zeile passt */
    .or-kopf .or-logo { gap: 6px; }
    .or-kopf .or-logo-team { width: 82px; height: auto; }
    .or-wort--kopf { font-size: 15px; }
    .or-wort-schild { padding: 3px 15px 4px; }
    .or-nav-termin { font-size: 13px; padding: 3px 7px; }
}

@media (max-width: 400px) {
    /* 360er-Handys: Figuren etwas schmaler, sonst ragt der Knopf ueber den Rand */
    .or-kopf .or-logo-team { width: 72px; }
}

@media (max-width: 359px) {
    /* Sehr schmal: die Figuren im Kopf fallen weg, das Schild mit dem Namen bleibt */
    .or-kopf .or-logo-team { display: none; }
    .or-kopf .or-logo { margin-bottom: 0; align-self: center; }
    .or-kopf .or-logo .or-wort { margin-bottom: 0; }
}

/* Ausser Sicht steht alles still (script.js, ausserSicht()). */
.ist-ausser-sicht, .ist-ausser-sicht * { animation-play-state: paused !important; }

/* Weniger Bewegung: der einzige Block dafuer. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* Logo: Macken und Haende. Dieselben Selektoren wie in kopf-fuss.css,
       damit sie ohne !important gewinnen (gleich stark, spaeter). */
    .or-logo-team .lg-tino .f-hat, .or-logo-team .f-body, .or-logo-team .f-eye, .or-logo-team .f-pupils circle,
    .or-logo-team .lg-janina .f-body, .or-logo-team .lg-melanie .f-body,
    .or-logo-team .lg-maja .f-eye:nth-child(2), .or-logo-team .lg-maja .f-pupils circle:nth-child(2),
    .or-kopf .lg-hand, .or-logo:hover .lg-hand, .or-kopf .lg-hand.ist-hoch { animation: none; }

    /* Bilderwand: Hover-Nummern und Klick-Gag aus, das Foto wechselt trotzdem */
    .sz-rahmen-halter:hover > .sz-rahmen, .ist-bilder .sz-rahmen--melanie, .ist-bilder .sz-rahmen-bild { animation: none; }
    .sz-rahmen, .sz-rahmen-figur { transition: none !important; }

    /* Logo beim Drueberfahren: niemand duckt sich */
    .or-logo-team :is(.lg-tino, .lg-janina, .lg-maja, .lg-melanie), .or-logo-team .f-eyes { transition: none; }

    /* Typenschild: Schraube und Schild bleiben, wo sie sind */
    .or-logo:hover .or-wort-schild, .or-logo:focus-visible .or-wort-schild { rotate: -2deg; }
    .or-logo:hover .or-wort-schraube--rechts, .or-logo:focus-visible .or-wort-schraube--rechts { translate: none; rotate: 0deg; opacity: 1; }

    /* Dauerbewegung der Figuren und der Szene */
    .lg-eyes, .f-eyes, .f-body, .f-arm-wave, .sz-led, .sz-paper, .sz-steam,
    .or-mate[aria-expanded="true"] .f-body { animation: none; }
    .or-schraube-kopf { transition: none; }
    .sz-say { animation: none; }
    .sz-say--1 { opacity: 1; }
    .sz-uhr-sekunde, .sz-uhr-minute, .sz-uhr-stunde, .sz-zettel g, .sz-pflanze-blaetter, .sz-katze-weg, .sz-bein-a, .sz-bein-b, .sz-katze-schwanz,
    .sz-fortschritt-balken, .sz-person, .or-karte-foto, .or-karte .or-figur, .or-gucker-fenster svg, .or-gucker .or-bubble,
    .or-hoch, .or-hoch-figur, .or-abschnitt-kopf h2::after, .or-abschnitt-kopf h2, .or-schritt-nr, .or-test-kreuz::before, .or-test-kreuz::after,
    .or-konfetti, .or-toast, .or-renner-blase { animation: none !important; transition: none !important; }
    .or-party * { animation: none !important; }
    .or-check-antwort { transition: none; }
    .or-404 span, .or-keks svg, .or-autor-ruf, .or-laufzettel-zeichen, .or-rechtstext-panel { animation: none !important; }
    .or-termin[open], .or-termin-schraube { animation: none; }
    .or-logo-ruf, .or-nav-termin:hover, .or-schnipsel, .ist-feierabend .or-logo-team .lg-partyhut { animation: none !important; }
    .or-termin-zu { transition: none; }
    .or-bereich-karte { transition: none; }
    .pt-konfetti { display: none; }
    .sz-katze-weg { translate: 820px 0; }
    .or-abschnitt-kopf h2::after { clip-path: none; }
    .or-gucker-fenster svg { translate: 0 0; }
    .sz-hund-schwanz, html.ist-dunkel body::after, .sz-wolke, .sz-vogel { animation: none !important; }
    .sz-ziel, .or-sticker, .or-panel, .or-renner, .sz-schild-pendel, .or-stempel,
    .sz-knaeuel, .sz-herzen path, .sz-rauch, .or-bohne, .or-adresse a span { animation: none !important; transition: none !important; }
}