/* Gemeinsame Formatvorlagen aller Seiten unter leckcontrol.de. */ :root { --tinte:#14232B; --matt:#5B7480; --marke:#0E7C86; --hell:#3FB6C0; --linie:#DDE5E9; --grund:#F4F7F9; --signal:#D9541E; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--tinte);background:#fff; font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased} /* Zwei Spaltenbreiten mit verschiedenen Aufgaben. `bahn` traegt Fliesstext und bleibt bei rund 70 Zeichen je Zeile - darueber wird Lesen anstrengend. `bahn-breit` traegt Bildschirmaufnahmen; die sind 1400 px breit gebaut, und sie in 970 px zu pressen macht sie um ein Drittel kleiner als noetig. Genau daran lag es, dass die Seite auf einem grossen Bildschirm zusammengedrueckt wirkte. */ .bahn{max-width:1100px;margin:0 auto;padding:0 24px} .bahn-breit{max-width:1448px;margin:0 auto;padding:0 24px} a{color:inherit} /* `height:auto` ist hier kein Feinschliff, sondern Pflicht. Die Attribute width/height im -Tag wirken wie CSS-Angaben (sie sind dort, damit der Browser den Platz schon vor dem Laden kennt und nichts springt). Setzt das Stylesheet dann nur `width`, bleibt die Hoehe auf dem Attributwert stehen - ein Telefonbild wurde so auf 278 x 1400 gezerrt statt 278 x 605, und die Bueroansicht bei 390 px um 46 Prozent gestaucht. Aufgefallen ist es erst, als jemand das Bild-Tag danebenlegte. */ img{max-width:100%;height:auto} header{background:var(--tinte);color:#fff} .kopf{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px;flex-wrap:wrap} .kopf img{height:30px;display:block} .kopf nav{display:flex;gap:20px;font-size:15px} .kopf nav a{color:rgba(255,255,255,.72);text-decoration:none} .kopf nav a:hover{color:#fff} .knopf{display:inline-block;background:var(--hell);color:var(--tinte);text-decoration:none; padding:11px 20px;border-radius:8px;font-weight:600;font-size:15px;white-space:nowrap; border:0;cursor:pointer;font-family:inherit} .knopf:hover{background:#5ccbd4} .knopf-rand{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)} .knopf-signal{background:var(--signal);color:#fff} .knopf-signal:hover{background:#ec6127} h1{font-size:clamp(30px,5.2vw,50px);line-height:1.12;letter-spacing:-.032em;margin:0 0 20px} h2{font-size:clamp(23px,3.3vw,30px);letter-spacing:-.022em;margin:0 0 12px} h3{font-size:18px;margin:0 0 6px} .fuehrung{color:var(--matt);max-width:60ch} section{padding:64px 0;border-bottom:1px solid var(--linie)} .vor{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--marke);font-weight:700;margin:0 0 10px} .drei{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .drei p{color:var(--matt);font-size:15.5px;margin:0} .drei .zahl{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--marke);margin:0 0 8px} figure{margin:0} /* --- Browserrahmen --------------------------------------------------------- Eine Bildschirmaufnahme ohne Rahmen sieht aus wie ein Ausschnitt aus einem Dokument. Mit Fensterleiste erkennt man auf den ersten Blick: Das ist eine Anwendung im Browser. */ .fenster{border:1px solid var(--linie);border-radius:12px;overflow:hidden; background:#fff;box-shadow:0 3px 16px rgba(20,35,43,.10)} .fenster-leiste{display:flex;align-items:center;gap:8px;padding:9px 14px; background:#EDF2F5;border-bottom:1px solid var(--linie)} .fenster-punkte{display:flex;gap:6px;flex:none} .fenster-punkte i{width:10px;height:10px;border-radius:50%;background:#C9D6DD;display:block} .fenster-adresse{flex:1;text-align:center;font-size:11.5px;color:var(--matt); background:#fff;border-radius:20px;padding:3px 12px;border:1px solid var(--linie); max-width:280px;margin:0 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fenster img{display:block;width:100%;height:auto;border:0;border-radius:0;box-shadow:none} /* --- Telefonrahmen --------------------------------------------------------- Die Aufnahmen aus dem Simulator bringen Statusleiste und Dynamic Island schon mit. Der Rahmen liefert nur das Gehaeuse - eine zweite Aussparung waere doppelt und faellt sofort auf. */ .telefon{position:relative;width:100%;max-width:300px;margin:0 auto; padding:11px;background:#0B171E;border-radius:42px; box-shadow:0 0 0 2px #2A3A44, 0 14px 34px rgba(11,23,30,.28)} .telefon img{display:block;width:100%;height:auto;border-radius:31px;border:0;box-shadow:none} .telefone{display:grid;gap:56px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); max-width:720px;margin:0 auto} .telefone figcaption{text-align:center;margin-top:14px} figure img{width:100%;height:auto;display:block;border:1px solid var(--linie);border-radius:10px; box-shadow:0 2px 10px rgba(20,35,43,.07)} figcaption{font-size:13.5px;color:var(--matt);margin-top:8px} .wege{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .weg{background:var(--grund);border-radius:12px;padding:24px} .weg p{color:var(--matt);font-size:15px;margin:0 0 12px} .weg ul{margin:0;padding:0;list-style:none;font-size:15px} .weg li{padding-left:20px;position:relative;margin-bottom:6px} .weg li::before{content:"›";position:absolute;left:0;color:var(--marke);font-weight:700} .dunkel{background:var(--tinte);color:#fff;border:0} .dunkel h2{color:#fff} .dunkel .fuehrung{color:rgba(255,255,255,.72)} form.karte{background:var(--grund);border-radius:12px;padding:24px;max-width:520px} .dunkel form.karte{background:rgba(255,255,255,.06)} label{display:block;font-size:13px;font-weight:600;margin:0 0 5px} input,textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border-radius:8px; border:1px solid var(--linie);background:#fff;color:var(--tinte)} .dunkel input,.dunkel textarea{background:rgba(255,255,255,.9);border-color:transparent} .feldpaar{display:grid;gap:12px;grid-template-columns:1fr 1fr} .zeile{margin-bottom:14px} .zustimmung{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--matt);font-weight:400} .dunkel .zustimmung{color:rgba(255,255,255,.66)} .zustimmung input{width:auto;margin-top:3px} .rueckmeldung{font-size:14px;margin-top:12px} .rueckmeldung.gut{color:#1D9E68} .rueckmeldung.schlecht{color:#C0392B} .dunkel .rueckmeldung.gut{color:#7FE3B4} footer{padding:30px 0;font-size:14px;color:var(--matt)} footer .zeile2{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} footer a{color:var(--matt)} /* --- Rechtstexte ---------------------------------------------------------- */ .text h2{font-size:20px;margin:32px 0 8px} .text h3{font-size:16px;margin:20px 0 4px} .text p,.text li{color:var(--matt);font-size:15.5px} .text{max-width:70ch} /* --- Bewegung ------------------------------------------------------------- Kurz und einmalig: Ein Aufblenden beim Erscheinen, 320 ms, sonst nichts. Wer die Seite ein zweites Mal aufruft, soll nicht wieder warten. Und wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt gar keine. */ /* Sichtbar ist der Normalfall. Erst wenn das Skript laeuft, setzt es die Klasse `bewegt` auf - dann duerfen Elemente vor dem Erscheinen verborgen sein. Andersherum waere es ein Fehler: Ohne JavaScript blieben Ueberschriften und Texte dauerhaft unsichtbar, auch fuer Suchmaschinen. Genau das ist beim ersten Anlauf passiert und faellt im Alltag nicht auf, weil JavaScript fast immer laeuft - fast. */ .auf{opacity:1;transform:none} .bewegt .auf{opacity:0;transform:translateY(10px)} .bewegt .auf.da{opacity:1;transform:none;transition:opacity .32s ease,transform .32s ease} @media (prefers-reduced-motion:reduce){ .bewegt .auf,.bewegt .auf.da{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} } /* --- Hinweisleiste --------------------------------------------------------- */ #hinweis{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;background:#fff; border:1px solid var(--linie);border-radius:12px;padding:16px 20px; box-shadow:0 6px 24px rgba(20,35,43,.16);display:none;gap:16px;align-items:center; flex-wrap:wrap;max-width:760px;margin:0 auto;font-size:14px;color:var(--matt)} #hinweis.zeigen{display:flex} #hinweis strong{color:var(--tinte)} /* --- Schmale Bildschirme --------------------------------------------------- Bei 390 px lief die Seite um 39 px ueber: Die Kopfnavigation passte nicht in eine Zeile und schob den ganzen Aufbau nach rechts. Auf dem Telefon sah dadurch alles gequetscht und verrutscht aus - am Schreibtisch faellt so etwas nie auf, weil dort Platz genug ist. */ @media (max-width: 760px) { .bahn{padding:0 18px} .kopf{gap:12px} .kopf nav{display:none} /* Die Abschnitte stehen ohnehin darunter */ .kopf img{height:26px} section{padding:44px 0} h1{font-size:30px} .feldpaar{grid-template-columns:1fr} form.karte{padding:18px} #hinweis{left:10px;right:10px;bottom:10px;padding:14px 16px; flex-direction:column;align-items:flex-start;gap:12px} #hinweis .knopf{margin-left:0 !important;width:100%;text-align:center} .bahn-breit{padding:0 18px} .fenster-adresse{display:none} .telefone{gap:32px} /* Eine Ansicht, die fuer 1400 px gebaut ist, auf 354 px zu stauchen macht sie unlesbar - man sieht nur noch, DASS da eine Tabelle ist. Deshalb behaelt sie im Rahmen eine Mindestbreite und laesst sich seitlich schieben. Der Rahmen selbst bleibt in der Spalte, die Seite laeuft also nicht ueber. */ .fenster{overflow-x:auto;-webkit-overflow-scrolling:touch} .fenster img{min-width:760px;height:auto} .fenster::after{content:"› seitlich schieben";display:block;position:sticky;left:0; font-size:11px;color:var(--matt);padding:6px 12px;background:#EDF2F5; border-top:1px solid var(--linie)} }