/* ========================================================================== Handy und Tablet · Fassung 12 Stand 11.10.2026. Jede Regel in dieser Datei steht in einer Medienabfrage bis hoechstens 1100 Pixel Breite oder gilt nur fuer Touch-Geraete ohne Maus (hover: none). Auf dem Desktop greift hier nichts: Die Desktopansicht bleibt genau so, wie sie ist. Nachgemessen mit einem Layout-Abdruck (Lage, Groesse und berechnete Stile jedes Elements) vor und nach der Aenderung, von 1280 bis 3840 Pixel, Chromium und WebKit. Alles ist auf Fassung 12 begrenzt (:root[data-fassung="12"]), damit die alten Fassungen im Lab unveraendert bleiben. Die Datei laedt als letzte. Gemessen auf: iPhone SE (375), iPhone 14 (390), iPhone Pro Max (430), Android (360), iPad mini (768), iPad Air hoch (820), iPad Pro hoch (1024). ========================================================================== */ /* -------------------------------------------------------------------------- Tablet und Handy (bis 1100) -------------------------------------------------------------------------- */ @media (max-width: 1100px) { :root[data-fassung="12"] .hero__innen, :root[data-fassung="12"] .hero__band { min-width: 0; } /* Cookie-Griff: Der schwebende Knopf unten links lag auf Handy und Tablet dauernd ueber Text. Die Einstellungen bleiben auf jeder Seite erreichbar — im Fuss ("Cookie-Einstellungen") und auf der Datenschutzseite. */ :root[data-fassung="12"] .cookie-griff { display: none; } /* Die Marken unter dem Vorspann klebten am Text */ :root[data-fassung="12"] .seitenkopf__meta { margin-top: 22px; } /* --- Startseite: Hero -------------------------------------------------- Auf dem Desktop steht das Zeichen gross rechts neben dem Text. Schmal lag es als Hintergrund hinter Text und Knoepfen, und der Text stand in der Bildschirmmitte unter viel Leerraum. Hier beginnt der Text oben, und das Zeichen steht darunter in einem eigenen Feld (hero-gfg.js setzt es dort in die Mitte). */ :root[data-fassung="12"] .hero__klebe { position: relative; height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; } :root[data-fassung="12"] .hero__innen { order: 1; align-self: stretch; padding-top: calc(var(--kopf-h) + 44px); } :root[data-fassung="12"] .hero__buehne { order: 2; position: relative; inset: auto; height: 380px; margin-top: 30px; opacity: 1; } :root[data-fassung="12"] .hero__band { order: 3; } :root[data-fassung="12"] .hero__schleier { display: none; } :root[data-fassung="12"] .hero__themen { margin-top: 24px; } :root[data-fassung="12"] .hero__legende, :root[data-fassung="12"] .hero__scroll { display: none; } /* --- Seitenkopf der Unterseiten ---------------------------------------- Die Zeichnung bekommt eine feste Hoehe, und die Unterschrift steht darunter statt darauf — vorher lagen Beschriftungen der Zeichnung und Unterschrift uebereinander. */ :root[data-fassung="12"] .seitenkopf__band, :root[data-fassung="12"] .seitenkopf__band--hoch { height: auto; } :root[data-fassung="12"] .seitenkopf__band .fx { position: relative; inset: auto; height: 300px; } :root[data-fassung="12"] .seitenkopf__band--hoch .fx { height: 360px; } :root[data-fassung="12"] .seitenkopf__legende { position: static; padding: 11px var(--rand, 20px) 12px; margin-left: 0; border-top: 1px solid var(--border); line-height: 1.5; background: none; } } /* -------------------------------------------------------------------------- Tablet quer (1180, 1366): Desktop-Aufbau, aber ohne Maus Der schwebende Cookie-Griff deckte dort das Themenband ab. Greift nur auf Geraeten ohne Zeiger, der schweben kann — ein Desktop mit Maus nie. -------------------------------------------------------------------------- */ @media (hover: none) and (pointer: coarse) { :root[data-fassung="12"] .cookie-griff { display: none; } } /* -------------------------------------------------------------------------- Tablet hochkant und Handy (bis 900) -------------------------------------------------------------------------- */ @media (max-width: 900px) { /* Kein Raster darf breiter werden als sein Inhalt erlaubt: ohne minmax(0, …) schiebt ein langer Knopf die ganze Spalte auf. */ :root[data-fassung="12"] .abschluss { grid-template-columns: minmax(0, 1fr); } /* Szene "Vier Bausteine" (Startseite): Die Marke oben rechts und der Schrittzaehler unten rechts lagen auf der Zeichnung. Sie bekommen je eine eigene Zeile, die Zeichnung steht dazwischen. */ :root[data-fassung="12"] .szene__buehne { aspect-ratio: auto; } :root[data-fassung="12"] .szene__buehne .fx { position: relative; inset: auto; aspect-ratio: 16 / 10; margin: 38px 0 36px; } /* Stellen: Eckdaten unter den Titel statt in eine Restspalte */ :root[data-fassung="12"] .stelle__kopf { row-gap: 10px; } :root[data-fassung="12"] .stelle__titel, :root[data-fassung="12"] .stelle__eckdaten { grid-column: 1 / -1; } :root[data-fassung="12"] .stelle__eckdaten { gap: 6px 10px; } } /* -------------------------------------------------------------------------- Handy (bis 700) -------------------------------------------------------------------------- */ @media (max-width: 700px) { /* --- Kopfzeile --------------------------------------------------------- Die Wortmarke war 176 Pixel breit und nahm fast die Haelfte der Zeile. Kleiner gesetzt bleibt sie lesbar, und die vier Knoepfe rechts (Suche, Sprache, Hell/Dunkel, Menue) bekommen Tippflaechen von 42 Pixeln. */ :root[data-fassung="12"] .kopf__zeile { gap: 10px; } :root[data-fassung="12"] .kopf__marke .logo { width: 128px; } :root[data-fassung="12"] .kopf__werkzeuge { gap: 6px; } :root[data-fassung="12"] .sprachknopf, :root[data-fassung="12"] .kopf__suche, :root[data-fassung="12"] .kopf__modus, :root[data-fassung="12"] .kopf__burger { width: 42px; height: 42px; } /* Suchfeld ueber die volle Breite, Treffer etwas knapper */ :root[data-fassung="12"] .suche { max-height: calc(100vh - var(--kopf-h)); max-height: calc(100dvh - var(--kopf-h)); } :root[data-fassung="12"] .suche__innen { padding: 14px var(--rand, 20px) 18px; } :root[data-fassung="12"] .suche__eingabe { font-size: 18px; } :root[data-fassung="12"] .suche__treffer a { padding: 10px 10px; } :root[data-fassung="12"] .suche__titel { font-size: 15.5px; } /* --- Knoepfe ----------------------------------------------------------- Lange Beschriftungen duerfen umbrechen, statt ueber den Rand zu laufen. */ :root[data-fassung="12"] .gf-btn { white-space: normal; height: auto; min-height: var(--btn-h); padding-block: 12px; line-height: 1.35; text-align: center; max-width: 100%; } :root[data-fassung="12"] .gf-btn .ikon { flex: none; } /* --- Ueberschriften ---------------------------------------------------- Das laengste Wort in einer Seitenueberschrift ist "Geschaeftsbedingungen" (AGB). Bei 38 Pixeln ist es breiter als ein 390er-Bildschirm. Die Schrift wird deshalb hoechstens so gross, dass es in die Zeile passt — bei 390 Pixeln 34 statt 38, bei 360 Pixeln 31; ab 430 bleibt es bei 38. Keine Silbentrennung: ein weiches Trennzeichen im Text haette auch den Desktop umgebrochen, und die automatische Trennung trennte "En-ergie". */ :root[data-fassung="12"] .seitenkopf__titel { font-size: min(var(--fs-display), calc((100vw - 40px) / 10.2)); } :root[data-fassung="12"] h1, :root[data-fassung="12"] h2, :root[data-fassung="12"] h3 { overflow-wrap: break-word; } /* --- Startseite: Hero (Aufbau siehe bis 900) -------------------------- Auf dem Handy steht das Zeichen klein unter den Knoepfen. */ :root[data-fassung="12"] .hero__innen { padding-top: calc(var(--kopf-h) + 30px); } :root[data-fassung="12"] .hero__buehne { height: 236px; margin-top: 26px; } :root[data-fassung="12"] .hero__eyebrow { margin-bottom: 16px; } :root[data-fassung="12"] .hero__titel { margin-bottom: 16px; } :root[data-fassung="12"] .hero__lead { margin-bottom: 26px; } :root[data-fassung="12"] .hero__knoepfe { gap: 10px; } :root[data-fassung="12"] .hero__themen { margin-top: 18px; } :root[data-fassung="12"] .hero__thema { padding: 14px 10px; } /* --- Seitenkopf der Unterseiten (Aufbau siehe bis 900) --------------- Weniger Luft ueber dem Pfad, flachere Zeichnung. */ :root[data-fassung="12"] .seitenkopf { padding-top: calc(var(--kopf-h) + 26px); } :root[data-fassung="12"] .brotkrumen { margin-bottom: 22px; } :root[data-fassung="12"] .seitenkopf__band, :root[data-fassung="12"] .seitenkopf__band--hoch { margin-top: 34px; } :root[data-fassung="12"] .seitenkopf__band .fx { height: 236px; } :root[data-fassung="12"] .seitenkopf__band--hoch .fx { height: 280px; } /* Vorgehen: der Projektpfad steht auf dem Handy senkrecht (energie.js) */ :root[data-fassung="12"] .seitenkopf__band .fx[data-fx="pfad"] { height: 340px; } /* --- Ebenen-Tabelle (Betrieb & Markt) ---------------------------------- Drei Spalten mit Fliesstext passen nicht auf 390 Pixel. Jede Zeile wird ein Block: Ebene als Titel, darunter die beiden Spalten mit ihrer Ueberschrift als kleine Marke. */ :root[data-fassung="12"] .ebenen-blatt { overflow: visible; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle { min-width: 0; display: block; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle thead { display: none; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle tbody, :root[data-fassung="12"] .ebenen-blatt .gf-tabelle tr { display: block; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle tr { padding: 16px 16px 18px; border-bottom: 1px solid var(--c-linie-weich); } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle tbody tr:last-child { border-bottom: 0; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle th, :root[data-fassung="12"] .ebenen-blatt .gf-tabelle td { display: block; width: auto; padding: 0; border: 0; white-space: normal; font-size: 14px; line-height: 1.55; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle th:first-child, :root[data-fassung="12"] .ebenen-blatt .gf-tabelle td:first-of-type { width: auto; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle td { margin-top: 10px; } :root[data-fassung="12"] .ebenen-blatt .gf-tabelle td[data-spalte]::before { content: attr(data-spalte); display: block; margin-bottom: 3px; font-family: var(--f-mono, monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); } /* --- Zwei Spalten, die auf dem Handy zu eng werden ---------------------- */ :root[data-fassung="12"] .rollen, :root[data-fassung="12"] .rollen:has(> :nth-child(2):last-child), :root[data-fassung="12"] .rollen:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } :root[data-fassung="12"] .phasen { grid-template-columns: minmax(0, 1fr); row-gap: 26px; } :root[data-fassung="12"] .phase { padding-right: 0; } /* --- Vier Faelle: Innenabstand in den Kaesten -------------------------- */ :root[data-fassung="12"] .fall { padding: 22px 18px 24px; } :root[data-fassung="12"] .fall__marke { padding-left: 0; } /* --- Zeichenflaechen in Karten ------------------------------------------ Auf dem Handy waren sie bis zu 2,4-mal so breit wie hoch (348 x 173). Die Beschriftungen haben aber feste Groessen — sie lagen dann uebereinander. Etwas hoeher gesetzt, haben sie Platz. */ :root[data-fassung="12"] .lb__buehne { aspect-ratio: 16 / 11; } :root[data-fassung="12"] .stufe__buehne { aspect-ratio: 16 / 10; } :root[data-fassung="12"] .leitstand__kanaele .kanal__buehne, :root[data-fassung="12"] .leitstand__kanaele .kanal:last-child .kanal__buehne { aspect-ratio: 4 / 3; } /* --- Firmenregister (Projekte) ----------------------------------------- Bei 360 Pixeln ist eine Spalte gut 100 Pixel breit; "Wasseraufbereitung" ist breiter. Lange Namen werden getrennt, statt ueber den Rand zu ragen. */ :root[data-fassung="12"] .firmen__liste { grid-template-columns: minmax(0, 1fr); } :root[data-fassung="12"] .firmen__liste li { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* --- Fuss: Wortmarke kleiner ------------------------------------------- */ :root[data-fassung="12"] .fuss__marke .logo { width: 168px; } } /* -------------------------------------------------------------------------- Kleine Handys (bis 380: iPhone SE, viele Android-Geraete) -------------------------------------------------------------------------- */ @media (max-width: 380px) { :root[data-fassung="12"] .kopf__marke .logo { width: 116px; } :root[data-fassung="12"] .kopf__werkzeuge { gap: 5px; } :root[data-fassung="12"] .sprachknopf, :root[data-fassung="12"] .kopf__suche, :root[data-fassung="12"] .kopf__modus, :root[data-fassung="12"] .kopf__burger { width: 40px; height: 40px; } }