/* ========================================================================== Bernd Rasner - Privatassistent Stylesheet der gesamten Website. Aufbau dieser Datei: 1. Farben und Grundwerte 6. Startseite 2. Grundlagen 7. Leistungen und Listen 3. Kopfbereich und Menue 8. Kontakt 4. Schaltflaechen 9. Fussbereich 5. Bausteine im Inhalt 10. Rechtstexte 11. Kleine Bildschirme Hinweis: Die Schriftgroessen sind in "rem" angegeben. Dadurch wirkt die Einstellung "groessere Schrift" im Browser tatsaechlich auf die ganze Seite. ========================================================================== */ /* 1. Farben und Grundwerte ========================================================================== */ :root { /* Farbwelt: Weiss, Tuerkis/Petrol und Gold. Weiss ist die Hauptflaeche - alles andere setzt nur Akzente. */ --weiss: #ffffff; /* Seitenhintergrund, ueberwiegender Anteil */ --tint: #f1f8f8; /* ganz zart getoente Abschnitte */ --tuerkis: #c3dddc; /* helles Tuerkis fuer weiche Flaechen */ --linie: #dbeaea; /* Trennlinien und Rahmen */ --petrol: #097070; /* Markenfarbe: Leiste, Symbole, Farbflaechen */ --petrol-dunkel: #065353; /* Knoepfe und Links - Kontrast 8,9:1 */ --petrol-blass: #e6f2f2; /* zarter Petrol-Hintergrund */ --gold: #d3b454; /* Akzent. NUR mit dunkler Schrift verwenden. */ --gold-blass: #f9f1dc; /* zarter Goldton als Hintergrund */ --gold-hell: #f0d68a; /* Schriftfarbe auf petrolfarbenem Grund. Das normale Gold hat dort zu wenig Kontrast (2,9:1), dieses erreicht 4,1:1. */ --gold-tief: #8a6d15; /* dunkles Gold fuer feine Linien auf Hell */ --text: #111111; /* Schwarz. Kontrast 18,9:1 auf Weiss. */ --text-leise: #444444; /* Nebeninformationen, immer noch 9,7:1 */ /* Abstaende */ --luft-klein: 0.75rem; --luft: 1.5rem; --luft-gross: 3rem; --luft-riesig: 5rem; /* Formen */ --rundung: 14px; --rundung-klein: 8px; --schatten: 0 2px 4px rgba(9, 112, 112, 0.07), 0 8px 24px rgba(9, 112, 112, 0.09); /* Breiten */ --breite-seite: 74rem; /* aeussere Begrenzung des Layouts */ --breite-text: 38rem; /* rund 70 Zeichen pro Zeile */ } /* 2. Grundlagen ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* Basis 20px statt der ueblichen 16px - die gesamte Seite waechst mit. */ font-size: 125%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Sprungmarken landen nicht unter der angehefteten Leiste. */ scroll-padding-top: 10rem; } body { margin: 0; background: var(--weiss); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.7; /* Nichts darf seitlich ueberstehen, auch nicht bei starkem Zoom. Hier steht bewusst "clip" und nicht "hidden": "hidden" wuerde aus dem body einen eigenen Scroll-Bereich machen und damit das Anheften der Menueleiste (position: sticky) ausser Kraft setzen. "clip" schneidet genauso ab, erzeugt aber keinen Scroll-Bereich. */ overflow-x: clip; /* Notbremse fuer einzelne sehr lange Woerter (E-Mail-Adressen, Fachbegriffe) */ overflow-wrap: break-word; } h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--luft-klein); font-weight: 700; text-wrap: balance; /* Lange deutsche Woerter wie "Datenschutzerklaerung" passen auf schmalen Bildschirmen nicht in eine Zeile. "hyphens" trennt sie sauber nach den Silben (dafuer steht lang="de-AT" im -Tag), "overflow-wrap" ist die Notbremse fuer Browser ohne deutsches Trennwoerterbuch. */ hyphens: auto; overflow-wrap: break-word; } h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.1rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.4rem); } p { margin: 0 0 var(--luft); max-width: var(--breite-text); } /* Links im Fliesstext sind immer unterstrichen - Farbe allein genuegt nicht. */ a { color: var(--petrol-dunkel); text-underline-offset: 0.2em; text-decoration-thickness: 2px; } a:hover { color: var(--petrol); } /* Deutlich sichtbarer Rahmen bei Bedienung mit der Tastatur. */ :focus-visible { outline: 4px solid var(--petrol); outline-offset: 3px; border-radius: 4px; } img, svg { max-width: 100%; height: auto; display: block; } /* Nur fuer Vorleseprogramme sichtbar. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Sprunglink ganz am Anfang der Seite. */ .sprunglink { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 100; background: var(--petrol-dunkel); color: #fff; padding: 1rem 1.5rem; border-radius: 0 0 var(--rundung-klein) var(--rundung-klein); text-decoration: none; font-weight: 700; } .sprunglink:focus { top: 0; color: #fff; } /* Aeussere Begrenzung - alle Zeilen laufen auf derselben Kante. */ .huelle { width: 100%; max-width: var(--breite-seite); margin-inline: auto; padding-inline: var(--luft); } /* Ein Abschnitt mit grosszuegigem Abstand nach oben und unten. */ .bereich { padding-block: var(--luft-riesig); } /* Zart getoenter Abschnitt zur Abwechslung. Bewusst sehr hell gehalten, damit Weiss die bestimmende Farbe der Seite bleibt. */ .bereich--getoent { background: var(--tint); border-block: 1px solid var(--linie); } .bereich__kopf { max-width: var(--breite-text); margin-bottom: var(--luft-gross); } .bereich__kopf p:last-child { margin-bottom: 0; } /* 3. Die angeheftete Leiste (Telefonnummer + Menue) ========================================================================== */ /* Telefonnummer und Menue teilen sich EINE Leiste: Nummer links, Menuepunkte rechts. Sie bleibt beim Scrollen oben stehen und ist bewusst flach gehalten, weil sie dauerhaft Platz belegt. */ .klebeleiste { position: sticky; top: 0; z-index: 50; background: var(--petrol); border-bottom: 3px solid var(--gold); box-shadow: 0 4px 16px rgba(9, 112, 112, 0.18); } .klebeleiste__innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1.5rem; padding-block: 0.4rem; } /* Logo und Schriftzug "Zu Ihren Diensten". Beide Bilder sind weiss auf durchsichtigem Grund und stehen deshalb direkt auf der petrolfarbenen Leiste. Ein Klick fuehrt zurueck zur Startseite. */ .leiste-marke { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.6rem; text-decoration: none; } .leiste-marke:hover, .leiste-marke:focus-visible { opacity: 0.82; } /* Die Hoehe steuert die Groesse, die Breite ergibt sich daraus. */ .leiste-marke__logo { flex: none; width: auto; height: 2.1rem; } .leiste-marke__wort { flex: none; width: auto; height: 1.3rem; } /* Menue-Knopf (die drei Striche). Erscheint nur auf schmalen Bildschirmen und nur, wenn JavaScript laeuft - siehe ganz unten im Handy-Abschnitt. */ .menue-knopf { display: none; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; padding: 0; border: 2px solid rgba(255, 255, 255, 0.65); border-radius: var(--rundung-klein); background: transparent; color: #fff; cursor: pointer; } .menue-knopf:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; } /* Die drei Striche: der mittlere ist das selbst, die beiden aeusseren entstehen daraus. */ .menue-knopf__striche { position: relative; display: block; width: 1.5rem; height: 3px; border-radius: 2px; background: currentColor; } .menue-knopf__striche::before, .menue-knopf__striche::after { content: ""; position: absolute; left: 0; width: 100%; height: 100%; border-radius: inherit; background: currentColor; transition: transform 0.15s ease, top 0.15s ease; } .menue-knopf__striche::before { top: -0.5rem; } .menue-knopf__striche::after { top: 0.5rem; } /* Aufgeklappt werden aus den drei Strichen ein Kreuz zum Schliessen. */ .menue-offen .menue-knopf__striche { background: transparent; } .menue-offen .menue-knopf__striche::before, .menue-offen .menue-knopf__striche::after { top: 0; } .menue-offen .menue-knopf__striche::before { transform: rotate(45deg); } .menue-offen .menue-knopf__striche::after { transform: rotate(-45deg); } /* Hauptmenue: vier Schaltflaechen, immer sichtbar. Bewusst kein aufklappbares Menue - jeder Punkt ist sofort da. */ .navi__liste { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; list-style: none; margin: 0; padding: 0; /* der Browser setzt sonst 40px Einzug fuer Listen */ } .navi__punkt { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.3rem 0.9rem; /* Deckkraft 0.65 ist kein Zufall: erst ab hier hebt sich der Rahmen mit 3:1 genug vom petrolfarbenen Grund ab, damit auch bei schwachem Sehvermoegen erkennbar ist, dass es sich um Schaltflaechen handelt. */ border: 2px solid rgba(255, 255, 255, 0.65); border-radius: var(--rundung-klein); color: #fff; font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; } .navi__punkt:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; color: #fff; } /* Die Seite, auf der man sich gerade befindet: weiss ausgefuellt. Auf dem petrolfarbenen Grund ist das unuebersehbar - ein nur etwas dunklerer Kasten waere dort kaum zu unterscheiden. */ .navi__punkt[aria-current="page"] { background: var(--weiss); border-color: var(--weiss); color: var(--petrol-dunkel); } .navi__punkt[aria-current="page"]:hover { background: var(--weiss); color: var(--petrol-dunkel); } /* 4. Schaltflaechen ========================================================================== */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; min-height: 3.75rem; /* rund 75px - bequem zu treffen */ padding: 0.9rem 1.75rem; border: 3px solid var(--petrol-dunkel); border-radius: var(--rundung); background: var(--petrol-dunkel); color: #fff; font-family: inherit; font-size: 1.1rem; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .knopf:hover { background: var(--petrol); border-color: var(--petrol); color: #fff; } .knopf .ikon { flex: none; width: 1.5rem; height: 1.5rem; } /* Zweite Wahl: weisser Knopf mit petrolfarbenem Rahmen. */ .knopf--zweit { background: var(--weiss); color: var(--petrol-dunkel); } .knopf--zweit:hover { background: var(--petrol-blass); color: var(--petrol-dunkel); border-color: var(--petrol-dunkel); } /* Der wichtigste Knopf der Seite: die Telefonnummer. */ .knopf--anruf { flex-direction: column; gap: 0.15rem; min-height: 5.5rem; padding: 1rem 2rem; } .knopf__zeile-klein { font-size: 0.85rem; font-weight: 600; opacity: 0.92; } .knopf__zeile-gross { font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem); font-weight: 700; white-space: nowrap; } /* WhatsApp bleibt in der Farbwelt der Seite: goldener Rahmen auf Weiss. */ .knopf--whatsapp { background: var(--weiss); border-color: var(--gold); color: var(--text); } .knopf--whatsapp:hover { background: var(--gold-blass); border-color: var(--gold); color: var(--text); } /* Mehrere Knoepfe nebeneinander, die auf schmalen Bildschirmen umbrechen. */ .knopfreihe { display: flex; flex-wrap: wrap; gap: var(--luft-klein); margin-bottom: var(--luft); } /* 5. Bausteine im Inhalt ========================================================================== */ /* Bildplatzhalter. Wird spaeter durch ein echtes Foto ersetzt. */ .bild { border-radius: var(--rundung); border: 1px solid var(--linie); background: var(--tint); width: 100%; } .bild--portraet { aspect-ratio: 4 / 5; object-fit: cover; } .bild--quer { aspect-ratio: 3 / 2; object-fit: cover; } /* Fuer ausgesprochen hochformatige Fotos: kein fester Zuschnitt, sondern das natuerliche Seitenverhaeltnis - so ist das ganze Bild zu sehen. Die Hoehe wird begrenzt, damit es neben dem Text nicht ausufert. */ .bild--hoch { width: auto; height: auto; max-width: 100%; max-height: 26rem; justify-self: center; } /* Am Computer deckt sich das Rotkreuz-Foto genau mit der Zeitleiste: Es beginnt auf Hoehe von "seit 2011" und endet bei "... im Impressum". Ueberschrift und Einleitung darueber bleiben aussen vor. */ @media (min-width: 56rem) { /* Die Huelle um Ueberschrift und Zeitleiste wird aufgeloest, damit beide eigene Rasterzeilen bekommen. Am HTML aendert sich dadurch nichts. */ .werdegang > div { display: contents; } /* Zwei Klassen im Selektor, damit "row-gap" die allgemeine Regel fuer ".buehne__innen" weiter unten in der Datei uebersteuert. Sonst kaeme zum Aussenabstand der Ueberschrift noch der Zeilenabstand dazu. */ .werdegang.buehne__innen { position: relative; row-gap: 0; } .werdegang .bereich__kopf { grid-column: 1; grid-row: 1; } /* Ohne den Aussenabstand unten waere die Rasterzeile 30 px hoeher als die Zeitleiste - das Bild wuerde dann unten darueber hinausragen. */ .werdegang .zeitleiste { grid-column: 1; grid-row: 2; margin-bottom: 0; } /* Absolut positioniert, damit die Bildhoehe die Zeilenhoehe nicht beeinflusst - die Zeile richtet sich allein nach der Zeitleiste. "height: 100%" fuellt sie dann exakt aus, die Breite folgt aus dem Seitenverhaeltnis. */ .werdegang .bild--hoch { grid-column: 2; grid-row: 2; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: auto; height: 100%; max-height: none; } } /* Zeile mit Vertrauensmerkmalen unter dem Titel der Startseite. */ .merkmale { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0; padding: 0; font-size: 0.9rem; color: var(--text-leise); } .merkmale li { display: flex; align-items: center; gap: 0.45rem; } .merkmale .ikon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--petrol); } /* Raster fuer die vier Kacheln bzw. Karten. Die Spaltenzahl ist bewusst fest vorgegeben statt automatisch: bei automatischer Verteilung ergaebe sich auf mittelbreiten Bildschirmen eine Aufteilung 3 + 1, und die eine einzelne Kachel darunter sieht nach Versehen aus. So sind es immer 1, 2 oder 4 gleich breite Spalten. */ .raster { display: grid; gap: var(--luft); grid-template-columns: 1fr; } @media (min-width: 48rem) { .raster { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 75rem) { .raster { grid-template-columns: repeat(4, 1fr); } } /* Anklickbare Kachel, die zu einer Leistung fuehrt. */ .kachel { display: flex; flex-direction: column; gap: 0.35rem; height: 100%; padding: var(--luft); border: 2px solid var(--linie); border-radius: var(--rundung); background: var(--weiss); color: var(--text); text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .kachel:hover { border-color: var(--petrol); color: var(--text); transform: translateY(-3px); box-shadow: var(--schatten); } .kachel__ikon { width: 2.6rem; height: 2.6rem; margin-bottom: 0.35rem; color: var(--petrol); } .kachel__titel { font-size: 1.2rem; font-weight: 700; line-height: 1.3; } .kachel__text { margin: 0; font-size: 0.92rem; color: var(--text-leise); } .kachel__mehr { margin-top: auto; padding-top: 0.6rem; font-weight: 700; font-size: 0.92rem; color: var(--petrol-dunkel); text-decoration: underline; text-underline-offset: 0.2em; } /* Am Handy stehen Symbol und Ueberschrift nebeneinander in einer Zeile, der Beschreibungstext darunter ueber die volle Breite. Damit die Ueberschrift daneben Platz hat, sind Symbol, Schrift und Innenabstand etwas knapper gefasst. Am Computer bleibt die Kachel unveraendert (Symbol oben, Ueberschrift darunter). */ @media (max-width: 46rem) { .kachel { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem; row-gap: 0.25rem; padding: 0.9rem 1rem; } .kachel__ikon { grid-column: 1; grid-row: 1; width: 1.9rem; height: 1.9rem; margin-bottom: 0; } /* 0.9rem sind rund 17 px fett. Damit passt auch die laengste Ueberschrift ("Behoerden und Papierkram", 209 px) ab 360 px Bildschirmbreite neben das Symbol. Auf sehr schmalen Geraeten (320 px) bricht sie in zwei Zeilen um - kleiner wollte ich sie fuer die Zielgruppe nicht machen. */ .kachel__titel { grid-column: 2; grid-row: 1; font-size: 0.9rem; } .kachel__text { grid-column: 1 / -1; grid-row: 2; font-size: 0.88rem; } /* "margin-top: auto" gilt nur fuer die Spalten-Anordnung am Computer. */ .kachel__mehr { grid-column: 1 / -1; grid-row: 3; margin-top: 0; padding-top: 0.25rem; } } /* Nicht anklickbarer Kasten - fuer Inhalte ohne Ziel, z. B. "Was mir wichtig ist". */ .karte { height: 100%; padding: var(--luft); border: 2px solid var(--linie); border-radius: var(--rundung); background: var(--weiss); } .karte h3 { margin-bottom: 0.4rem; color: var(--petrol-dunkel); } .karte p:last-child { margin-bottom: 0; } /* Nummerierte Schritte "So einfach geht es". */ .schritte { display: grid; gap: var(--luft); grid-template-columns: 1fr; /* drei Spalten erst ab 48rem, siehe unten */ list-style: none; margin: 0; padding: 0; counter-reset: schritt; } .schritte li { counter-increment: schritt; padding: var(--luft); background: var(--weiss); border: 2px solid var(--linie); border-radius: var(--rundung); } .schritte li::before { content: counter(schritt); display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-bottom: var(--luft-klein); border-radius: 50%; background: var(--gold); color: var(--text); /* dunkel auf gold - Kontrast 9,4:1 */ font-size: 1.5rem; font-weight: 700; } .schritte h3 { margin-bottom: 0.35rem; } .schritte p { margin: 0; color: var(--text-leise); font-size: 0.95rem; } /* Am Handy stehen die drei Schritte untereinander wie eine Zeitleiste: der nummerierte Kreis links, der Text rechts daneben, dazwischen eine senkrechte Linie - also so wie der Werdegang auf "Ueber mich". Am Computer bleiben es weiterhin drei Karten nebeneinander. */ @media (max-width: 46rem) { .schritte { gap: 0; } /* Die Karten-Optik (Rahmen, weisser Grund) entfaellt hier - die Linie uebernimmt das Zusammenhalten der drei Schritte. */ .schritte li { position: relative; display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--luft); padding: 0 0 var(--luft-gross); background: none; border: 0; border-radius: 0; } .schritte li:last-child { padding-bottom: 0; } /* Der Zahlenkreis steht links und reicht ueber Titel und Text hinweg. */ .schritte li::before { grid-column: 1; grid-row: 1 / span 2; align-self: start; margin-bottom: 0; } /* Die Verbindungslinie laeuft von der Unterkante des Kreises hinunter bis zum naechsten Schritt. Beim letzten Schritt entfaellt sie. */ .schritte li::after { content: ""; position: absolute; left: 1.5rem; top: 3rem; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--petrol); } .schritte li:last-child::after { display: none; } .schritte h3 { grid-column: 2; grid-row: 1; } .schritte p { grid-column: 2; grid-row: 2; } } /* 6. Startseite ========================================================================== */ .buehne { padding-block: var(--luft-gross) var(--luft-riesig); } .buehne__innen { display: grid; gap: var(--luft-gross); grid-template-columns: 1fr; align-items: center; } /* Titelbereich der Startseite: bewusst knapp oben, damit der ganze erste Abschnitt gleich sichtbar ist. Kein Abstand nach unten, damit das Portrait buendig an der Kante zum creme-Abschnitt abschliesst ("steht" darauf). Nur hier - der Hero auf "Ueber mich" bleibt unveraendert. */ .buehne--start { padding-block: var(--luft) 0; } /* Titelbereich auf "Ueber mich": Am Computer soll die Ueberschrift auf derselben Hoehe beginnen wie auf "Leistungen" und "Kontakt" - also 100 px unter der Abschnittskante. Zwei Dinge standen dem im Weg: die kleinere Polsterung (60 statt 100 px) und vor allem die vertikale Zentrierung, die den kurzen Text gegen das hohe Foto um weitere 120 px nach unten schob. */ @media (min-width: 56rem) { .buehne--ueber { padding-top: var(--luft-riesig); } .buehne--ueber .buehne__innen { align-items: start; } /* Das Foto etwas kleiner als das Standardmass von 26rem. */ .buehne--ueber .buehne__bild { max-width: 21rem; } } /* Text oben ausrichten (nicht vertikal zentrieren), damit die Ueberschrift knapp unter dem Menue beginnt und der ganze erste Abschnitt sichtbar ist. */ .buehne--start .buehne__innen { align-items: start; } /* Der Titelbereich der Startseite hat drei Erscheinungsformen. Damit an den Uebergaengen keine Breite durch alle Raster faellt, ueberlappen sich die Bereiche an ihren Grenzwerten - welche Regel dort gewinnt, entscheidet die Reihenfolge in dieser Datei (die spaetere sticht): bis 544 px Handy Text laeuft um die Silhouette (weiter unten) 544 - 896 px Tablet alles untereinander in einer Spalte ab 896 px Computer Text links, Portrait rechts daneben Ueberschrift, Text und Portrait sind dabei drei gleichrangige Bausteine. Das Portrait steht im HTML absichtlich VOR dem Text (siehe index.html), damit der Absatz es am Handy umfliessen kann - deshalb muss die Reihenfolge hier jeweils ausdruecklich hergestellt werden. */ /* Tablet: eine Spalte. "order" holt das Portrait wieder ans Ende, der Zeilenabstand kommt wie sonst auch aus den Aussenabstaenden. */ @media (min-width: 34rem) and (max-width: 56rem) { .buehne--start .buehne__innen { row-gap: 0; } .buehne--start .buehne__bild--frei { order: 9; margin-top: var(--luft-gross); } } /* Auf breiten Bildschirmen steht das Portrait rechts neben dem Text. Es soll genau von der Ueberschrift bis zur creme-Kante reichen - also immer exakt so hoch wie die Textspalte, egal wie diese umbricht. Trick: "height: 0" sorgt dafuer, dass das Bild die Zeilenhoehe NICHT selbst bestimmt (sonst wuerde es viel zu hoch), "min-height: 100%" fuellt dann genau die vom Text vorgegebene Hoehe. "object-fit: contain" haelt dabei die Proportionen, unten ausgerichtet. So entsteht weder eine Leerflaeche noch ein Abstand zur creme-Kante. */ @media (min-width: 56rem) { .buehne--start .buehne__innen { row-gap: 0; } .buehne--start h1 { grid-column: 1; grid-row: 1; } /* Die Textspalte bekommt unten den normalen Abschnittsabstand (wie jeder andere Abschnitt). Das Portrait bleibt davon unberuehrt buendig an der creme-Kante - es fuellt ja die volle, dadurch etwas hoehere Zeile. */ .buehne--start .buehne__text { grid-column: 1; grid-row: 2; padding-bottom: var(--luft-riesig); } .buehne--start .buehne__bild--frei { grid-column: 2; grid-row: 1 / 3; order: 0; align-self: stretch; height: 0; min-height: 100%; max-width: none; margin-top: 0; object-fit: contain; object-position: bottom center; } } /* Am Handy nimmt das hohe Menueband viel Platz weg. Damit trotzdem der ganze erste Abschnitt (bis zu den drei Merkmalen) beim Oeffnen sichtbar ist, sind hier die Abstaende im Titelbereich enger gefasst - ohne Schrift oder Knoepfe zu verkleinern. Gilt nur fuer den Startseiten-Hero. */ @media (max-width: 46rem) { .buehne--start { padding-top: 0.75rem; padding-bottom: var(--luft-gross); } /* "Ihr Privatassistent" soll immer in einer eigenen Zeile unter "Bernd Rasner -" stehen, nicht daneben umbrechen. */ .buehne--start h1 .titel__zeile { display: block; } .buehne--start h1 { font-size: 1.5rem; margin-bottom: 0.5rem; } .buehne--start .buehne__text > p { font-size: 0.78rem; margin-bottom: 0.6rem; } .buehne--start .knopf__zeile-klein { font-size: 0.72rem; } .buehne--start .knopf__zeile-gross { font-size: 0.95rem; } } /* Handy: Das Portrait steht rechts und der Text laeuft darum herum - und zwar nicht um ein Rechteck, sondern um die tatsaechliche Silhouette: "shape-outside" liest dafuer den durchsichtigen Rand der PNG-Datei aus. Oben, wo nur der Kopf steht, reichen die Zeilen deshalb weit nach rechts; weiter unten, wo die verschraenkten Arme herausragen, werden sie kuerzer. Darum ist hier auch kein Raster im Einsatz, sondern der gewoehnliche Textfluss - nur dieser kann um ein Bild herumlaufen. "shape-image-threshold: 0.5" laesst die weichen, fast durchsichtigen Randpixel unberuecksichtigt, "shape-margin" haelt den Text auf Abstand zur Silhouette. */ @media (max-width: 34rem) { .buehne--start .buehne__innen { display: block; } .buehne--start .buehne__bild--frei { float: right; width: 55%; height: auto; max-width: none; margin-top: 0; shape-outside: url(../img/bernd-hero.png); shape-image-threshold: 0.5; shape-margin: 0.5rem; } /* Die Knopfreihe darf hier kein eigener Fliesskasten sein (kein flex), sonst wuerde sie dem Portrait als Ganzes ausweichen. Als gewoehnlicher Block stehen die beiden Knoepfe untereinander: der Anruf-Knopf schmal links neben dem Portrait, der zweite Knopf faengt mit "clear" erst unterhalb des Portraits an und laeuft ueber die volle Breite. */ .buehne--start .knopfreihe { display: block; } .buehne--start .knopfreihe .knopf--anruf { /* Etwas schmaler als der freie Platz links neben dem Portrait, damit der Knopf sicher daneben Platz findet und nicht darunter rutscht. */ width: 44%; min-height: 4rem; padding: 0.6rem 0.4rem; margin-bottom: var(--luft-klein); } .buehne--start .knopfreihe .knopf--zweit { clear: right; width: 100%; margin-top: 0; } .buehne--start .merkmale { clear: right; margin-top: var(--luft); } } /* Zwischen rund 355 und 375 px ist der Anruf-Knopf neben dem Portrait so schmal, dass die Telefonnummer in voller Groesse ueber den Rand ragen wuerde. Dort ist sie eine Spur kleiner - gut lesbar bleibt sie. */ @media (min-width: 22rem) and (max-width: 23.5rem) { .buehne--start .knopf__zeile-gross { font-size: 0.86rem; } } /* Auf sehr schmalen Geraeten (rund 320 px) bleibt links neben dem Portrait zu wenig Platz, die Telefonnummer wuerde aus dem Knopf ragen. Dort laeuft der Anruf-Knopf wieder ueber die volle Breite und rutscht dafuer unter das Portrait. */ @media (max-width: 22rem) { .buehne--start .knopfreihe .knopf--anruf { width: 100%; } } .buehne__text > p { font-size: 1.1rem; color: var(--text-leise); } .buehne__bild { max-width: 26rem; justify-self: center; width: 100%; } /* Freigestelltes Portraet (transparenter Hintergrund): steht ohne Rahmen und ohne Kasten frei auf der Seite. Der weiche, der Silhouette folgende Schatten (drop-shadow, nicht das eckige box-shadow) hebt die helle Kleidung dezent vom weissen Seitenhintergrund ab. */ .buehne__bild--frei { filter: drop-shadow(0 12px 22px rgba(9, 112, 112, 0.18)); } /* Abschnitt "Wer zu Ihnen kommt": Text, Bild und Knopf sind drei gleichrangige Bausteine. Am Handy stehen sie in genau dieser Reihenfolge untereinander - der Knopf also erst NACH dem Bild. */ .wer__knopf { justify-self: start; } /* Am Handy entstand der Abstand zwischen Text und Bild doppelt: aus dem Rasterabstand (3rem) UND dem unteren Aussenabstand des letzten Absatzes (1,5rem) - zusammen rund 85 px. Hier wird beides zu einem Abstand zusammengefasst, wie bei den Leistungen. */ @media (max-width: 46rem) { .wer { gap: var(--luft); } .wer__text > p:last-child { margin-bottom: 0; } } /* Am Desktop sieht der Abschnitt aus wie zuvor: Text und Knopf links untereinander, das Bild rechts daneben. Der Zeilenabstand ist hier 0, weil der Absatz darueber schon seinen eigenen Abstand mitbringt. */ @media (min-width: 56rem) { /* Die Bildspalte ist bewusst schmal (17rem). Grund: Das Bild ueberspannt Text- und Knopfzeile. Waere es hoeher als beide zusammen, wuerde die ueberschuessige Hoehe als Luecke ueber dem Knopf landen - vorher waren das 141 px. So bleibt der Knopf direkt unter dem Fliesstext. */ /* Zwei Klassen im Selektor, damit diese Breite die allgemeine Regel fuer ".buehne__innen" weiter unten in der Datei sicher uebersteuert. */ /* "min(21rem, 32%)": auf breiten Bildschirmen rund 420 px, auf schmalen Desktops anteilig weniger - sonst wuerde das Bild dort breiter als die Textspalte werden. */ .wer.buehne__innen { grid-template-columns: minmax(0, 1fr) min(21rem, 32%); } .wer { position: relative; row-gap: 0; align-items: start; } .wer__text { grid-column: 1; grid-row: 1; } .wer__knopf { grid-column: 1; grid-row: 2; } /* Das Bild steht bewusst ausserhalb des Zeilenflusses ("absolute"). Grund: Als normales Rasterfeld wuerde seine Hoehe die beiden Zeilen aufblaehen - und genau daraus entstand vorher die grosse Luecke ueber dem Knopf. So bleibt der Knopf direkt unter dem Text, egal wie gross das Bild ist. Die zweite Rasterspalte haelt den Platz dafuer frei. Natuerliches Seitenverhaeltnis statt 4:5 - so ist das ganze Bild zu sehen und nichts wird seitlich abgeschnitten. */ .wer__bild { grid-column: 2; grid-row: 1 / 3; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; } } /* 7. Leistungen und Listen ========================================================================== */ /* Ein Leistungsabschnitt mit Text links und Bild rechts. */ .leistung { display: grid; gap: var(--luft-gross); grid-template-columns: 1fr; align-items: center; padding-block: var(--luft-gross); border-top: 1px solid var(--linie); } .leistung:first-of-type { border-top: 0; padding-top: var(--luft); } /* Die Leistungs-Fotos fuellen die Breite ihrer Spalte aus (kein Rand ringsum) und behalten dabei ihre natuerliche Form (kein Zuschnitt). Hochformat-Bilder werden dadurch entsprechend hoch. */ .leistung__bild { width: 100%; height: auto; } /* Am Handy stehen Text und Bild untereinander. Der Abstand dazwischen kam bisher doppelt zustande: aus dem Rasterabstand (3rem) UND dem unteren Aussenabstand der Hakenliste (1,5rem) - zusammen rund 85 px. Hier wird beides zusammengefasst. Am Computer bleibt es unveraendert. */ @media (max-width: 46rem) { .leistung { gap: var(--luft); } .leistung .hakenliste, .leistung .hakenliste li:last-child { margin-bottom: 0; } } /* Gleiches Bild-Text-Problem im Abschnitt "Und wenn ich nicht arbeite": Am Handy kam der Abstand doppelt zustande - aus dem Rasterabstand und dem unteren Aussenabstand des letzten Absatzes. */ @media (max-width: 46rem) { .freizeit { gap: var(--luft); } .freizeit > div > p:last-child { margin-bottom: 0; } /* Derselbe doppelte Abstand im Werdegang-Abschnitt. */ .werdegang { gap: var(--luft); } .werdegang .zeitleiste { margin-bottom: 0; } } .leistung__titel { display: flex; align-items: center; gap: 0.75rem; } .leistung__titel .ikon { flex: none; width: 2.2rem; height: 2.2rem; color: var(--petrol); } /* Aufzaehlung mit Haken statt Punkten. */ .hakenliste { list-style: none; margin: 0 0 var(--luft); padding: 0; max-width: var(--breite-text); } .hakenliste li { position: relative; padding-left: 2.2rem; margin-bottom: 0.6rem; } .hakenliste li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 1.35rem; height: 0.7rem; border-left: 4px solid var(--petrol); border-bottom: 4px solid var(--petrol); transform: translateY(-50%) rotate(-45deg); border-radius: 2px; } /* Abgesetzter Hinweiskasten mit goldener Kante. */ .hinweis { max-width: var(--breite-text); padding: var(--luft); margin-bottom: var(--luft); background: var(--gold-blass); border-left: 6px solid var(--gold); border-radius: 0 var(--rundung-klein) var(--rundung-klein) 0; } .hinweis > :last-child { margin-bottom: 0; } .hinweis h3 { margin-top: 0; } /* Kasten mit ruhigerem, tuerkisem Anstrich. */ .hinweis--tuerkis { background: var(--petrol-blass); border-left-color: var(--petrol); } /* Werdegang auf der Seite "Ueber mich". */ .zeitleiste { list-style: none; margin: 0 0 var(--luft); padding: 0 0 0 var(--luft); max-width: var(--breite-text); border-left: 4px solid var(--tuerkis); } .zeitleiste li { position: relative; padding-bottom: var(--luft); } .zeitleiste li:last-child { padding-bottom: 0; } .zeitleiste li::before { content: ""; position: absolute; left: calc(-1 * var(--luft) - 12px); top: 0.6em; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); border: 4px solid var(--weiss); } .zeitleiste__jahr { display: block; font-weight: 700; color: var(--petrol-dunkel); } /* 8. Kontakt ========================================================================== */ /* Grosser Block, der zum Anrufen auffordert. Steht am Ende jeder Seite. */ .aufruf { padding: var(--luft-gross); background: var(--petrol-dunkel); border-radius: var(--rundung); color: #fff; text-align: center; } .aufruf h2 { color: #fff; } .aufruf p { max-width: 34rem; margin-inline: auto; color: #ffffff; } .aufruf .knopfreihe { justify-content: center; margin-bottom: 0; } /* Auf petrolfarbenem Grund kehren sich die Knopffarben um. */ .aufruf .knopf { background: var(--weiss); border-color: var(--weiss); color: var(--petrol-dunkel); } .aufruf .knopf:hover { background: var(--gold); border-color: var(--gold); color: var(--text); } .aufruf .knopf--whatsapp { background: transparent; border-color: var(--gold); color: #fff; } .aufruf .knopf--whatsapp:hover { background: var(--gold); border-color: var(--gold); color: var(--text); } /* Kontaktdaten als Liste mit Symbolen. */ .kontaktliste { list-style: none; margin: 0 0 var(--luft); padding: 0; } .kontaktliste li { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: var(--luft); } .kontaktliste .ikon { flex: none; width: 1.6rem; height: 1.6rem; margin-top: 0.25rem; color: var(--petrol); } .kontaktliste__begriff { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-leise); } .kontaktliste__wert { display: inline-block; padding-block: 0.2rem; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; } /* Ist der Wert ein Link (Telefon, WhatsApp, E-Mail), braucht er eine grosse Flaeche zum Antippen - das sind die wichtigsten Ziele der ganzen Seite. */ a.kontaktliste__wert { display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.5rem; } /* 9. Fussbereich ========================================================================== */ .fuss { margin-top: var(--luft-riesig); padding-block: var(--luft-gross) var(--luft); background: var(--petrol-dunkel); color: #eaf5f5; border-top: 4px solid var(--gold); } .fuss a { color: #fff; } .fuss a:hover { color: var(--gold-hell); } .fuss__raster { display: grid; gap: var(--luft-gross); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); padding-bottom: var(--luft-gross); } .fuss h2 { font-size: 1.1rem; margin-bottom: var(--luft-klein); color: #fff; } .fuss p { font-size: 0.9rem; margin-bottom: 0.5rem; } .fuss__liste { list-style: none; margin: 0; padding: 0; } .fuss__liste li { margin-bottom: 0.35rem; } .fuss__liste a { display: inline-block; min-height: 2.5rem; padding-block: 0.35rem; font-size: 0.95rem; } .fuss__schluss { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding-top: var(--luft); border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: 0.85rem; color: #cfe6e6; } /* 10. Rechtstexte (Impressum, Datenschutz) ========================================================================== */ .rechtstext { max-width: 44rem; } .rechtstext h2 { margin-top: var(--luft-gross); padding-top: var(--luft); border-top: 1px solid var(--linie); font-size: 1.35rem; } .rechtstext h2:first-of-type { margin-top: var(--luft); } .rechtstext h3 { margin-top: var(--luft); font-size: 1.1rem; } .rechtstext ul { max-width: var(--breite-text); padding-left: 1.3rem; } .rechtstext li { margin-bottom: 0.4rem; } /* Aufstellung Begriff / Wert, z. B. im Impressum. */ .datenliste { margin: 0 0 var(--luft); padding: 0; } .datenliste dt { font-weight: 700; color: var(--text-leise); font-size: 0.9rem; } .datenliste dd { margin: 0 0 var(--luft-klein); overflow-wrap: anywhere; } /* Hinterlegte Stelle, an der noch eine Angabe fehlt. Vor dem Livegang muessen alle diese Stellen verschwunden sein. */ .offen { background: var(--gold-blass); border-bottom: 2px dotted var(--gold-tief); padding: 0.1em 0.3em; border-radius: 3px; font-style: italic; } /* 11. Kleine Bildschirme und Sonderfaelle ========================================================================== */ /* Die drei Schritte "So einfach geht es" nebeneinander. */ @media (min-width: 48rem) { .schritte { grid-template-columns: repeat(3, 1fr); } } /* Ab hier ist genug Platz fuer zwei Spalten. */ @media (min-width: 56rem) { .buehne__innen, .leistung { grid-template-columns: 1.15fr 0.85fr; } /* Bei den gedrehten Reihen die Spaltenbreiten mittauschen, damit das Bild immer in der schmaleren Spalte steht (sonst landet es durch "order" in der breiten Textspalte und wird viel zu gross). */ .leistung--gedreht { grid-template-columns: 0.85fr 1.15fr; } .leistung--gedreht .leistung__bild { order: -1; } } /* Handy: Die angeheftete Leiste ist eine einzige flache Zeile - Telefonnummer links, Menue-Knopf rechts. Die Menuepunkte erscheinen erst auf Klick. So bleibt vom Bildschirm moeglichst viel fuer den Inhalt uebrig. */ @media (max-width: 46rem) { html { font-size: 118%; scroll-padding-top: 6rem; } .klebeleiste__innen { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem; padding-inline: 0.75rem; } /* Am Handy etwas kleiner, damit Logo, Schriftzug und Menue-Knopf zusammen in eine Zeile passen. */ .leiste-marke__logo { height: 1.6rem; } .leiste-marke__wort { height: 1rem; } .knopfreihe .knopf { width: 100%; } .bereich { padding-block: var(--luft-gross); } .aufruf { padding: var(--luft); } /* --- Mit JavaScript: Klappmenue -------------------------------------- Der Knopf erscheint nur dann, wenn er auch etwas bewirken kann. */ .js .menue-knopf { display: inline-flex; } .js .navi { display: none; } /* Aufgeklappt nimmt das Menue eine eigene Zeile unter der Leiste ein. */ .js.menue-offen .navi { display: block; flex-basis: 100%; } /* Die Punkte stehen untereinander und ueber die volle Breite: gross, gut lesbar und bequem zu treffen. */ .js.menue-offen .navi__liste { flex-direction: column; gap: 0.4rem; padding-block: 0.35rem 0.6rem; } .js.menue-offen .navi__punkt { width: 100%; min-height: 3rem; font-size: 1.05rem; } /* --- Ohne JavaScript: alles bleibt sichtbar -------------------------- Dann gibt es keinen Knopf zum Klappen, also stehen die Punkte wie frueher in einer zweiten Zeile unter dem Schriftzug. */ html:not(.js) .klebeleiste__innen { flex-direction: column; align-items: center; } html:not(.js) .navi__liste { justify-content: space-between; gap: 0.3rem; } html:not(.js) .navi__punkt { padding: 0.3rem 0.25rem; font-size: 0.9rem; } } /* Sehr schmale Geraete: die Leiste noch etwas knapper fassen, damit Telefonnummer und Menue-Knopf sicher nebeneinander passen. */ @media (max-width: 26rem) { .klebeleiste__innen { padding-block: 0.3rem; padding-inline: 0.6rem; } .menue-knopf { width: 2.75rem; height: 2.75rem; } /* Ohne JavaScript stehen hier alle vier Punkte in einer Zeile - die brauchen dann eine knappere Schrift, damit nichts umbricht. */ html:not(.js) .navi__punkt { padding: 0.3rem 0.15rem; font-size: 0.82rem; } } /* ========================================================================== Einheitliche Schriftgroessen am Handy Alle Seiten uebernehmen den kompakten Massstab der Startseite: Ueberschrift 28 px, Fliesstext rund 15 px. Dieser Block steht bewusst ganz am Ende der Handy-Regeln, damit er die Einzelwerte der Bausteine weiter oben zuverlaessig ueberschreibt. Nicht verkleinert werden bewusst: die Telefonnummer in der Leiste, die Menuepunkte, die Beschriftung der Knoepfe und die Kontaktdaten - das sind Bedienelemente, keine Lesetexte. ========================================================================== */ @media (max-width: 46rem) { h1 { font-size: 1.5rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } .rechtstext h2 { font-size: 1.1rem; } .rechtstext h3 { font-size: 0.95rem; } .fuss h2 { font-size: 0.95rem; } /* Fliesstext, Aufzaehlungen und Aufstellungen */ p, li, dd, .buehne__text > p, .schritte p, .kachel__text, .kachel__mehr, .merkmale, .fuss p, .datenliste dt, .kontaktliste__begriff { font-size: 0.78rem; } .fuss__liste a { font-size: 0.8rem; } .fuss__schluss { font-size: 0.75rem; } } /* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt keine. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .kachel:hover { transform: none; } } /* Ausdruck auf Papier: nur der Inhalt, Adressen von Links ausgeschrieben. */ @media print { .klebeleiste, .sprunglink, .aufruf { display: none; } body { background: #fff; color: #000; font-size: 11pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; } .fuss { background: none; color: #000; border-top: 1px solid #000; } }