/* ========================================================================== postdigital.io - statisch, ohne Framework, ohne externe Requests Diese Datei gilt fuer alle Seiten. Die Projektseiten unter /projekt/ laden zusaetzlich dpage.css (Nachbau des Divi-Rasters) und je eine eigene Datei mit ihren Besonderheiten. Reihenfolge: Tokens - Grundlagen - Layout - Header - Sektionen - Hero - Buttons - Prosa - Projektraster - Kontakt - Footer - Einblenden beim Scrollen ========================================================================== */ /* ---------- Tokens ---------- */ :root { /* Farben */ --navy: #233b4e; --navy-dark: #1a2c3a; --accent: #edb059; --accent-dk: #d9973c; /* nur als Flächenfarbe, z. B. Button-Hover */ --link: #ae7a31; /* Linktext: aus dem Akzent abgeleitet, AA-tauglich */ --ink: #22313f; /* Überschriften */ --body: #191a1a; /* Fließtext auf Weiß */ --body-soft: #3a4854; /* Fließtext auf farbigem Verlauf */ --muted: #f5f8fa; --line: #e4ebf1; --on-dark: #eaf3f8; /* Fließtext auf dunklem Grund */ /* Maße */ --wrap: 1180px; /* Seitenbreite */ --measure: 100%; /* Textspaltenbreite: fuellt das Seitenraster */ --radius: 10px; /* Weiches Ausklingen: geht zuegig los und laeuft lange sanft aus. Wird von Schaltflaechen und Karten gemeinsam benutzt. */ --weich: cubic-bezier(.2, .7, .3, 1); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --shadow: 0 2px 8px rgba(35, 59, 78, .06), 0 8px 28px rgba(35, 59, 78, .08); --shadow-lift: 0 8px 18px rgba(35, 59, 78, .1), 0 22px 46px rgba(35, 59, 78, .14); /* Einstieg: Ueberschrift, Strich, Vorspann. Dieselbe Staffelung auf allen neun Seiten - die Projektseiten aendern nur die Farbe des Strichs, nicht seine Lage oder Groesse. Die Werte sind die der Excellenz-Seite; sie wird hier als Vorbild gemessen. Beide Seitenfamilien bauen den Einstieg anders auf (.rule als eigene Flaeche, .et_pb_divider als Divi-Modul mit Linie am oberen Rand), die sichtbare Staffelung kommt aber aus diesen vier Werten. */ /* Abstand von der Oberkante des Einstiegs bis zur Ueberschrift. Gilt fuer alle neun Seiten, damit die h1 ueberall auf derselben Linie beginnt - die allgemeinen Seiten setzen ihn als Innenabstand, die Projektseiten an ihrer ersten Sektion. Der Wert liegt dort, wo Excellenz ihn vorher hatte (rund 209 px bei 900 px Fensterhoehe). */ --hero-oben: clamp(3.5rem, 23vh, 13rem); --hero-strich-oben: 20px; --hero-strich-breite: 40px; --hero-strich-dicke: 4px; --hero-strich-unten: 29px; } /* ---------- Grundlagen ---------- */ *, *::before, *::after { box-sizing: border-box } /* Der Hintergrund des Wurzelelements faerbt die Zeichenflaeche - also das, was beim Ueberscrollen hinter der Seite auftaucht. Ohne eigenen Wert erbt sie ihn von , und das war Weiss: am Seitenende blitzte deshalb eine weisse Flaeche unter dem Footer auf. Mit dem Footer-Blau geht der Rand nahtlos in ihn ueber. behaelt sein Weiss, es deckt nur noch seinen eigenen Kasten ab. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--navy-dark); /* Zusaetzlich das Nachfedern am Seitenende abschalten. Die Farbe oben deckt den Fall schon ab, aber nur, wenn wirklich die Zeichenflaeche zu sehen ist; hiermit entsteht der ueberschossene Bereich erst gar nicht. Preis: auf Android entfaellt "zum Neuladen ziehen". */ overscroll-behavior-y: none } @media (prefers-reduced-motion:reduce) { html { scroll-behavior: auto } * { animation-duration: .01ms !important; transition-duration: .01ms !important } } body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.72; color: var(--body); background: #fff; -webkit-font-smoothing: antialiased } img { max-width: 100%; height: auto; display: block } h1, h2, h3, h4 { color: var(--ink); line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.015em; text-wrap: balance } h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem) } h2 { font-size: clamp(1.45rem, 2.8vw, 2.05rem) } h3 { font-size: 1.25rem } h4 { font-size: 1.08rem } p { margin: 0 0 1.1em } p:last-child { margin-bottom: 0 } ul, ol { margin: 0 0 1.1em; padding-left: 1.25em } li { margin: .35em 0 } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0 } address { font-style: normal; line-height: 1.65 } /* Links tragen ihre Unterstreichung erst beim Zeigen; auf den Projektseiten sind sie durchgehend unterstrichen und werden beim Zeigen kraeftiger. Beides funktioniert auf hellem wie dunklem Grund, weil nur die Staerke der Linie wechselt und nicht die Farbe. */ a { color: var(--link); text-decoration: none; text-underline-offset: 2px; transition: text-decoration-thickness .12s ease, color .12s ease } a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 3px } /* ---------- Layout ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem) } /* Sprungziele nicht unter die klebende Kopfzeile schieben */ main [id], main section[id] { scroll-margin-top: 88px } .skip { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: .7rem 1.1rem; z-index: 200; border-radius: 0 0 var(--radius) 0 } .skip:focus { left: 0 } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--line) } .site-header .wrap { display: flex; align-items: center; gap: 1rem; min-height: 70px } .brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 200; letter-spacing: .02em; font-size: 1.05rem; margin-right: auto } .brand:hover { text-decoration: none; color: var(--link) } .brand img { height: 26px; width: auto } .nav ul { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0 } .nav a { display: block; padding: .5rem .8rem; border-radius: 6px; color: var(--ink); font-size: .95rem; font-weight: 600; transition: color .15s, background .15s } .nav a:hover { background: var(--muted); color: var(--link); text-decoration: none } .nav a[aria-current] { color: var(--link) } .has-sub { position: relative } .has-sub>a::after { content: ""; display: inline-block; margin-left: .4em; width: .4em; height: .4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6 } /* Kein Spalt zwischen Menuepunkt und Klappmenue: sonst verlaesst der Zeiger auf dem Weg nach unten kurz .has-sub und das Menue schliesst sofort. Der optische Abstand steckt jetzt im Innenabstand. */ .sub { position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem .4rem .4rem; display: none; opacity: 0; transform: translateY(-6px); transition: opacity .16s, transform .16s } /* display:none statt nur unsichtbar - ein ausgeblendetes Untermenue belegt sonst Platz und erzeugt bei rund 1000 px Breite eine waagerechte Bildlaufleiste. */ .has-sub:hover .sub, .has-sub:focus-within .sub { display: block; opacity: 1; transform: none } @starting-style { .has-sub:hover .sub, .has-sub:focus-within .sub { opacity: 0; transform: translateY(-6px) } } .sub ul { display: block } .sub a { font-weight: 500; white-space: nowrap } /* Mobilmenü: reines CSS, die Checkbox trägt den Zustand */ #navtoggle { position: absolute; opacity: 0; pointer-events: none } .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; cursor: pointer; border-radius: 8px } .burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s } @media (max-width:900px) { .burger { display: flex } .nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: 0; overflow: hidden; transition: max-height .25s ease } #navtoggle:checked~.nav { max-height: 80vh; overflow-y: auto } #navtoggle:checked~.burger span:nth-child(1) { transform: translateY(7px) rotate(45deg) } #navtoggle:checked~.burger span:nth-child(2) { opacity: 0 } #navtoggle:checked~.burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) } .nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .6rem clamp(1rem, 4vw, 2rem) 1.2rem } .nav a { padding: .7rem .2rem; border-radius: 0 } .has-sub>a::after { display: none } .sub { position: static; display: block; opacity: 1; transform: none; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; padding: 0 0 0 .9rem; margin: 0 0 .4rem } } /* ---------- Sektionen ---------- --muted : grau abgesetzt --grad : dunkler Farbverlauf, heller Text */ .section { padding: clamp(3rem, 7vw, 5.5rem) 0 } .section--muted { background: var(--muted) } .section--grad { color: var(--on-dark); background-color: var(--navy); background-image: linear-gradient(105deg, #1a2c3a 0%, #2f5273 100%); background-size: cover; background-position: center } .section--grad :is(h1, h2, h3, h4) { color: #fff } .section--grad a:not(.btn) { color: #fff; text-decoration: underline } /* ---------- Hero ---------- */ /* Der Einstieg fuellt den Bildschirm unterhalb der Kopfzeile und zentriert seinen Inhalt darin - wie auf den Projektseiten. svh haelt die Hoehe stabil, wenn mobile Browser ihre Leisten ein- und ausblenden. */ /* Der Einstieg haengt oben fest statt mittig zu stehen. Zentriert richtete sich der ganze Block aus, nicht die Ueberschrift: je laenger Vorspann und Schaltflaechen, desto hoeher rutschte die h1. Zwischen Startseite und "Ueber die Kooperation" waren das 16 px, zum Impressum 127 px. Mit dem festen oberen Abstand beginnt die Ueberschrift auf jeder Seite an derselben Stelle, und was darunter folgt, darf verschieden lang sein. */ .hero { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: calc(100vh - 71px); min-height: calc(100svh - 71px); background: var(--navy); color: #e8eef3; overflow: hidden; padding: var(--hero-oben) 0 clamp(3.5rem, 8vw, 6rem) } .hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.9; z-index: 0 } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(26, 44, 58, .92) 0%, rgba(26, 44, 58, .62) 55%, rgba(26, 44, 58, .42) 100%) } .hero .wrap { position: relative; z-index: 2 } .hero__inner { max-width: 100% } .hero h1 { color: #fff; margin-bottom: var(--hero-strich-oben) } .hero__lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #dbe5ec } .hero__lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px } .hero .btn-row { margin-top: 2rem } /* Impressum und Datenschutz sind Auskunftsseiten: wer sie oeffnet, hat eine Frage und will die Antwort sehen. Ueber die volle Hoehe gestreckt trug der Einstieg dort 143 px Inhalt in einem 829 px hohen Feld - fuenf Sechstel leeres Navy, und die erste Ueberschrift stand erst nach gut einem Bildschirm. Ohne Mindesthoehe endet das Feld hinter seinem Inhalt. Der obere Abstand bleibt, damit die Ueberschrift auf derselben Linie sitzt wie auf allen anderen Seiten. */ .hero--kurz { min-height: 0 } @media (max-width:900px) { /* auf dem Telefon nicht die volle Hoehe - sonst steht der Einstieg allein auf einem Bildschirm und der Rest wirkt abgeschnitten */ :root { --hero-oben: clamp(2.5rem, 9vh, 5rem) } .hero { min-height: 72svh; padding: var(--hero-oben) 0 clamp(3rem, 12vw, 4.5rem) } /* Muss hinter .hero stehen: beide Regeln wiegen gleich schwer, und bei Gleichstand gewinnt die spaetere. Vorher stand .hero--kurz vor diesem Block und wurde von "min-height: 72svh" wieder eingefangen - auf dem Telefon war der kurze Einstieg also gar nicht kurz, sondern trug 147 px Inhalt in einem 608 px hohen Feld. Auf dem kleinen Bildschirm faellt der Vorlauf zusaetzlich flacher aus als auf dem grossen: die Ueberschrift ist hier ohnehin gleich sichtbar, ein langer Anlauf kostet nur Platz. */ .hero--kurz { min-height: 0; padding-top: clamp(2rem, 5vh, 3rem); padding-bottom: clamp(1.75rem, 4.5vh, 2.75rem) } } /* Vorzeile über der Hauptüberschrift */ .hero__sub { font-size: 1.02rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; color: var(--accent); margin: 0 0 1rem } .rule { width: var(--hero-strich-breite); height: var(--hero-strich-dicke); background: var(--accent); border-radius: 2px; margin: 0 0 var(--hero-strich-unten) } /* ---------- Buttons ---------- Eine einzige Form fuer jede Schaltflaeche der Seite - auch fuer die der Projektseiten (.et_pb_button). Groesse, Radius, Schriftschnitt und der Hover sind ueberall gleich; von der Seite kommen nur noch die Farben. Hover und Druck sind bewusst farbunabhaengig und gehen in dieselbe Richtung: beim Zeigen sinkt die Flaeche einen Hauch ein und wird leicht durchscheinend, beim Druecken sinkt sie ganz. Der Schatten faellt dabei in zwei Stufen zusammen, und die Laufweite der Beschriftung waechst ein wenig mit - das ist die eigentliche Tiefenwirkung. Die Deckkraft geht auf 90 % und nicht weiter: nachgerechnet ueber alle Schaltflaechen der Seite liegt die schwaechste Beschriftung dann bei 5,1:1, bei 80 % waeren es 3,4:1 und damit unter dem Schwellenwert. */ .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem } .btn, .dpage .et_pb_button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.7rem; border: 0; border-radius: 999px; font-family: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; letter-spacing: 0; transition: transform .24s var(--weich), box-shadow .24s var(--weich), opacity .24s var(--weich), letter-spacing .24s var(--weich) } .btn:hover, .btn:focus-visible, .dpage .et_pb_button:hover, .dpage .et_pb_button:focus-visible { text-decoration: none; transform: translateY(1px); opacity: .9; letter-spacing: .04em; box-shadow: 0 5px 12px -8px rgba(10, 45, 97, .55) } /* Gedrueckt: ganz unten, Schatten fast weg. Steht hinter :hover, weil beim Klicken mit der Maus beide Zustaende gleichzeitig gelten. */ .btn:active, .dpage .et_pb_button:active { transform: translateY(3px); opacity: .9; letter-spacing: .06em; box-shadow: 0 1px 3px -1px rgba(10, 45, 97, .45); transition-duration: .07s } /* Farben der Grundseiten */ .btn { background: var(--accent); color: #2b2113; box-shadow: 0 8px 22px -12px rgba(10, 45, 97, .5) } .btn--ghost { background: transparent; color: var(--link); box-shadow: inset 0 0 0 2px currentColor } .btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: inset 0 0 0 2px currentColor, 0 5px 12px -8px rgba(10, 45, 97, .55) } .btn--ghost:active { box-shadow: inset 0 0 0 2px currentColor, 0 1px 3px -1px rgba(10, 45, 97, .45) } .hero .btn--ghost { color: #fff } /* ---------- Prosa ---------- */ .prose { max-width: var(--measure) } .prose h2 { margin-top: 2.4rem } .prose h2:first-child { margin-top: 0 } .prose h3, .prose h4 { margin-top: 1.8rem } /* ---------- Projektraster ---------- */ .grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2.5rem } /* Die Karten stehen auf dem dunklen Landschaftsbild. Der Rahmen entfaellt deshalb - auf dunklem Grund zeichnet die Kartenkante sich von selbst ab, eine Linie darauf wirkte nur schmutzig. Statt seiner traegt ein tieferer Schatten die Karte; --shadow ist fuer helle Sektionen gerechnet und verschwindet hier. Jede Karte fuehrt die Akzentfarbe ihrer Projektseite: als Streifen an der Oberkante und als Faerbung des Schattens beim Zeigen. Damit sind die vier erkennbar eine Familie und trotzdem einzeln unterscheidbar, und die Karte kuendigt die Farbwelt an, in die sie fuehrt. Dieselbe Geste benutzen die Projektseiten fuer ihre eigenen Karten. */ .tile { --karte: var(--accent); display: flex; flex-direction: column; border-radius: 14px; border-top: 4px solid var(--karte); overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(16, 32, 45, .14), 0 14px 30px -14px rgba(10, 22, 32, .55); transition: transform .3s var(--weich), box-shadow .3s var(--weich) } .tile--excellenz { --karte: #09e1c0 } .tile--selbste { --karte: #11af6d } .tile--lehramt { --karte: #1ca5ff } .tile--roboter { --karte: #24cad3 } .tile:hover, .tile:focus-visible { text-decoration: none; transform: translateY(-6px); box-shadow: 0 2px 6px rgba(16, 32, 45, .16), 0 26px 46px -16px color-mix(in srgb, var(--karte) 45%, rgba(10, 22, 32, .65)) } /* Die vier Vorschaubilder sind sehr verschieden - Isometrie, Strichzeichnung, Illustration, Zeichnung. Gleicher Ausschnitt und gleiche Bewegung fassen sie zusammen; das Bild waechst beim Zeigen in die Kartenkante hinein (overflow der Karte beschneidet es). */ .tile img { flex: 0 0 auto; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--muted); transition: transform .55s var(--weich) } .tile:hover img, .tile:focus-visible img { transform: scale(1.045) } .tile__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.15rem 1.1rem; border-top: 1px solid var(--line) } .tile__label { font-weight: 600; font-size: 1.05rem; line-height: 1.3; color: var(--ink); text-wrap: balance } .tile__text { font-size: .875rem; line-height: 1.5; color: var(--body-soft) } /* Die Zeile sitzt unten, egal wie lang Titel und Text darueber ausfallen - "margin-top:auto" schiebt sie an den Fuss. Vorher endete jede Karte auf einer anderen Hoehe und der Rest war leerer Weissraum; jetzt schliessen alle vier gleich ab und der Pfeil sagt, dass es weitergeht. */ .tile__more { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--link) } .tile__more::after { content: "\2192"; display: inline-block; transition: transform .25s var(--weich) } .tile:hover .tile__more::after, .tile:focus-visible .tile__more::after { transform: translateX(4px) } /* ---------- Kontaktkarten (Impressum) ---------- */ .contact-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 1.5rem 0 0 } .contact { background: var(--muted); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--line) } .contact :is(h2, h3) { margin-bottom: .4rem; font-size: 1.1rem } .contact address { font-style: normal; font-size: .97rem; line-height: 1.65 } .contact__meta { margin-top: .8rem; font-size: .95rem } /* ---------- Footer ---------- */ /* Zieht eine Projektseite ihre letzte Sektion ueber den Footer (negatives margin-bottom, damit der Wellentrenner in den Footer laeuft), lag bisher das Weiss der Sektion obenauf: Sektionen sind positioniert und mit background-color:#fff versehen, der Footer war es nicht - also gewann die Sektion. Am unteren Rand blieb davon ein heller Streifen stehen, den der Trenner nicht ganz deckt, weil seine Kante weichgezeichnet und eine seiner beiden Wellen nur halb deckend ist. Der Footer reiht sich deshalb selbst in die positionierte Ebene ein. Die Reihenfolge ist damit: Sektionsgrund (0), Footer (1), Trenner (10) - das Weiss verschwindet hinter dem Footer, und die halbdeckende Welle mischt sich mit dem Footer-Blau statt mit Weiss. */ .site-footer { position: relative; z-index: 1; background: var(--navy-dark); color: #93a7b6; padding: 3rem 0 2.2rem; /* Auf dem iPhone liegt unter der Fusszeile noch der sichere Bereich des Home-Indikators. Ohne diesen Zuschlag endet das Dunkel davor. */ padding-bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px)) } .site-footer a { color: #c6d4de } .site-footer a:hover { color: var(--accent) } .footer-top { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; padding-bottom: 1.8rem; border-bottom: 1px solid rgba(255, 255, 255, .1) } .footer-brand { font-weight: 700; color: #fff; font-size: 1.05rem; letter-spacing: .02em } .footer-brand p { font-size: .92rem; color: #8fa3b3; font-weight: 400; margin: .5rem 0 0 } .site-footer nav ul { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0; padding: 0; font-size: .94rem } .footer-bottom { margin-top: 1.6rem; font-size: .87rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between } /* ---------- Karten beim Scrollen einblenden (wie die Divi-Animation "fade") ---------- Versteckt wird nur, solange .js-reveal am haengt. Diese Klasse setzt das Skript selbst - laeuft es nicht (oder nicht rechtzeitig), bleibt der Inhalt schlicht sichtbar. Unsichtbarer Text ohne Skript kann so nicht entstehen. Siehe /assets/js/reveal.js. */ .js-reveal .pd-reveal { opacity: 0 } .js-reveal .pd-reveal.pd-reveal-in { animation: pd-fade-in var(--pd-reveal-dur, 1000ms) var(--pd-reveal-ease, ease-in-out) var(--pd-reveal-delay, 0ms) both } @keyframes pd-fade-in { from { opacity: 0 } to { opacity: 1 } } @media (prefers-reduced-motion:reduce) { .js-reveal .pd-reveal { opacity: 1 } .js-reveal .pd-reveal.pd-reveal-in { animation: none } }