/* ============================================================ Urlaubssehnsucht — gemeinsame Gestaltung Leitbild: **europäische Autobahnbeschilderung.** Ein Wegweiser sagt in drei Zeilen, wohin es geht und wie weit — ohne Stimmung, ohne Verzierung, lesbar bei 130 km/h. Genau das will dieses Produkt auch. Vorher stand hier „blaue Stunde durch die Windschutzscheibe": Cremeweiß (#ECE3D2) auf Blaugrün mit Bernstein daneben. Das war stimmungsvoll und sah aus wie jedes zweite KI-Werkzeug — dieselbe Elfenbein-plus-Bernstein- Palette, dazu alles in Pillenform. Die Funktionsfarben blieben, was sie sind (grün = mautfrei, bernstein = Maut, blau = Schild); getauscht wurden Grund und Neutrale: kühles Graphit statt Blaugrün, Signalweiß statt Creme, und die Kanten sind Kanten. ============================================================ */ :root{ --nacht: #0E1319; /* Graphit, ohne Grünstich */ --flaeche: #171D26; --flaeche-2: #1F2733; --linie: #2A323E; --linie-hell: #3B4553; --text: #EDF1F5; /* Signalweiß, nicht Elfenbein */ --text-mute: #9BA7B5; --text-leise: #6B7787; /* Funktionsfarben. Sie tragen Bedeutung und stehen so in Tests, Kommentaren und im Mautband — hier wird nur die Sättigung an die Beschilderung angeglichen, nicht die Zuordnung. */ --frei: #35C48C; /* grünes Schild: kostenfrei */ --peage: #F5B301; /* gelbes Schild: kostenpflichtig */ --schild: #5B9BFF; /* blau, hell genug für Text und Fokus */ --warn: #E0554A; /* Die tragende Fläche des Wegweisers. Erster Versuch war das Blau vom Autobahnkreuz bei Tageslicht (#1E64D0). Auf dieser Seite war es der einzige gesättigte Farbblock und stach heraus wie ein Aufkleber — die Tafel gehört zur Seite, nicht obendrauf. Jetzt ist es dasselbe Schild bei Nacht: dieselbe Farbe, nur so, wie Scheinwerfer sie um zehn Uhr abends zeigen. */ --wegweiser-flaeche: #14355F; --wegweiser-kante: #0F2745; --fr: #F5B301; --it: #E0554A; --at: #5B9BFF; /* Bahnschrift ist die Schrift der deutschen Beschilderung (DIN 1451) — für dieses Produkt keine Geschmacksfrage, sondern die Sache selbst. Der Fließtext lag bisher in Cambria: eine Buchschrift, die dem Ganzen den Ton eines Reisefeuilletons gab. Ein Wegweiser ist kein Feuilleton; der Text steht jetzt in derselben Familie wie die Beschriftung. */ --ff-display:'Bahnschrift','DIN Alternate','Roboto Condensed','Arial Narrow','Segoe UI Semibold',sans-serif; --ff-body: system-ui,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --ff-mono: Consolas,'SF Mono',Menlo,'Courier New',monospace; --w: 1240px; /* ---------------------------------------------------------- ABSTAND Vier mal [1,2,3,4,5,7,10,14,20]. Die Stufe waechst um rund das 1,4-fache — eng genug, dass fuer jeden Zweck etwas dasteht, weit genug, dass zwei Stufen sich unterscheiden lassen. Sie enthaelt 20 und 28 ausdruecklich, weil der Bestand darauf steht: `.wrap` hat 28 Punkte Luft, die Kopfleiste ebenso. Die Skala passt sich dem an, was schon da ist — sonst verschiebt sich jede Seite um vier Punkte, ohne dass irgendwer etwas davon haette. ---------------------------------------------------------- */ --a1: 4px; --a2: 8px; --a3: 12px; --a4: 16px; --a5: 20px; --a6: 28px; --a7: 40px; --a8: 56px; --a9: 80px; /* ---------------------------------------------------------- RADIUS Vorher lagen zehn Werte im Umlauf — 0, 2, 3, 4, 5, 6, 7, 8, 10, 50% und 999px — fuer im Grunde vier Aufgaben. Hier stehen die vier: fein Haarlinien-Bahnen (Schieberegler, Fortschrittsteile) klein alles, was Text aufnimmt: Eingaben, Meldungen, Treffer mittel Tafeln und Karten gross Buehnen, die den Blick halten sollen pille Knoepfe und Etiketten **Seit dem Wechsel auf die Beschilderung sind das Kanten, keine Rundungen.** Ein Verkehrsschild hat drei Millimeter Radius, damit man sich nicht schneidet — nicht dreissig, damit es freundlich aussieht. Rundum gepillte Knoepfe waren der zweite Teil der Signatur, die wie ein KI-Werkzeug aussah. Der Name `--r-pille` bleibt: Ein Dutzend Dateien benutzt ihn, und ein Umbenennen haette jede davon angefasst, ohne dass sich etwas aendert. Er heisst jetzt „die Kante der Knoepfe und Etiketten" — was er immer war, nur nicht mehr rund. ---------------------------------------------------------- */ --r-fein: 1px; --r-klein: 2px; --r-mittel: 3px; --r-gross: 4px; --r-pille: 3px; /* ---------------------------------------------------------- DAUER Vier Stufen, jede mit einer Aufgabe. Vorher waren sieben Werte im Umlauf (.12 .14 .15 .16 .18 .2 .3) — Unterschiede, die niemand sehen kann, die aber verhindern, dass zwei Dinge gleichzeitig ankommen. tupf Rueckmeldung unter dem Finger: Schweben, Druecken, Fokus. Unter 100ms liest das Auge es als sofort. kurz Zustandswechsel an Ort und Stelle: an/aus, gewaehlt/nicht. mittel etwas kommt oder geht: Panel, Meldung, Listeneintrag. lang etwas Grosses bewegt sich: Seitenwechsel, Buehnen. ---------------------------------------------------------- */ --d-tupf: 90ms; --d-kurz: 160ms; --d-mittel: 280ms; --d-lang: 520ms; /* ---------------------------------------------------------- KURVE Bewegung in der Wirklichkeit startet und endet nicht gleich schnell. Was ankommt, wird langsamer; was verschwindet, wird schneller. ein kommt herein und laeuft weich aus (Expo-out). Die Kurve stand schon im Planer an der Kostenbahn — sie ist hier nicht neu erfunden, sondern verallgemeinert. aus geht weg und nimmt Fahrt auf. Kuerzer als `ein`, weil dem Auge egal ist, wie etwas verschwindet. beides bewegt sich von A nach B und bleibt sichtbar. feder ueberschwingt leicht. Nur fuer Dinge mit Masse: der Wagen auf dem Streckenband, eine Dachbox, die aufs Dach kommt. ---------------------------------------------------------- */ --k-ein: cubic-bezier(.22, 1, .36, 1); --k-aus: cubic-bezier(.55, 0, .85, .35); --k-beides: cubic-bezier(.65, 0, .35, 1); --k-feder: cubic-bezier(.34, 1.4, .64, 1); /* ---------------------------------------------------------- TIEFE Auf dunklem Grund traegt ein Schlagschatten wenig — Schwarz auf fast Schwarz sieht man kaum. Was dunkle Oberflaechen plastisch macht, ist die helle Innenkante oben: das Licht, das von oben auf den Rand faellt. Deshalb steht `--glanz` gleichberechtigt neben den Schatten und wird meistens mit ihnen zusammen gesetzt. ---------------------------------------------------------- */ --schatten-1: 0 1px 2px rgba(0,0,0,.30), 0 2px 8px rgba(0,0,0,.16); --schatten-2: 0 2px 6px rgba(0,0,0,.34), 0 10px 28px rgba(0,0,0,.28); --schatten-3: 0 6px 14px rgba(0,0,0,.40), 0 24px 60px rgba(0,0,0,.42); --glanz: inset 0 1px 0 rgba(237,241,245,.06); --schleier: rgba(14,19,25,.72); /* ---------------------------------------------------------- EBENE Benannt statt gezaehlt. Wer eine Zahl braucht, nimmt die Bedeutung — dann muss niemand raten, ob 900 ueber oder unter 1000 gehoert. ---------------------------------------------------------- */ --z-karte: 1; --z-klebrig: 100; --z-leiste: 900; --z-menue: 1000; --z-schleier: 1100; --z-meldung: 1200; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--nacht); color:var(--text); font-family:var(--ff-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{font-family:var(--ff-display);font-weight:600;margin:0;line-height:1.05} a{color:var(--schild)} .num{font-family:var(--ff-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em} /* Text, der nur gehoert werden soll. `display:none` und `hidden` waeren falsch — die nehmen ihn auch dem Vorlesewerkzeug weg. Gebraucht wird das ueberall dort, wo ein Bild oder ein Punkt fuers Auge genuegt, aber nicht fuers Ohr: Meilensteine, Punktschalter, Symbolknoepfe. */ .nur-vorlesen{ position:absolute;width:1px;height:1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px; } .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--a6)} .eyebrow{ font-family:var(--ff-display);font-size:12px;font-weight:600; letter-spacing:.24em;text-transform:uppercase;color:var(--text-leise); } /* ---------- Kopfleiste ---------- */ .kopf{ border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:var(--z-leiste); background:rgba(14,19,25,.92);backdrop-filter:blur(8px); } /* Die Leiste laeuft ueber die volle Breite, nicht im 1240er-Raster der Seite: Der Schriftzug steht damit ganz links am Rand, der Zugang zum Konto ganz rechts. Vorher endeten beide dort, wo der Textkoerper endet — auf einem breiten Schirm hing die Leiste in der Mitte, mit Luft an beiden Seiten, die zu nichts gehoerte. Der Inhalt darunter bleibt im Raster. Eine Leiste ist kein Absatz; sie spannt sich ueber das Fenster, so wie ein Schild ueber die Fahrbahn. */ .kopf-innen{ width:100%;padding:var(--a3) var(--a6); display:flex;align-items:center;gap:var(--a5); } /* Die Wege durch die Anwendung stehen zusammen in einer Gruppe: Sprachwahl, „Neue Reise planen", „Planer". Auf schmalen Schirmen schiebt `margin-left` sie nach rechts — das ist die alte Anordnung, frueher mit einem leeren gebaut. Ein Element, das nur Luft ist, muss nicht im HTML jeder Seite stehen. */ .kopf-mitte{display:flex;align-items:center;gap:var(--a3);margin-left:auto} .marke{ font-family:var(--ff-display);font-size:19px;font-weight:700;letter-spacing:-.01em; color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px; } .marke svg{width:22px;height:22px;color:var(--peage)} /* Der Zusatz sagt, was die Marke nicht sagen kann: „Urlaubssehnsucht" ist ein Gefühl, kein Funktionsversprechen. Er steht durch den senkrechten Strich abgesetzt, damit er nicht wie ein Teil des Namens gelesen wird. Unterhalb von 1200 Pixeln verschwindet er — genau dort, wo die Leiste noch in einer Reihe steht und keine drei Zonen bildet. Die Grenze lag lange bei 900; zwischen 901 und 1199 stand der Zusatz dann in einer Reihe, die ihn nicht mehr trug, und die klebende Leiste brach auf 121 Pixel um. Das kostet dauerhaft ein Sechstel des Bildschirms (Befund aus M8), und auf dem Telefon ist die Marke ohnehin nicht der Ort, an dem man Erklärungen liest. Ab 1200 entscheidet die Spaltenbreite (siehe unten). */ .marke-zusatz{ font-family:var(--ff-display);font-size:11.5px;font-weight:400; letter-spacing:.1em;text-transform:uppercase;color:var(--text-leise); padding-left:11px;margin-left:1px;border-left:1px solid var(--linie); } @media (max-width:1199px){ .marke-zusatz{display:none} } /* Zwischen Telefon und Schreibtisch: eine Reihe, aber ohne die Zugaben. In diesem Band steht die Leiste noch nebeneinander, und alles zusammen passt nicht — die Startseite stand bei 700 Pixeln dreizeilig, 141 Pixel hoch, klebend, auf jedem Schirm dieser Groesse. Es weichen dieselben zwei Wege wie auf dem Telefon: „Planer" (von hier ueber „Neue Reise planen" und ueber den Fuss erreichbar) und „Registrieren" (auf der Anmeldeseite steht der Reiter gleich daneben). Nur Verweise, nicht `.nur-breit` allgemein: Der Name neben den Initialen traegt dieselbe Klasse, und wer angemeldet ist, soll auch hier sehen, als wer. */ @media (min-width:641px) and (max-width:1023px){ .kopf nav a.nur-breit{display:none} } /* Lange und kurze Beschriftung stehen beide im HTML; welche zu sehen ist, entscheidet die Breite. Nicht nur am gefuellten Knopf: Der Assistent hat einen langen Verweis („Directement au planificateur"), und der brachte die Leiste auf dem Telefon zum Umbrechen. Die Grundregel steht hier vor den beiden schmalen Baendern — gleiche Staerke, spaeter gewinnt. */ .kopf nav a .tat-kurz{display:none} /* Und unter 780 Pixeln zusaetzlich die kurze Beschriftung — dieselbe, die das Telefon traegt. „Neue Reise" statt „Neue Reise planen" spart sechzig Pixel, und das sind genau die, die dort fehlen. */ @media (min-width:641px) and (max-width:779px){ .kopf nav a .tat-lang{display:none} .kopf nav a .tat-kurz{display:inline} /* Rand und Fugen geben zusaetzlich nach: Mit den weiten Abstaenden des Schreibtischs fehlen bei 641 Pixeln rund zwanzig — und dafuer bricht die Leiste in eine zweite Zeile, die dann klebend stehen bleibt. */ .kopf-innen{padding-left:var(--a4);padding-right:var(--a4);gap:var(--a3)} .kopf-mitte{gap:var(--a2)} } /* ---------- Drei Zonen ab 1200 Pixeln ---------- Links steht, wo man ist. Rechts steht, wer man ist. In der Mitte stehen die Wege: Sprache, neue Reise, Planer. Vorher hingen alle drei Gruppen rechts aneinander, und die Leiste las sich als eine einzige lange Reihe, in der die Marke nur der Anfang war. Echte Mitte, nicht „Mitte des Rests": Die beiden Randspalten sind gleich breit (`1fr`), deshalb liegt die Gruppe auf der Fenstermitte — egal, wie lang der Schriftzug links und der Name rechts gerade sind. Erst ab 1200: Darunter ist die Randspalte schmaler als der Zugang zum Konto, und der liefe dann in die Mitte hinein. Die Grenze steht nicht auf Deutsch, sondern auf Franzoesisch — „Se connecter · S'inscrire" ist das breiteste, was rechts stehen kann, und bei 1024 Pixeln ragte es 67 Pixel in die Mitte. Schmaler bleibt es bei der bisherigen Anordnung: Marke links, alles andere rechts. */ @media (min-width:1200px){ .kopf-innen{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } .kopf-mitte{margin-left:0;justify-self:center;flex-wrap:nowrap} /* Umbrechen darf hier nichts mehr: In drei Spalten hat jede Gruppe eine feste Breite, und eine zweite Zeile schoebe die Leiste auf 108 Pixel. Wird es eng, ragt der Zugang lieber in die Fuge zwischen den Spalten — die ist 24 Pixel breit und dafuer da. */ .kopf-mitte nav,#naviKonto,.kopf-rechts{flex-wrap:nowrap;white-space:nowrap} /* Der Trennstrich gehoerte zu einer Nachbarschaft, die es nicht mehr gibt: Zwischen „Planer" und „Anmelden" liegt jetzt die halbe Leiste. `#naviKonto` steht mit in der Liste, weil die Kennung dort staerker wiegt als jede Klasse — ohne sie bliebe der Strich stehen. */ #naviKonto,.kopf-rechts{justify-self:end;margin-left:0;padding-left:0;border-left:0} /* Der Zusatz weicht, wenn die Spalte ihn nicht mehr traegt — gemessen an der Spalte, nicht an der Fensterbreite. Eine feste Pixelgrenze waere geraten: Wie viel links uebrig bleibt, haengt daran, wie breit die Mitte gerade ist, und die waechst mit der Sprache mit. */ .marke{container-type:inline-size;min-width:0} .marke-zusatz{display:none} /* 440 statt der vollen 472 Pixel des Schriftzugs: Die letzten Buchstaben duerfen in die Fuge zwischen den Spalten reichen. Sie ist Luft, keine Grenze — und bei 472 verschwaende der Zusatz auf einem 1440er Schirm, obwohl noch 16 Pixel bis zur Mitte frei waeren. */ @container (min-width:440px){ .marke-zusatz{display:inline} } } /* Abstand und Trennstrich vor dem Konto: „Planer" ist ein Weg durch die Anwendung, „Anmelden" ein Weg zu einem selbst. Ohne die Fuge liest sich beides als eine Reihe gleicher Punkte. */ #naviKonto{ display:inline-flex;align-items:center;gap:var(--a2); margin-left:var(--a5);padding-left:var(--a5); border-left:1px solid var(--linie); } .kopf nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .kopf nav a{ font-family:var(--ff-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--text-mute);text-decoration:none;padding:var(--a2) var(--a3); border-radius:var(--r-pille);transition:var(--d-tupf) var(--k-beides); } .kopf nav a:hover{color:var(--text);background:var(--flaeche)} .kopf nav a[aria-current="page"]{color:var(--text);background:var(--flaeche-2)} /* Nur der Kontoteil wechselt mit dem Anmeldezustand, nicht die ganze Leiste. Vorher schrieb das Skript `#navi` komplett neu — und loeschte damit jeden Knopf, den das HTML dort hingestellt hatte. Frueher stand hier `display:contents`, damit die Verweise darin in der Flexzeile der Leiste stehen. Das nimmt der Huelle aber jede eigene Box — und damit die Moeglichkeit, Abstand und Trennstrich zu tragen. Die Regel weiter oben macht sie stattdessen selbst zu einer Flexzeile; fuer die Verweise darin aendert sich nichts. */ /* Der Hauptweg ins Produkt, auf jeder Seite an derselben Stelle. Gefuellt wie die starken Knoepfe im Inhalt: dieselbe Erscheinung fuer dieselbe Bedeutung, statt einer dritten Sorte Knopf, die es nur in der Leiste gibt. Die Auswahl steht als `.kopf nav a.kopf-tat` da, nicht als `.kopf-tat` — sonst gewinnt die allgemeinere Regel fuer Verweise in der Leiste, und der Knopf bekaeme deren gedaempfte Schriftfarbe auf hellem Grund. */ .kopf nav a.kopf-tat{ display:inline-flex;align-items:center;gap:7px; font-weight:600;letter-spacing:.1em; background:var(--text);color:var(--nacht); padding:8px 15px; } .kopf nav a.kopf-tat:hover{background:#fff;color:var(--nacht)} .kopf nav a.kopf-tat svg{width:14px;height:14px;flex:none} /* Zwei Beschriftungen, eine sichtbar: In der Leiste entscheidet die Breite, und ein Wort laesst sich nicht kuerzen, wenn es erst im Browser zu lang wird. Die kurze Fassung steht deshalb schon im HTML. */ /* Sprachwahl (M5.3). Wird vom Sprachmodul vor die Navigation gehängt — nicht im HTML jeder Seite wiederholt, sonst läuft es auseinander. */ .sprachwahl{ font-family:var(--ff-display);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; background:transparent;color:var(--text-mute);border:1px solid var(--linie); border-radius:var(--r-pille);padding:7px 10px;cursor:pointer; transition:var(--d-tupf) var(--k-beides); } .sprachwahl:hover{border-color:var(--linie-hell);color:var(--text)} .sprachwahl:focus-visible{outline:2px solid var(--schild);outline-offset:2px} .sprachwahl option{background:var(--flaeche);color:var(--text)} @media print{ .sprachwahl{display:none} } /* ---------- Knöpfe ---------- */ /* `display` schlägt `[hidden]`. Ohne die Regel darunter zeigt der Planer „Meine eigene Runde laden" und „Im Konto speichern" auch dem, der nicht angemeldet ist — beide tragen `hidden` im Markup und waren trotzdem sichtbar. Dieselbe Falle ist dem Projekt schon dreimal gestellt worden (.film-marke, .buehne-halter, .gewaehlt); hier ist sie zum vierten Mal aufgegangen, deshalb steht die Regel direkt neben der Ursache. */ .tat[hidden]{display:none} .tat{ display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer; font-family:var(--ff-display);font-size:12.5px;letter-spacing:.13em;text-transform:uppercase; background:transparent;color:var(--text-mute);border:1px solid var(--linie-hell); border-radius:var(--r-pille);padding:11px 22px;text-decoration:none; transition:var(--d-tupf) var(--k-beides); } .tat svg{width:15px;height:15px;flex:none} .tat:hover{border-color:var(--text-mute);color:var(--text)} .tat:focus-visible{outline:2px solid var(--schild);outline-offset:3px} .tat:disabled{opacity:.45;cursor:default} /* Der Knopf gibt unter dem Finger nach. Ein Pixel und anderthalb Prozent — bewusst zu wenig, um es zu bemerken, gerade genug, damit der Druck sich beantwortet anfuehlt. Auf Zeigergeraeten faellt das kaum auf; am Bildschirm, wo es keinen Tastendruck gibt, ist es die einzige Rueckmeldung, die es ueberhaupt gibt. */ .tat:active:not(:disabled){transform:translateY(1px) scale(.985)} .tat-stark{background:var(--text);border-color:var(--text);color:var(--nacht);font-weight:600} .tat-stark:hover:not(:disabled){background:#fff;border-color:#fff;color:var(--nacht)} .tat-leise{font-size:11.5px;padding:9px 17px;border-color:var(--linie);color:var(--text-leise)} .tat-leise svg{width:13px;height:13px} .tat-breit{width:100%} .tat-gefahr:hover{border-color:var(--warn);color:#E9917C} /* ---------- Formulare ---------- */ .feld{margin-bottom:var(--a4)} .feld label{ display:block;font-family:var(--ff-display);font-size:11.5px; letter-spacing:.16em;text-transform:uppercase;color:var(--text-mute);margin-bottom:7px; } .feld input{ width:100%;background:var(--flaeche);color:var(--text); border:1px solid var(--linie);border-radius:var(--r-klein);padding:12px 14px; font-family:var(--ff-body);font-size:16px; transition:border-color var(--d-kurz) var(--k-beides), box-shadow var(--d-kurz) var(--k-beides); } /* Der Ring statt eines dickeren Rahmens: Ein wachsender Rahmen verschiebt den Text im Feld um einen Punkt, ein `box-shadow` liegt ausserhalb des Kastens und laesst das Layout in Ruhe. */ .feld input:focus{ outline:none;border-color:var(--schild); box-shadow:0 0 0 3px rgba(107,166,222,.16); } .feld input::placeholder{color:var(--text-leise)} .feld .hilfe{font-size:13px;color:var(--text-leise);margin-top:6px} .meldung{ border-radius:var(--r-klein);padding:12px 15px;font-size:14.5px; margin-bottom:var(--a5); border:1px solid var(--linie-hell);color:var(--text-mute); } .meldung.schlecht{border-color:var(--warn);color:#E9917C;background:rgba(224,110,82,.08)} .meldung.gut{border-color:var(--frei);color:var(--frei);background:rgba(79,209,165,.08)} .meldung[hidden]{display:none} /* ---------- Karten ---------- */ .tafel{ background:var(--flaeche);border:1px solid var(--linie); border-radius:var(--r-mittel);padding:30px; box-shadow:var(--glanz); } .trenner{ display:flex;align-items:center;gap:var(--a3);margin:var(--a5) 0; font-family:var(--ff-display);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--text-leise); } .trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--linie)} /* ---------- Google ---------- */ .google{ display:flex;align-items:center;justify-content:center;gap:11px;width:100%; background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:var(--r-klein); padding:12px 16px;font-family:'Segoe UI',Roboto,Arial,sans-serif;font-size:15px;font-weight:500; text-decoration:none;cursor:pointer;transition:var(--d-tupf) var(--k-beides); } .google:hover{background:#f7f8f8;box-shadow:0 1px 3px rgba(0,0,0,.3)} .google svg{width:18px;height:18px;flex:none} .google[aria-disabled="true"]{opacity:.5;pointer-events:none} footer{margin-top:var(--a9);border-top:1px solid var(--linie);padding:var(--a7) 0 var(--a8)} footer p{margin:0 0 var(--a2);font-size:14px;color:var(--text-leise);max-width:78ch} footer a{color:var(--schild);text-decoration:none;border-bottom:1px solid rgba(107,166,222,.3)} /* Der Abschalter fuer `prefers-reduced-motion` stand hier und ist nach bewegung.css gewandert — an die Stelle, an der auch die Animationen stehen, die er abschaltet. Zwei Fassungen an zwei Orten waren genau das Problem: Diese hier kannte `animation-iteration-count` nicht, und endlose Animationen liefen deshalb mit 1 ms Dauer einfach weiter. */ /* ============================================================ TELEFON UND TABLET Zwei Schwellen, weil sie zwei verschiedene Dinge meinen: `max-width` ist eine Frage des Platzes — was nebeneinander nicht passt, kommt untereinander. `pointer:coarse` ist eine Frage des Fingers. Ein Tablet im Querformat ist breit und wird trotzdem angetippt; ein schmales Fenster auf dem Schreib- tisch wird angeklickt und braucht keine 44 Pixel. Wer Tippziele an der Breite festmacht, vergrößert sie am falschen Gerät. ============================================================ */ @media (max-width: 640px){ .wrap{padding:0 var(--a4)} /* Die Kopfleiste war der schlimmste Posten: „Urlaubssehnsucht" brach auf zwei Zeilen um, und weil die Leiste klebt, blieb sie ein Drittel des Bildschirms lang stehen — auf jeder Seite, die ganze Sitzung über. */ /* `flex-wrap:wrap` auf der Zeile ist das Sicherheitsventil: Reicht der Platz in einer Sprache doch nicht (französische Beschriftungen sind länger), rutscht die Navigation auf eine zweite Zeile — statt die Seite waagerecht scrollen zu lassen. */ .kopf-innen{padding:9px 14px;gap:8px;flex-wrap:wrap} /* Der Schriftzug tritt zurück, das Zeichen bleibt. „Urlaubssehnsucht" kostet bei 390 Punkten Breite 117 Punkte — genau so viel, wie ein beschrifteter Knopf „Neue Reise" braucht. Beide gehen nicht, und von den zweien sagt der Knopf dem Leser, was er hier tun kann; der Name steht ohnehin im Titel des Fensters, im Lesezeichen und auf der Seite darunter. */ .marke{font-size:0;gap:0;white-space:nowrap;flex:none} .marke svg{width:24px;height:24px} .kopf nav{gap:0;flex-wrap:nowrap;min-width:0} .kopf nav a{padding:11px 6px;font-size:10.5px;letter-spacing:.04em;white-space:nowrap} /* Wege, die auf derselben Seite ohnehin als großer Knopf stehen, müssen nicht zusätzlich in die Leiste. Sonst bricht sie um — und eine klebende Leiste, die umbricht, kostet dauerhaft ein Sechstel des Bildschirms. */ .kopf nav .nur-breit{display:none} /* Der Abstand in der Leiste steht auf null, damit die Verweise nebeneinander passen. Ein gefuellter Knopf braucht trotzdem Luft, sonst klebt das naechste Wort an seiner Kante. */ .kopf nav a.kopf-tat{padding:9px 12px;gap:5px;letter-spacing:.04em;margin-right:7px} .kopf nav a.kopf-tat svg{width:13px;height:13px} .kopf nav a .tat-lang{display:none} .kopf nav a .tat-kurz{display:inline} /* Zugeklappt steht hier nur „DE" — das native Auswahlfeld ist trotzdem für ein ganzes Wort bemessen und braucht 95 Pixel, überwiegend für seinen eigenen Pfeil. Mit eigenem Pfeil sind es 52. Die 43 Pixel entscheiden darüber, ob die Startseite ihre zwei Navigationspunkte noch in dieselbe Zeile bekommt. */ .sprachwahl{ /* Feste Breite, weil ein