/* ========================================================= scherschneva.at — Design-System „Nachtblau Edition" Teil A. Kein Gold, kein Light-Luxe (das bleibt dem LSB Summit vorbehalten). ========================================================= */ /* ---------- Schriften: lokal gehostet ---------- Cormorant Garamond und DM Sans liegen unter assets/fonts/ auf dem eigenen Server. Es besteht keine Verbindung zu Google, so wie es die Datenschutzerklärung beschreibt. Beide Schriften stehen unter der SIL Open Font License 1.1, die Lizenztexte liegen im Projektordner unter assets/fonts/ je Schriftfamilie als OFL.txt. Enthalten sind nur die tatsächlich verwendeten Schnitte, auf Latin und Latin Extended beschnitten. Wer weitere Schnitte oder Zeichen braucht (etwa Kyrillisch), muss die Dateien neu erzeugen. ------------------------------------------------ */ @font-face{ font-family:'Cormorant Garamond'; src:url('assets/fonts/cormorant-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Cormorant Garamond'; src:url('assets/fonts/cormorant-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Cormorant Garamond'; src:url('assets/fonts/cormorant-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Cormorant Garamond'; src:url('assets/fonts/cormorant-500-italic.woff2') format('woff2'); font-weight:500; font-style:italic; font-display:swap; } @font-face{ font-family:'DM Sans'; src:url('assets/fonts/dmsans-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'DM Sans'; src:url('assets/fonts/dmsans-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'DM Sans'; src:url('assets/fonts/dmsans-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } :root{ --bg:#1A2330; --fg:#F8F3EC; --dim:#BCC4D0; --rose:#E92C57; --rose-hover:#FF3D68; --copper:#C08457; --copper-lt:#E2B58C; --teal:#5E9E93; --hair:rgba(255,255,255,.17); --glass:rgba(255,255,255,.13); --glass-brd:rgba(226,181,140,.55); --font-display:'Cormorant Garamond',Georgia,serif; --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --wrap:1180px; --gut:clamp(20px,5vw,48px); --nav-h:140px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);} body{ margin:0; padding-top:var(--nav-h); /* Lichtbogen: warmes Kupferlicht von rechts oben, Teal-Schimmer links, Kupfer von unten. Auf den Bildschirm fixiert, damit der Verlauf auf kurzen und langen Seiten gleich aussieht. */ background: radial-gradient(115% 80% at 74% -6%, rgba(240,205,175,.55) 0%, rgba(233,110,140,.26) 30%, rgba(26,35,48,0) 66%), radial-gradient(80% 55% at -6% 46%, rgba(120,190,180,.26) 0%, rgba(26,35,48,0) 60%), radial-gradient(95% 55% at 55% 106%, rgba(226,181,140,.30) 0%, rgba(26,35,48,0) 60%), linear-gradient(180deg,#222D3C 0%,var(--bg) 60%,#161E29 100%); background-attachment:fixed; color:var(--fg); font-family:var(--font-body); font-size:17px; line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block;} a{color:inherit;text-decoration:none;} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);} .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--rose);color:#fff;padding:.7rem 1.1rem;border-radius:7px; } .skip:focus{left:1rem;top:1rem;} .sr-headline{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } /* ---------- Typografie ---------- */ h1,h2,h3{font-family:var(--font-display);font-weight:500;text-align:left;margin:0;line-height:1.14;} h1{font-size:clamp(2.3rem,5.2vw,3.1rem);letter-spacing:.005em;} h1 em{font-style:italic;color:var(--fg);} h2{font-size:clamp(1.7rem,3.6vw,2.15rem);} h3{font-size:1.5rem;} p{margin:0 0 1.05rem;} .label{ font-family:var(--font-body); font-size:.72rem;font-weight:500; text-transform:uppercase;letter-spacing:.24em; color:var(--dim); margin:0 0 1.1rem; } .label--copper{color:var(--copper-lt);} .label--teal{color:var(--teal);} /* Ein Label mitten in der Sektion trennt zwei Teile voneinander, statt als Kicker über einer Überschrift zu stehen. Es braucht unten deutlich mehr Luft, sonst klebt es an dem, was folgt, und der Übergang wirkt gedrängt. */ .label--zwischen{margin-bottom:2.1rem;} .lede{font-size:1.12rem;color:var(--fg);max-width:36em;} .dim,.hero__meta{color:var(--dim);} /* ---------- Buttons ---------- */ .btn{ display:inline-block; font-family:var(--font-body);font-size:.78rem;font-weight:600; text-transform:uppercase;letter-spacing:.14em; padding:.92rem 1.6rem;border-radius:7px; transition:background .25s ease,box-shadow .25s ease,transform .25s ease,border-color .25s ease; } .btn--primary{ background:var(--rose);color:#fff; box-shadow:0 0 26px rgba(233,44,87,.28); } .btn--primary:hover{background:var(--rose-hover);box-shadow:0 0 34px rgba(255,61,104,.42);} .btn--sm{padding:.62rem 1.15rem;font-size:.7rem;} .btn--ghost{ background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--glass-brd); color:var(--fg); } .btn--ghost:hover{border-color:var(--copper-lt);} /* ---------- Navigation: durchgehende Leiste, oben fixiert ---------- */ .nav-bar{ position:fixed;top:0;left:0;right:0;z-index:40; height:var(--nav-h); border-bottom:1px solid transparent; transition:background .3s ease,border-color .3s ease; } .nav-bar.is-scrolled{ background:rgba(26,35,48,.80); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border-bottom-color:var(--hair); } .nav{ height:100%; display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem); } .logo{display:block;flex:0 0 auto;margin-right:auto;} .logo img{height:108px;width:auto;} .nav-links{ display:flex;gap:1.7rem;list-style:none;margin:0;padding:0; } .nav-links a{ display:block; color:var(--dim); font-size:.7rem;font-weight:500; text-transform:uppercase;letter-spacing:.15em; white-space:nowrap; transition:color .2s ease; } .nav-links a:hover{color:var(--fg);} .nav-links a.is-current{color:var(--fg);} .nav-cta{flex:0 0 auto;} /* Menü-Umschalter, nur unterhalb des Umbruchs sichtbar */ .nav-toggle{ display:none; flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 10px; background:none;border:0;cursor:pointer; } .nav-toggle span{display:block;height:1.5px;background:var(--fg);border-radius:2px;} /* ---------- Sections ---------- */ section{position:relative;padding:clamp(4.5rem,10vw,7.5rem) 0;} section + section{border-top:1px solid rgba(226,181,140,.24);} /* ---------- Section-Köpfe ---------- */ .sec-head{max-width:44em;margin-bottom:clamp(2.5rem,5vw,3.5rem);} /* Wenn direkt unter der Überschrift ein eigener Textblock folgt und keine Karten. */ .sec-head--eng{margin-bottom:1.4rem;} .sec-lede{color:var(--dim);margin-top:1.2rem;max-width:44em;} /* Schlusszeile einer Rubrikseite, ohne eigene Überschrift. Eine H2 über einem einzigen Satz wäre eine Gliederungsebene ohne Inhalt. */ .hw-schluss .sec-lede{margin-top:0;} /* ---------- Rubrikseite mit Kachelliste ---------- Die Sektionsabstände der Startseite sind für lange Textstrecken gemacht. Auf einer Übersicht stehen kurze Blöcke darin und wirken verloren, deshalb rücken sie hier zusammen. Der Einstiegstext gehört zum Kopf und bekommt nach oben besonders wenig Luft. */ body.rubrik .page-hero{padding-bottom:clamp(1rem,2vw,1.5rem);} body.rubrik section{padding:clamp(2.6rem,5vw,3.8rem) 0;} body.rubrik .page-hero + section{padding-top:0;border-top:0;} body.rubrik .sec-head{margin-bottom:clamp(1.8rem,3.5vw,2.4rem);} body.rubrik .ansatz{margin-bottom:0;} /* Weil der Einstiegstext dicht an der Titelzone steht, laufen Untertitel und Absätze sonst als ein Stück durch. Die kupferne Kante links setzt ihn ab, derselbe Marker wie in der Qualifikationsliste und der Terminliste. Eine Fläche wäre hier zu schwer, der Block eröffnet die Seite und trägt sie nicht. */ .ansatz--einstieg{ border-left:2px solid var(--copper); padding-left:clamp(1.2rem,2.4vw,1.8rem); margin-top:clamp(1.6rem,3vw,2.2rem); } /* Fließtext im Abschnitt „Mein Ansatz" */ .ansatz{max-width:44em;color:var(--dim);margin-bottom:clamp(2.5rem,5vw,3.5rem);} /* Der allgemeine Absatzabstand von 1,05 rem ist bei Zeilenhöhe 1,75 kleiner als eine Leerzeile. In kurzen Absätzen faellt das nicht auf, in einem laengeren Textblock stehen die Absaetze dadurch gedraengt. */ .ansatz p{margin-bottom:1.5rem;} .ansatz p:last-child{margin-bottom:0;} /* Der Abstand darunter trennt den Textblock von dem, was in derselben Sektion folgt. Steht er als Letztes, kommt der Sektionsabstand ohnehin und die zwei Abstaende summieren sich zu einem Loch. */ .ansatz:last-child{margin-bottom:0;} /* Textblock, der nach einem abgesetzten Element wieder einsetzt. */ .nachsatz{margin-top:clamp(2.2rem,4vw,3rem);} /* ---------- Seitenkopf der Unterseiten ---------- */ .page-hero{padding-top:clamp(3rem,7vw,5rem);} /* Die Breitenbegrenzung sitzt am Inhalt und nicht am Container. Stünde sie am Container, würde das `margin-inline:auto` aus .wrap die schmalere Spalte mittig stellen, und die Titelzone stünde rund 200px weiter rechts als der Fließtext darunter, der im vollen Raster linksbündig sitzt. */ .page-hero__inner > *{max-width:46em;} .page-hero h1{margin-bottom:1.5rem;} .page-hero .lede{color:var(--dim);} .page-hero--lehre{border-top:2px solid var(--copper);} /* Auf schmalen Bildschirmen steht die rechte Spalte wieder unter der Titelzone. Der eigene Sektionsabstand oben bleibt dort erwuenscht, der untere nicht: darunter kommt schon der Abstand der Hero-Sektion. */ .kontakt-kopf__wege{padding-bottom:0;} /* Kontaktseite: Titelzone links, Kontaktdaten rechts. Diese Seite hat als einzige Unterseite kein Hero-Foto. Untereinander stand dadurch zwischen der kurzen Titelzone und den Kontaktdaten ein leeres Feld von rund 240 px, zwei Sektionsabstaende auf einmal. Am 1. September 2026 von Elena beanstandet und auf ihren Vorschlag hin nebeneinander gestellt. Erst ab 60rem, darunter bleibt es untereinander: In zwei Spalten waere die Definitionsliste mit den Kontaktdaten auf einem Telefon unlesbar schmal. */ @media (min-width:60rem){ .kontakt-kopf{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2.5rem,5vw,4.5rem); align-items:start; } /* Die 46em aus .page-hero__inner > * gaelten hier je Spalte und zoegen das Raster auf. Die Begrenzung wandert deshalb eine Ebene tiefer. */ .kontakt-kopf > *{max-width:none;} .kontakt-kopf__text > *{max-width:34em;} /* Die Ueberschrift der rechten Spalte steht auf der Hoehe der H1 und nicht auf der der Brotkrume darueber. Das Polster unten muss ausdruecklich weg: Die rechte Spalte ist selbst ein
und traegt sonst die 120 px Sektionsabstand mit, die hier gerade nicht gewollt sind. */ .kontakt-kopf__wege{padding-top:2.6rem;padding-bottom:0;} .kontakt-kopf__wege .ansatz{margin-bottom:clamp(1.6rem,3vw,2.2rem);} } .page-hero--begleitung{border-top:2px solid var(--teal);} .breadcrumb{font-size:.8rem;color:var(--dim);margin-bottom:1.5rem;} .breadcrumb a{color:var(--dim);border-bottom:1px solid var(--hair);} .breadcrumb a:hover{color:var(--fg);} /* ---------- Hero ---------- */ .hero{padding-top:clamp(2.5rem,6vw,4.5rem);} .hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,6vw,5rem);align-items:center;} .hero__text h1{margin-bottom:1.7rem;} .hero__meta{max-width:34em;margin-top:1.6rem;font-size:.98rem;} /* Knopf und sekundärer Textlink nebeneinander. */ .hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.9rem;margin:2.2rem 0 0;} .hero__cta a:not(.btn){ color:var(--fg);border-bottom:1px solid var(--hair); transition:color .2s ease,border-color .2s ease; } .hero__cta a:not(.btn):hover{color:var(--copper-lt);border-color:var(--copper-lt);} /* Eine Rubrikseite mit Foto verwendet den zweispaltigen Hero der Startseite und braucht darauf die Signaturkante ihrer Rubrik, die sonst an .page-hero haengt. */ .hero--lehre{border-top:2px solid var(--copper);} .hero--begleitung{border-top:2px solid var(--teal);} .hero__figure{margin:0;} .hero__figure img{ border-radius:10px; border:1px solid var(--hair); filter:saturate(.92) contrast(1.02); } /* Ein wirklich freigestelltes Foto steht ohne Rahmen und ohne Rundung direkt auf dem Lichtbogen. Rahmen und Rundung zögen sonst ein Rechteck um die durchsichtige Fläche. */ .hero__figure--frei img{border:0;border-radius:0;filter:none;} /* ---------- Glasbox um ein freigestelltes Porträt ---------- Seit 12. August 2026 im Hero und in der Über-mich-Sektion der Startseite. Davor stand dort ein Foto mit eigenem Hintergrund, und der ging nicht auf: Der Lichtbogen der Seite ist auf Hero-Höhe mauve, der Grund des Fotos war stahlblau, dazu brachte das Bild sein eigenes warmes Licht mit. Gemessen 91 Grad Farbtonabstand an der oberen Kante. Ein Bild, das den Grund der Seite fast trifft, liest sich als Fehler; ein freigestelltes hat gar keinen Grund, der danebenliegen kann. Den Hintergrund exakt nachzubauen wäre auch kein Weg: Der Lichtbogen liegt auf `background-attachment: fixed` und verschiebt sich mit Fenstergröße und Scrollposition. Ein gematchter Verlauf säße bei genau einer Fensterbreite richtig. Das Porträt steht auf der Unterkante der Box, so wie in der Über-mich-Sektion. Ein Freisteller, der frei in der Fläche endet, hängt in der Luft. Deshalb `padding-bottom: 0` und `overflow: hidden`, damit die Rundung unten sauber schneidet. */ .glasbox{ background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--glass-brd); border-radius:12px; padding:clamp(1.4rem,3vw,2.2rem); padding-bottom:0; overflow:hidden; display:flex;align-items:flex-end;justify-content:center; } .glasbox img{ display:block;width:100%;height:auto; border:0;border-radius:0;filter:none; } /* Randlos, wenn das Bild keine reine Figur ist, sondern eine Szene mit Tisch, Laptop und Tasse. Der Freisteller endet dort an drei Seiten mitten im Motiv, und mit Innenabstand liegt dieser Schnitt sichtbar in der Fläche. Randlos fällt er mit der Boxkante zusammen und liest sich als Bildausschnitt. Ein Porträt braucht das Gegenteil: Es soll Luft um sich haben. */ .glasbox--voll{padding:0;} /* Ein freigestelltes Portraet steht auf der Unterkante der Sektion und nicht frei in der Flaeche. Ohne das endet das Foto mitten im Nachtblau und haengt in der Luft. Dieselbe Loesung wie in der Ueber-mich-Sektion der Startseite, wo das Foto auf der Unterkante der Glasflaeche steht. Nur zweispaltig: Unter 980px steht das Foto ueber dem Text, dann wuerde der Text an der Sektionskante kleben. */ @media (min-width:981px){ .hero--portraet{padding-bottom:0;} .hero--portraet .hero__figure{align-self:end;} } /* ---------- Zwei Zugänge (Startseite) ---------- */ .doorgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;} .doorcard{ display:flex;flex-direction:column; padding:clamp(1.8rem,3.5vw,2.6rem); background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--hair); border-radius:10px; transition:border-color .25s ease,transform .25s ease; } .doorcard:hover{transform:translateY(-3px);} .doorcard--lehre{border-top:2px solid var(--copper);} .doorcard--lehre:hover{border-color:var(--copper);} .doorcard--begleitung{border-top:2px solid var(--teal);} .doorcard--begleitung:hover{border-color:var(--teal);} .doorcard__label{ font-size:.72rem;font-weight:500;text-transform:uppercase;letter-spacing:.24em; margin:0 0 1.1rem; /* Vorgabe für die neutrale Karte (Hintergrundwissen). Kupfer und Teal überschreiben das über die Modifier darunter. */ color:var(--dim); } .doorcard--lehre .doorcard__label{color:var(--copper-lt);} .doorcard--begleitung .doorcard__label{color:var(--teal);} .doorcard__title{ font-size:1.65rem;line-height:1.22;margin:0 0 1rem; } .doorcard__text{color:var(--dim);font-size:.98rem;margin-bottom:1.8rem;} .doorcard__go{ margin-top:auto;align-self:flex-start; font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em; border-bottom:1px solid var(--hair);padding-bottom:.35rem; transition:color .2s ease,border-color .2s ease; } /* Beim Überfahren nimmt der Weiterlink die Farbe seiner Karte an. Rosé bleibt dem primären CTA vorbehalten, siehe A2 im Design-Briefing. */ .doorcard:hover .doorcard__go{color:var(--fg);border-color:var(--fg);} .doorcard--lehre:hover .doorcard__go{color:var(--copper-lt);border-color:var(--copper-lt);} .doorcard--begleitung:hover .doorcard__go{color:var(--teal);border-color:var(--teal);} /* Das Definitions-Motiv (.def-block, .def-card, .def__*, .arrow) und die Prinzipienliste (.principles) sind am 28. Juli 2026 mit dem Umbau der Startseite entfallen. Beide wurden nur dort verwendet. */ /* ---------- Qualifikationsliste ---------- Jeder Eintrag steht als eigener Block mit kupferner Kante links, so wie das Datum in der Terminliste. Vorher lagen sie unter Haarlinien nebeneinander; weil die Einträge unterschiedlich lang sind, trafen sich die Linien der beiden Spalten nie und das wirkte zusammengeschustert. Senkrechte Kanten haben dieses Problem nicht. */ .quali{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.4vw,1.8rem) clamp(2rem,4vw,3.5rem); } .quali li{ border-left:2px solid var(--copper); padding-left:1.15rem; font-size:.94rem;line-height:1.62;color:var(--dim); } /* ---------- Aufzählung unter Haarlinien ---------- Für Listen, deren Einträge ganze Sätze sind und deshalb keine Aufzählungs- punkte vertragen: Themen und Persönliches auf /ueber-elena/. Die Kante liegt waagrecht und nicht senkrecht wie bei .quali, weil hier alle Einträge untereinander in einer Spalte stehen und die Linien sich dadurch treffen. */ .liste{list-style:none;margin:0;padding:0;} .liste li{ padding:.8rem 0;border-top:1px solid var(--hair); color:var(--dim);font-size:.96rem;line-height:1.62; } .liste li:first-child{border-top:0;padding-top:0;} /* Vorspann innerhalb einer Zeile, etwa „Bestätigung per E-Mail". Hebt sich über die Farbe ab und nicht über Fettschrift, die im Fließtext gesperrt ist. */ .liste strong{color:var(--fg);font-weight:500;} /* In einer Karte steht die Liste direkt unter der Kartenüberschrift. Ohne den Zuschlag waere der Abstand zur Überschrift kleiner als der zwischen zwei Eintraegen, und die Überschrift klebte an der Liste. */ .card__title + .liste{margin-top:1.1rem;} /* In einer breiten Karte laufen kurze Listeneintraege sonst quer ueber die ganze Seite und die Zeile hat mehr Leerraum als Text. */ .card--feature .liste{max-width:44em;} /* Steht die Liste mitten in einem Textblock, braucht sie Luft davor und danach wie ein Absatz. */ .ansatz .liste{margin:1.6rem 0;} /* ---------- Liste mit Jahreszahl ---------- Berufliche Stationen und Ausbildungen. Jahreszahl und Eintrag sind zwei Elemente in zwei Spalten und keine Textzeile mit Trennzeichen, damit die Jahre untereinander eine Kante bilden und der Eintrag frei umbrechen kann. */ .jahre{list-style:none;margin:0;padding:0;} .jahre li{ display:grid;grid-template-columns:8.5rem 1fr;gap:0 1.4rem; padding:.85rem 0;border-top:1px solid var(--hair); color:var(--dim);font-size:.96rem;line-height:1.62; } .jahre li:first-child{border-top:0;} .jahre .jahr{ color:var(--copper-lt);font-weight:500; font-size:.7rem;text-transform:uppercase;letter-spacing:.16em; padding-top:.35rem; } .jahre strong{color:var(--fg);font-weight:500;} /* Überschrift über einer Aufzählung. h1 bis h3 tragen auf der ganzen Seite margin:0, hier braucht es Luft nach unten und, wenn schon eine Liste darüber steht, deutlich mehr davor. Sonst kleben die zwei Listen aneinander. */ .listen-h{margin:0 0 1.25rem;} .jahre + .listen-h, .liste + .listen-h{margin-top:clamp(2.8rem,5vw,3.8rem);} /* Dieselbe Überschrift als Gliederung mitten in einer Textstrecke. */ .ansatz + .listen-h{margin-top:clamp(2.4rem,4.5vw,3.2rem);} /* ---------- Häufige Fragen als Akkordeon ---------- Gebaut aus
und und ohne eine Zeile JavaScript. Das Aufklappen, die Bedienung mit der Tastatur und die Ansage im Screenreader bringt der Browser von sich aus mit, und der Block funktioniert auch dann, wenn ein Skript nicht laedt. Die Frage steht als h3 im summary: Das erlaubt der HTML-Standard ausdruecklich, und die Ueberschriften-Gliederung der Seite bleibt damit erhalten, obwohl die Antwort zugeklappt ist. Die Haarlinien sind dieselben wie in .liste, damit der Block nicht wie ein Fremdkoerper wirkt. Das Zeichen rechts ist ein Plus, das im offenen Zustand zum Halbgeviertstrich wird. Kein Dreieck und kein Winkel: Beide muessten als Grafik dazu, das Zeichen kommt aus der Schrift der Seite. */ .faq{max-width:44em;border-bottom:1px solid var(--hair);} .faq__punkt{border-top:1px solid var(--hair);} .faq__frage{ display:grid;grid-template-columns:1fr 1.4rem;gap:0 1.4rem;align-items:baseline; padding:1.15rem 0;cursor:pointer; } /* Ohne beides steht das Standard-Dreieck zusaetzlich zum eigenen Zeichen da, in Safari braucht es die zweite Zeile. */ .faq__frage{list-style:none;} .faq__frage::-webkit-details-marker{display:none;} .faq__frage h3{ font-size:1.22rem;line-height:1.4;margin:0; transition:color .2s ease; } .faq__frage::after{ content:"+";justify-self:end; font-family:var(--font-display);font-size:1.55rem;line-height:1; color:var(--copper-lt);transition:color .2s ease; } .faq__punkt[open] > .faq__frage::after{content:"–";} .faq__punkt:hover > .faq__frage h3{color:var(--copper-lt);} .faq__frage:focus-visible{outline:2px solid var(--copper-lt);outline-offset:4px;} /* Auf den Begleitungs-Seiten traegt die Seite Teal. Ein kupfernes Zeichen waere dort ein Widerspruch zur Farbachse aus A2a. */ .faq--teal .faq__frage::after{color:var(--teal);} .faq--teal .faq__punkt:hover > .faq__frage h3{color:var(--teal);} .faq--teal .faq__frage:focus-visible{outline-color:var(--teal);} .faq__antwort{max-width:41em;padding:0 0 1.4rem;color:var(--dim);} .faq__antwort p{font-size:.98rem;line-height:1.7;margin-bottom:1.1rem;} .faq__antwort p:last-child{margin-bottom:0;} /* Der Textblock, der nach dem Akkordeon wieder einsetzt, braucht mehr Luft als .nachsatz sonst gibt: Die Unterkante des Akkordeons ist eine Linie. */ .faq + .nachsatz{margin-top:clamp(2.4rem,4.5vw,3.2rem);} /* ---------- Eckdaten-Zeile über einer Überschrift ---------- Dauer, Ort und Preis auf einen Blick, bevor der Text anfängt. Dasselbe wie `.card__kicker--daten`, nur außerhalb einer Karte: normal gesetzt und nicht in Versalien, weil eine dreiteilige Angabe sonst umbricht und wie ein Etikett wirkt statt wie eine Angabe. */ .eckdaten{font-size:.9rem;line-height:1.5;color:var(--copper-lt);margin:0 0 1.05rem;} .eckdaten--teal{color:var(--teal);} /* Mit der Eckdaten-Zeile stehen drei Zeilen übereinander, und die zwei oberen sind beide klein und farbig. Ohne Zuschlag lesen sie sich als ein Klumpen. Der Kicker gehört zur Sektion, die Eckdaten zum Angebot darunter: Der Abstand nach dem Kicker wächst deshalb deutlich, der zwischen Eckdaten und Überschrift bleibt der kleinere von beiden, damit die Gruppe hält. */ .label:has(+ .eckdaten){margin-bottom:1.9rem;} /* ---------- Sätze, die immer wieder fallen ---------- Anlässe in direkter Rede. Als Liste unter Haarlinien standen sie alle im selben Grau und in derselben Größe wie der Fließtext darum, das war eine graue Wand. Jetzt in Cormorant kursiv und zweispaltig: Kursiv liest sich als fremde Stimme, zwei Spalten brechen die lange Reihe. Bewusst ohne Signaturkante, die bleibt den echten Klient:innen-Stimmen vorbehalten, siehe `.stimme`. */ .saetze{ list-style:none;margin:0;padding:0;max-width:58em; display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(1.1rem,2.2vw,1.6rem) clamp(2rem,4vw,3.4rem); } .saetze li{ font-family:var(--font-display);font-style:italic; font-size:1.24rem;line-height:1.42;color:var(--fg); } @media (max-width:780px){ .saetze{grid-template-columns:1fr;} } /* ---------- Klient:innen-Stimmen ---------- Zitate auf dem dunklen Grund, an der Signaturkante der Rubrik. Bewusst anders gebaut als `.post__zitat` im Papierband: Das ist fremde Rede im Lesefluss eines Artikels, das hier steht als eigener Block nebeneinander. */ .stimmen{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.6rem,3vw,2.4rem); } .stimme{margin:0;border-left:2px solid var(--teal);padding-left:1.2rem;} .stimme blockquote{ margin:0;font-family:var(--font-display);font-size:1.22rem;line-height:1.42; color:var(--fg); } .stimme figcaption{ margin-top:.9rem; font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em; color:var(--dim); } @media (max-width:980px){ .stimmen{grid-template-columns:1fr;gap:1.6rem;} } /* ---------- Artikelliste ohne Link, bis die Beiträge übertragen sind ---------- */ .reads{ list-style:none;margin:0 0 2.5rem;padding:0;max-width:44em; } .reads li{ font-family:var(--font-display);font-size:1.35rem;line-height:1.3; padding:1.1rem 0;border-top:1px solid var(--hair); } .reads li:last-child{border-bottom:1px solid var(--hair);} /* Übertragene Artikel stehen als H3 mit Link. Die Überschrift erbt die Größe der Liste, damit verlinkte und noch nicht verlinkte Titel gleich aussehen. */ .reads h3{font-size:inherit;line-height:inherit;margin:0;font-weight:inherit;} .reads a{border-bottom:1px solid var(--hair);transition:color .2s ease,border-color .2s ease;} .reads a:hover{color:var(--copper-lt);border-color:var(--copper-lt);} /* ---------- Newsletter: Click-to-Load ---------- Das native Formular ist am 11. August 2026 entfallen. Brevo verarbeitet Anmeldungen nur aus dem eigenen Formular heraus, siehe newsletter.js und BRIEFING-DESIGN-TECHNIK.md B3. Stattdessen ein Kasten in der Gestaltung der Seite, der den iframe erst auf Klick einsetzt. */ .nl-laden,.kasse-laden{ max-width:44em;padding:1.8rem 1.9rem; background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--glass-brd);border-radius:10px; } .nl-laden__text,.kasse-laden__text{color:var(--dim);font-size:.94rem;margin:0 0 1.4rem;} .nl-laden noscript .nl-laden__text, .kasse-laden noscript .kasse-laden__text{margin:1.2rem 0 0;} .nl-laden a{color:var(--fg);border-bottom:1px solid var(--hair);} .nl-laden a:hover{color:var(--copper-lt);border-color:var(--copper-lt);} /* Brevos Formular bringt seinen eigenen weißen Grund mit. Es bekommt deshalb nur Rundung und Haarlinie, damit es als Fläche auf dem Nachtblau sitzt und nicht als Loch. Die Höhe ist gemessen: 517px bei 560px Breite, 592px bei 360px. Mit Reserve für die Erfolgsmeldung, die Brevo darüber einblendet. */ /* Nach dem Klick bleibt der Glaskasten stehen und traegt statt des Hinweises das Formular. Vorher und nachher ist es derselbe Kasten, nur der Inhalt wechselt. Voraussetzung dafuer ist ein transparenter Hintergrund im Brevo-Formular, seit 14. August 2026 dort so eingestellt. Farbwerte in briefing/scherschneva-design-technik.md B4. */ .nl-rahmen{ max-width:44em;padding:.9rem; background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--glass-brd); border-radius:10px; } /* Der ThriveCart-Checkout bringt seine eigenen Farben mit, eingestellt in ThriveCart selbst. Der Rahmen hier gibt ihm nur Breite und schneidet die Ecken rund, sonst nichts: Eine eigene Flaeche darunter waere ein sichtbarer Ring um ein Formular, das ohnehin einen Grund hat. Die passenden Farbwerte fuer ThriveCart stehen in BRIEFING-DESIGN-TECHNIK.md B4. */ .kasse-rahmen{ max-width:44em;border-radius:10px;overflow:hidden; border:1px solid var(--glass-brd); } .kasse-rahmen:focus{outline:none;} /* Die Hoehe steht hier nur als Ausgangswert. Gesetzt wird sie von newsletter.js aus der tatsaechlichen Breite des iframes, weil das Brevo-Formular je schmaler desto hoeher wird: bei 673 px Breite ist es 678 px hoch, bei 213 px schon 1065 px. Eine feste Hoehe traf das nie und hinterliess einen Rollbalken mitten im Glaskasten. Messreihe und Begruendung stehen in newsletter.js. */ .nl-rahmen iframe{ display:block;width:100%;height:700px; /* Transparent und ohne eigenen Rahmen: Der Kasten darum traegt beides schon. Ein weisser Grund hier wuerde die Einstellung im Brevo-Formular wieder zunichtemachen — genau das war bis 1. September 2026 der Fall und der Grund fuer den weissen Block hinter dem Anmeldeformular. */ border:0;background:transparent; } @media (max-width:560px){ /* Ebenfalls nur ein Ausgangswert, siehe oben. */ .nl-rahmen iframe{height:900px;} } /* Die Schlusszeile .tailnote ist am 29. Juli 2026 entfallen. Sie ist in der Kontakt-Sektion aufgegangen, die die Startseite jetzt beschließt. */ /* ---------- Türen ---------- */ .door__head{max-width:44em;margin-bottom:clamp(2.5rem,5vw,3.5rem);} .door__lede{color:var(--dim);margin-top:1.2rem;} .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;} .card{ display:flex;flex-direction:column; /* Bezugspunkt für die Klickfläche der verlinkten Kartenüberschrift, siehe unten. Ohne das legt sich die Fläche über die ganze Sektion, weil `section` selbst positioniert ist. */ position:relative; padding:2rem 1.9rem; /* Leicht durchscheinend, damit der Lichtbogen hinter den Karten sichtbar bleibt. */ background:rgba(255,255,255,.085); border:1px solid var(--hair); border-radius:10px; transition:border-color .25s ease,transform .25s ease; } .card:hover{transform:translateY(-2px);} .card--lehre{border-top:2px solid var(--copper);} .card--lehre:hover{border-color:var(--copper);border-top-color:var(--copper);} .card--begleitung{border-top:2px solid var(--teal);} .card--begleitung:hover{border-color:var(--teal);border-top-color:var(--teal);} .card--feature{grid-column:1 / -1;} /* ---------- Breite Karte mit Bild ---------- Text links, Bild rechts. Nur in einer .card--feature sinnvoll, in einer halbbreiten Karte bliebe für beides zu wenig Platz. Der Textteil bleibt eine eigene Flex-Spalte, damit `.card__link` weiter unten in der Karte klebt. */ .card--bild{ display:grid;grid-template-columns:1fr minmax(0,26em); gap:clamp(1.6rem,3vw,2.6rem);align-items:center; } .card--bild .card__haupt{display:flex;flex-direction:column;height:100%;} .card__figur{margin:0;} .card__figur img{ display:block;width:100%;height:auto; border-radius:8px;border:1px solid var(--hair); } @media (max-width:680px){ .card--bild{grid-template-columns:1fr;} } .card--soon{background:transparent;border-style:dashed;} .card__kicker{ font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.22em; color:var(--dim);margin:0 0 .8rem; } .card--lehre .card__kicker{color:var(--copper-lt);} .card--begleitung .card__kicker{color:var(--teal);} /* ---------- Produktlogo oben in einer Karte ---------- Ohne Plakette und ohne Rahmen direkt auf dem Grund, so wie die Kompetenznachweise im Fuß. Die Box hat eine feste Höhe und das Bild sitzt mit `contain` darin: Die Logos haben sehr verschiedene Seitenverhältnisse (Summit 2,53:1, Train the Change 6,42:1), und ohne feste Box stünden die Kartenüberschriften darunter auf verschiedener Höhe. Vom Summit wird die **weiße** Fassung verwendet. In der bunten steht das Wort „Summit" in Dunkelgrün und kommt auf dem Nachtblau nur auf 1,43:1. */ /* Beide Logos liegen auf derselben Leinwand, 1,79:1, und werden deshalb gleich groß ausgegeben und gleich groß angezeigt. Die Box ist etwas höher als die reine Schrifthöhe, weil die Leinwände Rand mittragen. */ .card__logo{ display:block;height:72px;width:100%;max-width:260px; object-fit:contain;object-position:left center; margin:0 0 1.7rem; } /* Trägt eine Karte ein farbiges Logo, ist die kupferne Signaturkante daneben zu hart: Sie konkurriert mit dem Gold im Summit-Logo und dem Koralle in „Change". Helles Kupfer nimmt den Sprung heraus, ohne die Rubrikfarbe aufzugeben. */ .card--kante-hell{border-top-color:var(--copper-lt);} .card--kante-hell:hover{border-top-color:var(--copper-lt);} /* Eine Eckdaten-Zeile aus Datum, Format und Zugang ist zu lang für Versalien mit Sperrung. Sie bricht dann um und liest sich als Etikett, obwohl sie eine Angabe ist. Normal gesetzt bleibt sie eine Zeile und lesbar. */ .card__kicker--daten{ font-size:.82rem;text-transform:none;letter-spacing:0;line-height:1.5; margin-bottom:1.15rem; } .card__title{margin:0 0 1rem;} /* Auf Übersichtsseiten ist die Kartenüberschrift selbst der Link. Ein zusätzlicher „Beitrag lesen"-Link darunter erzeugt auf sieben Kacheln siebenmal denselben nichtssagenden Linktext, und Vorleseprogramme lesen Linklisten am Stück. Klickbar ist trotzdem die ganze Karte: Das ::after legt eine unsichtbare Fläche über die Karte. Damit bleibt der Linktext die Überschrift, während die Klickfläche so groß ist, wie sie aussieht. Eine Karte, die statt dessen ganz in ein gefasst wäre, würde den kompletten Kartentext als Linktext vorlesen lassen. Voraussetzung: In derselben Karte darf kein zweiter Link stehen, der würde verdeckt. Am 1. September 2026 nachgezählt: Die drei Karten auf /fortbildung/ mit `.card__link` tragen genau einen Link, deshalb gilt das Verfahren jetzt auch für sie. Kommt je ein zweiter Link in eine Karte, gehört die Regel dort wieder abgeschaltet. */ .card__title a, .card__link{transition:color .2s ease;} .card__title a::after, .card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;} .card--lehre:hover .card__title a, .card--lehre .card__title a:hover{color:var(--copper-lt);} .card--begleitung:hover .card__title a, .card--begleitung .card__title a:hover{color:var(--teal);} /* Tastaturbedienung: Der Fokusring gehört um die ganze Karte, nicht nur um die zwei Zeilen Überschrift. */ .card:has(.card__title a:focus-visible), .card:has(.card__link:focus-visible){outline:2px solid var(--copper-lt);outline-offset:3px;} .card__title a:focus-visible, .card__link:focus-visible{outline:none;} /* Der Zeiger soll auf der ganzen Karte zeigen, dass sie klickbar ist, nicht erst über den zwei Wörtern des Links. */ .card:has(.card__title a), .card:has(.card__link){cursor:pointer;} /* 1,3 rem war bei Zeilenhöhe 1,75 knapper als eine Leerzeile, mehrere Absätze in einer Karte pickten dadurch zusammen. Dasselbe Problem wie in .ansatz. */ .card__text{color:var(--dim);font-size:.98rem;margin-bottom:1.5rem;} .card__text + .card__text{margin-top:.35rem;} .facts{list-style:none;margin:0 0 1.5rem;padding:0;font-size:.92rem;} .facts li{ display:flex;gap:1rem;padding:.5rem 0;border-top:1px solid var(--hair); } .facts li span{ flex:0 0 6.5rem;color:var(--dim); font-size:.68rem;text-transform:uppercase;letter-spacing:.18em; padding-top:.28rem; } .card--feature .facts{ display:grid;grid-template-columns:repeat(2,1fr);gap:0 2.5rem; } .card__link{ margin-top:auto;align-self:flex-start; font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em; color:var(--fg); border-bottom:1px solid var(--hair); padding-bottom:.35rem; transition:color .2s ease,border-color .2s ease; } /* Wie bei den Rubrikkarten: die Farbe der Karte, nicht Rosé. */ .card__link:hover{color:var(--copper-lt);border-color:var(--copper-lt);} .card--begleitung .card__link:hover{color:var(--teal);border-color:var(--teal);} /* ---------- Kachel in Papieroptik ---------- Der Bogen zum Blog: Die Karte nimmt als helles Blatt die Fläche vorweg, auf der der Artikel dann steht. Die Seite darunter bleibt Nachtblau, damit die Rubrik neben Fortbildung, Beratung und Supervision gleich aussieht. Der Schatten trägt das Blatt, sonst klebt es flach auf dem Grund. Kupfer und Teal an der Oberkante bleiben, sie sind auf Papier gut sichtbar; Text und Links brauchen dagegen die dunklen Fassungen. */ .card--papier{ background:var(--paper); border-color:rgba(28,38,52,.12); box-shadow:0 14px 34px rgba(0,0,0,.22); } /* Die Signaturkante oben zurückholen: Das border-color darüber färbt sonst alle vier Seiten grau, auch die kupferne Oberkante der Rubrik. */ .card--papier.card--lehre{border-top-color:var(--copper);} .card--papier.card--begleitung{border-top-color:var(--teal);} .card--papier .card__title, .card--papier .card__title a{color:var(--ink);} .card--papier .card__text{color:var(--ink-dim);} .card--papier .card__kicker{color:var(--copper-dk);} .card--papier.card--begleitung .card__kicker{color:var(--teal-dk);} .card--papier.card--lehre:hover .card__title a, .card--papier.card--lehre .card__title a:hover{color:var(--copper-dk);} .card--papier.card--begleitung:hover .card__title a, .card--papier.card--begleitung .card__title a:hover{color:var(--teal-dk);} .card--papier:has(.card__title a:focus-visible){outline-color:var(--copper);} .card--papier .card__link{color:var(--ink);border-bottom-color:var(--hair-dk);} .card--papier .card__link:hover{color:var(--copper-dk);border-color:var(--copper-dk);} /* ---------- Über Elena ---------- */ /* Die Glasfläche trägt nur Foto und Fließtext. Sie hat unten keinen Innenabstand, damit das freigestellte Foto auf der Unterkante steht und nicht in der Luft schwebt. Der Textspalte gibt ihr eigener Innenabstand den Abstand zurück. */ .about__inner{ display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4rem);align-items:end; padding:clamp(2rem,4vw,3rem);padding-bottom:0; background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--glass-brd); border-radius:12px; overflow:hidden; } .about__figure{margin:0;align-self:end;} /* Freigestellt, deshalb ohne Rahmen und ohne Rundung. Die Höhe ist gedeckelt, damit Foto und Textspalte etwa gleich hoch stehen. */ .about__figure img{filter:saturate(.94);max-height:500px;width:auto;} /* Das Porträt in einer eigenen Glasbox statt auf der Unterkante der großen Fläche. Auf der Unterkante stand es zwar nicht in der Luft, wirkte neben der hohen Textspalte aber klein und angeklatscht. Die eigene Box löst beides: Sie gibt dem Freisteller einen Boden, auf dem er steht, und als geschlossenes Element kann sie mittig zur Textspalte sitzen. Die Fläche bekommt ihren unteren Innenabstand dafür zurück, den sie für das randständige Foto abgegeben hatte. */ .about__inner--box{ align-items:center; grid-template-columns:minmax(0,390px) 1fr; padding-bottom:clamp(2rem,4vw,3rem); } .about__inner--box .about__figure{align-self:center;} .about__inner--box .about__text{padding-bottom:0;} /* Glas auf Glas: Die innere Box säße sonst mit derselben Deckkraft auf der äußeren und liefe darin unter. Etwas heller und mit kupfernerem Rand steht sie als eigenes Element davor. Der Innenabstand ist kleiner als im Hero: Dort steht die Box frei auf dem Lichtbogen und darf Luft um sich haben, hier sitzt sie schon in einer Fläche, und zweimal viel Rand ließe das Porträt darin schrumpfen. */ .about__inner--box .glasbox{ background:rgba(255,255,255,.07); border-color:rgba(226,181,140,.32); padding:clamp(1rem,2vw,1.5rem); padding-bottom:0; } .about__text{padding-bottom:clamp(2rem,4vw,3rem);} .about__text p{color:var(--dim);} .about__text h2{margin-bottom:1.4rem;} .about__text p:last-child{margin-bottom:0;} /* Alles nach dem Fließtext steht ohne Fläche unter der Box: erst die Qualifikationen, dann der rechtliche Rahmen, dann der Weiterlink. */ .about__weiter{margin-top:clamp(2.5rem,5vw,4rem);} .about__weiter h3{margin-bottom:1.4rem;} .about__weiter .quali{margin-bottom:clamp(2.2rem,4vw,3rem);} .about__rahmen{color:var(--dim);max-width:44em;margin-bottom:2.2rem;} /* ---------- Abschluss ---------- */ .closing__inner{max-width:40em;} .closing p{color:var(--dim);margin-bottom:2rem;} .closing h2{margin-bottom:1.2rem;} /* Steht der Knopf mitten in der Sektion statt am Ende, braucht er ringsum mehr Luft als ein Absatz, sonst liest er sich als Teil des Fliesstexts. */ /* ---------- Vergleichstabelle ---------- Zwei Rahmen nebeneinander, ohne einen davon abzuwerten. Kopfzeile in Versalien wie die Section-Labels, Zeilen durch Haarlinien getrennt, kein Kasten drumherum: Eine Tabelle mit Rahmen wirkt auf dem Lichtbogen wie ein Fremdkörper. Unter 680 px kippt sie in gestapelte Blöcke. Die Kopfzeile verschwindet dabei und steht stattdessen als `data-spalte` über jeder Zelle, sonst weiß man in der zweiten Spalte nicht mehr, worüber man liest. */ .vergleich{width:100%;max-width:56em;border-collapse:collapse;margin:0;font-size:.96rem;} .vergleich th{ width:50%;text-align:left;padding:0 1.6rem .85rem 0; font-family:var(--font-body);font-size:.72rem;font-weight:500; text-transform:uppercase;letter-spacing:.18em;color:var(--copper-lt); border-bottom:1px solid var(--hair); } .vergleich td{ width:50%;padding:1.05rem 1.6rem 1.05rem 0;border-top:1px solid var(--hair); color:var(--dim);line-height:1.62;vertical-align:top; } .vergleich th:last-child,.vergleich td:last-child{padding-right:0;} @media (max-width:680px){ .vergleich thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);} .vergleich,.vergleich tbody,.vergleich tr,.vergleich td{display:block;width:auto;} .vergleich tr{border-top:1px solid var(--hair);padding:1.15rem 0;} .vergleich td{border:0;padding:0 0 .9rem;} .vergleich td:last-child{padding-bottom:0;} .vergleich td::before{ content:attr(data-spalte);display:block;margin-bottom:.35rem; font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em; color:var(--copper-lt); } } /* ---------- Nummerierte Schritte ---------- Für Aufzählungen, bei denen die Reihenfolge Teil der Aussage ist. Die Zahl steht in der Display-Schrift über der Überschrift und nicht davor: Vor der Überschrift müsste jede Zeile denselben Einzug tragen, und bei zweizeiligen Überschriften bricht das. */ .schritte{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,1fr); gap:clamp(1.8rem,3.4vw,2.6rem) clamp(2rem,4vw,3.4rem); } .schritt{border-top:1px solid var(--hair);padding-top:1.15rem;} .schritt__nr{ display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1; color:var(--copper-lt);margin-bottom:.55rem; } .schritt h3{font-size:1.18rem;line-height:1.36;margin:0 0 .6rem;} .schritt p{color:var(--dim);font-size:.96rem;line-height:1.62;margin:0;} @media (max-width:780px){ .schritte{grid-template-columns:1fr;} } /* ---------- Preis am Seitenende ---------- Die Zahl in der Display-Schrift, groß genug, dass sie ohne Kasten und ohne Farbfläche trägt. Die Konditionen darunter in der Eckdaten-Zeile. */ .preis{ font-family:var(--font-display);font-size:clamp(2.6rem,6vw,3.5rem); line-height:1;margin:0 0 .7rem; } /* ---------- Bestätigungsseite ohne Navigationsleiste ---------- Sie erscheint nach dem Kauf bei ThriveCart und nach der Newsletter- Anmeldung. Keine Leiste, damit niemand mitten im Abschluss wieder in die Seite abbiegt, und eine schlanke Fußzeile mit dem Rechtlichen. Ohne Leiste faellt der Platzhalter weg, den `body` sonst fuer die fixierte Leiste traegt. Sonst stuende die Ueberschrift 140 px zu tief. Linksbuendig wie alles andere. Zentrierte Ueberschriften waeren die naheliegende Loesung fuer eine Dankesseite und sind in A3 ausgeschlossen. */ body.ohne-leiste{padding-top:0;} .danke{padding:clamp(3.5rem,9vw,6.5rem) 0 clamp(3rem,7vw,5rem);} .danke__inner > *{max-width:44em;} /* Das Logo ist hier der einzige Anker der Marke. Wer von der Bezahlseite bei ThriveCart kommt, also von einer fremden Domain, soll in einem Blick sehen, wo er gelandet ist. Klein, 64 statt der 108 px aus der Leiste: Die Nachricht dieser Seite ist die Überschrift, das Zeichen soll ihr nichts wegnehmen. Verlinkt, damit es zugleich der Weg zurück ist. */ .danke__logo{display:inline-block;margin:0 0 clamp(2.6rem,5.5vw,3.8rem);} .danke__logo img{display:block;height:64px;width:auto;} .danke h1{margin-bottom:1.3rem;} .danke .listen-h{margin-top:clamp(2.8rem,5vw,3.6rem);} .danke .closing__cta{margin-bottom:0;} /* Nur die Fußzeile, ohne Spalten und ohne Nachweise. Der Innenabstand oben entfaellt, sonst stuenden zwei Haarlinien uebereinander. */ /* Der schlanke Fuss der Danke-Seite besteht nur aus der Fusszeile — es gibt keine Termine, kein Rechtliches, keine Nachweise dazwischen. Deshalb faellt hier die Linie ueber der Fusszeile weg: Sonst stehen die Oberkante des Fusses und die Linie darunter mit 67 px Abstand fast aufeinander, und der untere Seitenrand bekommt einen Streifensatz, den nichts trennt. */ .footer--schlank{padding-top:0;} .footer--schlank .footer__base{border-top:0;} .closing__cta{margin:2.6rem 0 2.8rem;} /* Der schwellenlose Ausweg hinter dem Knopf. Eine Haarlinie statt einer Glasflaeche: Ein Kasten um einen einzigen Satz sieht aus wie ein leerer Platzhalter, und die Flaeche haette dem Rose-Knopf Aufmerksamkeit genommen. */ .closing__aus{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--hair);} .closing__aus p{margin-bottom:1.4rem;} /* ---------- Footer ---------- */ .footer{border-top:1px solid var(--hair);padding-top:clamp(3rem,6vw,4.5rem);} .footer__inner{ display:grid;grid-template-columns:auto repeat(3,1fr);gap:2.5rem; padding-bottom:2.5rem; } /* Das staatlich-geprüft-Siegel steht als erste Spalte der oberen Fußzeile, in der weißen Fassung auf transparentem Grund. Dort ist Platz, es groß genug zu zeigen, damit der Ring-Text lesbar bleibt. */ .footer__siegel{ display:flex;align-items:flex-start;justify-content:flex-start; /* Zusätzlich zum Raster-Abstand, damit das Siegel nicht an „Termine" klebt. */ padding-right:2.5rem; } .footer__siegel img{height:156px;width:auto;display:block;} /* Das eigene Logo steht oben in der Leiste und wiederholt sich im Fuß nicht. */ .footer__h{ font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--copper-lt); margin:0 0 1rem; } /* „Termine" über zwei Rasterspalten, seit 12. August 2026. Die Terminzeilen sind ganze Sätze mit Datum und Ort und brachen in einer Spalte dreimal um. Die frühere dritte Spalte „Seiten" ist dafür entfallen, sie trug am Ende nur noch „Über mich". Der Link steht jetzt in der Fußzeile neben dem Copyright. */ .footer__col--breit{grid-column:span 2;} .footer__col ul{list-style:none;margin:0;padding:0;} .footer__col li,.footer__col p{font-size:.94rem;color:var(--dim);margin:0 0 .5rem;} .footer__col a{color:var(--dim);transition:color .2s ease;} .footer__col a:hover{color:var(--fg);} /* Kompetenznachweise. Sie behalten ihre eigenen Farben und ihren eigenen Hintergrund, es sind fremde Marken. Deshalb sitzen sie ohne Rahmen und ohne Plakette rechts über der Fußzeile. */ .nachweise{ list-style:none;margin:0;padding:0 0 2.5rem; display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end; gap:1.1rem; } .nachweis{display:flex;align-items:center;} .nachweis img{height:74px;width:auto;display:block;} /* Das Top-Beraterin-Zeichen ist ein breites Banner. Auf gleicher Höhe wie die drei quadratischen würde es die Reihe erschlagen, deshalb etwas kleiner. */ .nachweis--breit img{height:52px;} .footer__base{ border-top:1px solid var(--hair);padding-block:1.6rem; display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;align-items:baseline; } .footer__base p{margin:0;font-size:.85rem;color:var(--dim);} .footer__base a{color:var(--dim);transition:color .2s ease;} .footer__base a:hover{color:var(--fg);} /* ---------- Veranstaltungsliste ---------- */ .events{list-style:none;margin:0;padding:0;} .event{ display:grid;grid-template-columns:130px 1fr;gap:2rem; padding:2rem 0;border-top:1px solid var(--hair); } .event:last-child{border-bottom:1px solid var(--hair);} .event__date{ display:flex;flex-direction:column;align-items:flex-start; padding-top:.4rem;border-left:2px solid var(--copper);padding-left:1.1rem; } .event--begleitung .event__date{border-left-color:var(--teal);} .event__day{font-family:var(--font-display);font-size:2.6rem;line-height:1;} .event__mon{ font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--dim);margin-top:.4rem; } .event__kicker{ font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--copper-lt); margin:0 0 .7rem; } .event__body h3{margin:0 0 .8rem;} .event__text{color:var(--dim);font-size:.98rem;margin-bottom:1.2rem;} /* ---------- Querverweis auf die andere Tür ---------- */ .crosslink{ display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap; padding:clamp(1.8rem,4vw,2.6rem); background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--hair);border-radius:10px; } .crosslink h2{font-size:1.6rem;margin-bottom:.6rem;} .crosslink .sec-lede{margin-top:0;max-width:34em;} /* ---------- Rechtstexte ---------- */ .legal{padding-top:clamp(3rem,7vw,5rem);} /* Die Textspalte bleibt schmal, sitzt aber linksbündig im Raster wie der Rest der Seite. */ .legal__inner > *{max-width:44em;} .legal h1{margin-bottom:2rem;} .legal h2{font-size:1.5rem;margin:2.6rem 0 .9rem;} .legal h3{font-size:1.2rem;margin:2rem 0 .7rem;} .legal p,.legal li{color:var(--dim);font-size:.98rem;} .legal ul,.legal ol{padding-left:1.2rem;margin:0 0 1.05rem;} .legal li{margin-bottom:.4rem;} .legal a{color:var(--fg);border-bottom:1px solid var(--hair);} .legal a:hover{color:var(--copper-lt);border-color:var(--copper-lt);} /* ---------- Links im Fließtext ---------- `a{color:inherit}` weiter oben macht jeden Link unsichtbar, der nicht von einem Baustein eigens gestaltet wird. Die Rechtstexte hatten das gelöst, der gewöhnliche Fließtext nicht: Auf /fortbildung/ und /ueber-elena/ standen Links mitten im Satz, die man weder gesehen noch als Link erkannt hat. Dieselbe Gestaltung wie in .legal, damit es eine Handschrift bleibt. */ .lede a, .sec-lede a, .ansatz a, .card__text a, .liste a, .closing p a, .note-box a, .faq__antwort a{ color:var(--fg);border-bottom:1px solid var(--hair); transition:color .2s ease,border-color .2s ease; } .lede a:hover, .sec-lede a:hover, .ansatz a:hover, .card__text a:hover, .liste a:hover, .closing p a:hover, .note-box a:hover, .faq__antwort a:hover{ color:var(--copper-lt);border-color:var(--copper-lt); } .legal strong{color:var(--fg);font-weight:500;} .legal hr{border:0;border-top:1px solid var(--hair);margin:2.6rem 0;} /* Die Tabelle der Verarbeitungszwecke in der Datenschutzerklaerung hat drei Spalten und wird auf einem Telefon breiter als der Bildschirm. Ohne eigenen Rollbereich zieht sie die ganze Seite seitlich auf. Am 1. September 2026 bei 375 px nachgemessen: Das Dokument war 566 statt 371 breit. Der Umschlag
kommt von datenschutz.py, das ihn beim Einsetzen des gemeinsamen Textes um jede Tabelle legt. */ .legal__table-wrap{overflow-x:auto;margin:0 0 1.5rem;min-width:0;} .legal table{width:100%;min-width:34rem;border-collapse:collapse;margin:0;font-size:.94rem;} .legal th,.legal td{ text-align:left;padding:.7rem .8rem;border-top:1px solid var(--hair);color:var(--dim); } .legal th{color:var(--fg);font-weight:500;} .note-box{ padding:1.4rem 1.6rem;margin:0 0 2rem; background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border:1px solid var(--glass-brd);border-radius:10px; } .note-box p:last-child{margin-bottom:0;} /* ---------- Kontaktdaten in der Glasfläche ---------- Vier Angaben als Beschreibungsliste, weil es Paare aus Bezeichnung und Wert sind. Das `
` sagt das auch dem Screenreader, und im Satzbild spart es die vier Doppelpunkte: Die Bezeichnung steht in der linken Spalte und muss sich nicht als „E-Mail:" an den Wert hängen. Bezeichnungen in Grau, Werte in Weiß. Bewusst ohne Kupfer oder Teal, die Kontaktseite gehört zu keiner der vier Rubriken. */ .kontaktdaten{ max-width:44em;margin:0; display:grid;grid-template-columns:6.5rem 1fr;gap:1.15rem 1.8rem; } .kontaktdaten dt{ font-size:.72rem;font-weight:500; text-transform:uppercase;letter-spacing:.18em; color:var(--dim);padding-top:.36rem; } .kontaktdaten dd{margin:0;color:var(--fg);line-height:1.62;} /* Die Anschrift bricht in ihre natürlichen Zeilen, statt als eine lange Zeile durchzulaufen. Der Zusatz zur Lage ist kein Teil der Anschrift und steht deshalb kleiner und gedämpft darunter. */ .kontaktdaten .lage{display:block;margin-top:.3rem;font-size:.9rem;color:var(--dim);} /* Unter 560 px wird aus zwei Spalten eine, sonst bleiben für den Wert keine 40 Zeichen übrig und die Anschrift bricht mitten im Straßennamen. */ @media (max-width:560px){ .kontaktdaten{grid-template-columns:1fr;gap:.3rem;} .kontaktdaten dt{padding-top:0;} .kontaktdaten dd + dt{margin-top:1.1rem;} } /* ========================================================= Blog: Artikelseiten unter /hintergrundwissen/ Entwurf D, von Elena gewählt am 30. Juli 2026. Der Artikel läuft in drei Bändern: dunkle Titelzone mit viel Luft, harter Schnitt, dann ein papierfarbenes Band über die volle Fensterbreite, das Text und Weiterlesen trägt, dann der Nachtblau-Fuß. Warum überhaupt hell: Fachtexte werden lang gelesen, und dafür ist dunkler Grund die schlechtere Wahl. Warum nicht die ganze Seite hell: Leiste, Logo und Fuß müssten sonst eine zweite Fassung bekommen, und jeder neue Baustein wäre danach zweimal zu bauen. Gilt für Artikelseiten. Die Rubrikseite /hintergrundwissen/ selbst bleibt Nachtblau wie die anderen vier Rubriken. ========================================================= */ :root{ /* Papier und Tinte. Kupfer und Teal brauchen auf hellem Grund eigene, dunklere Fassungen: die Originaltöne kommen dort nur auf rund 2,7:1 und sind als Text unlesbar. */ --paper:#F5F0E8; --ink:#1C2634; --ink-dim:#4E5C6E; --copper-dk:#8A5730; --teal-dk:#3B6A60; --hair-dk:rgba(28,38,52,.16); } /* ---------- Titelzone, noch auf Nachtblau ---------- */ .post{padding-top:clamp(4rem,9vw,7rem);padding-bottom:0;} .post + .post{border-top:0;} .post__head{max-width:40em;padding-bottom:clamp(3.5rem,7vw,5.5rem);} .post__head h1{ margin:0 0 1.9rem; font-size:clamp(2.1rem,4.6vw,2.9rem);line-height:1.16; /* Verteilt die Zeilen gleichmäßig, statt die letzte als Rest stehen zu lassen. Browser ohne Unterstützung brechen wie bisher um. */ text-wrap:balance; } /* Hält eine Wortgruppe zusammen, etwa einen Klammerzusatz im Titel. Ohne das bricht „Was ist IFS (Internal Family Systems)?" mitten in der Klammer. Erst ab 520 px, weil eine unteilbare Gruppe auf schmalen Bildschirmen breiter werden kann als die Spalte und dann seitlich hinausläuft. Unter dieser Breite ist die Zeile ohnehin kurz und mehrere Zeilen sind normal. */ @media (min-width:520px){ .nowrap{white-space:nowrap;} } /* Kategorie und Anlass über der Überschrift */ .post__tags{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.3rem;padding:0;list-style:none;} .post__tag{ font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em; padding:.34rem .8rem;border-radius:99px; border:1px solid var(--copper);color:var(--copper-lt); } .post__tag--begleitung{border-color:var(--teal);color:var(--teal);} .post__lede{ font-family:var(--font-display); font-size:clamp(1.3rem,2.4vw,1.55rem);line-height:1.45; margin:1.9rem 0 0;max-width:26em; } /* Blogartikel führen den Untertitel kursiv, so kommt er aus dem Bestand. Er ist ein sichtbarer Absatz und beantwortet die Titelfrage bereits vor dem ersten Abschnitt, siehe BRIEFING-SEO-AEO.md. Auf Rubrikseiten bleibt die Lede aufrecht. */ .post__lede--kursiv{font-style:italic;max-width:32em;} .post__meta{ font-size:.82rem;color:var(--dim); margin-top:1.7rem;padding-top:1.3rem;border-top:1px solid var(--hair); } /* ---------- Das Papierband ---------- Bricht aus dem Raster aus und nimmt die volle Fensterbreite. 100vw statt 100%, weil .wrap in der Mitte gedeckelt ist; den Rest fängt das overflow-x:hidden am body ab, sonst würde eine sichtbare Bildlaufleiste die Seite um deren Breite überstehen lassen. Die Kante bleibt hart: eine gerade Linie quer über die Seite, kein Verlauf, kein Schatten, keine Rundung. Genau dieser Schnitt ist der Punkt. Die kupferne Haarlinie betont ihn und weicht ihn nicht auf. */ .papierband{ position:relative; left:50%;margin-left:-50vw;width:100vw; background:var(--paper); color:var(--ink); border-top:1px solid rgba(192,132,87,.55); padding:clamp(3.2rem,6vw,4.8rem) 0 clamp(3rem,6vw,4.5rem); } /* Überschriften und Fließtext im Band tragen Tinte, sonst stünden sie in der Fassung fürs Dunkle auf hellem Grund. Der Lesekörper der Artikel regelt das selbst, die Rubrikseite braucht es für ihre Sektionsköpfe. */ .papierband h2, .papierband h3{color:var(--ink);} .papierband .sec-lede{color:var(--ink-dim);} /* Textspalte links, Inhaltsverzeichnis rechts. Der freie Papierrand, den die schmale Lesespalte ohnehin lässt, trägt damit etwas Nützliches. */ .post__grid{ display:grid; grid-template-columns:minmax(0,34em) minmax(0,1fr); gap:clamp(2.5rem,5vw,5rem); align-items:start; } /* ---------- Der Lesekörper ---------- Rund 68 Zeichen je Zeile. Der Fließtext läuft hier in voller Tinte und nicht gedämpft: ein Artikel wird am Stück gelesen, nicht überflogen. */ .post__body{grid-column:1;grid-row:1;} /* Das erste Element legt seinen Außenabstand ab, sonst beginnt der Artikel tiefer als das Inhaltsverzeichnis daneben und die zwei Spalten stehen sichtbar versetzt. Betrifft vor allem die erste H2 mit ihren 2,9 rem. */ .post__body > :first-child{margin-top:0;} .post__body p{font-size:1.06rem;line-height:1.8;margin:0 0 1.35rem;} .post__body h2{font-size:1.75rem;margin:2.9rem 0 1rem;color:var(--ink);} .post__body h3{font-size:1.28rem;margin:2.2rem 0 .8rem;color:var(--ink);} .post__body ul,.post__body ol{margin:0 0 1.35rem;padding-left:1.3rem;} .post__body li{margin-bottom:.5rem;line-height:1.75;} .post__body strong{font-weight:500;color:var(--ink);} .post__body a{color:var(--copper-dk);border-bottom:1px solid rgba(138,87,48,.4);} .post__body a:hover{border-bottom-color:var(--copper-dk);} /* Der eine Satz, der hängen bleiben soll. Steht als einzelner Absatz oder als blockquote mit Überzeile, wenn der Satz eine Zuschreibung braucht. */ .post__merk{ font-family:var(--font-display); font-size:1.5rem;line-height:1.35;color:var(--ink); margin:2.6rem 0;padding:0 0 0 1.4rem; border-left:2px solid var(--copper-dk); } .post__body .post__merk p{font-size:inherit;line-height:inherit;margin:0;} /* Die Überzeile muss den Absatz-Selektor darüber schlagen, sonst erbt sie die 1,5 rem des Merksatzes und wird größer als der Satz, den sie ankündigt. */ .post__body .post__merk p.post__merk__kicker{ font-family:var(--font-body); font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em; line-height:1.5;color:var(--copper-dk); margin:0 0 .6rem; } /* ---------- Merkkasten ---------- Für eine Regel, die man sich mitnehmen soll. Dritte abgesetzte Form im Artikel und bewusst von den beiden anderen unterschieden: Der Merksatz steht groß in Cormorant an der Kupferkante, das Fremdzitat kursiv an einer Haarlinie, dieser hier liegt als Fläche im Text. Die Glas-Card aus dem Design-System ist für Nachtblau gebaut; auf dem Papierband tritt an die Stelle des Glases dieselbe helle Fläche wie bei den Karten. Kein Rosé-Glow, der bleibt beim Button. */ .post__kasten{ margin:2.4rem 0;padding:1.4rem 1.6rem; background:rgba(255,255,255,.6); border:1px solid var(--hair-dk);border-radius:10px; } .post__body .post__kasten p{font-size:1.02rem;line-height:1.7;margin:0;} .post__body .post__kasten__label{ font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.18em; line-height:1.5;color:var(--copper-dk); margin:0 0 .7rem; } /* ---------- Fremdzitat mit Übersetzung ---------- Für wörtlich zitierte Sätze anderer, im Original und darunter auf Deutsch. Bewusst anders gebaut als der Merksatz: der trägt eine eigene Aussage und steht in Cormorant an der Kupferkante, das Zitat ist fremde Rede und tritt eine Spur zurück. Das Original trägt `lang`, damit Vorleseprogramme die Sprache wechseln. */ .post__zitat{ margin:2.4rem 0;padding:0 0 0 1.4rem; border-left:1px solid var(--hair-dk); } .post__body .post__zitat p{font-size:1.02rem;line-height:1.65;margin:0;} .post__body .post__zitat__original{font-style:italic;color:var(--ink);} .post__body .post__zitat__de{margin-top:.5rem;color:var(--ink-dim);} /* ---------- Erklärgrafik im Fließtext ---------- Bilder im Artikel sind die Ausnahme und für Dekoration ausgeschlossen. Erlaubt sind Grafiken, die Information tragen, welche der Text nur umständlich vermitteln kann, etwa den Verlauf von Nervenbahnen. Der feine Rahmen setzt die meist weiße Grafik gegen das Papier ab. */ .post__figur{margin:2.6rem 0;} .post__figur img{ width:100%;height:auto;display:block; border:1px solid var(--hair-dk);border-radius:8px; } .post__body .post__figur figcaption{ margin-top:.85rem; font-size:.88rem;line-height:1.6;font-style:italic; color:var(--ink-dim); } .post__ende{ max-width:34em;margin-top:clamp(2.5rem,5vw,3.5rem); padding-top:1.6rem;border-top:1px solid var(--hair-dk); font-size:.94rem;color:var(--ink-dim); } /* Trägt am Artikelende die Ansprache. Sie steht in voller Tinte, weil sie das ist, was jemand nach dem Lesen tun kann. */ .post__ende strong{color:var(--ink);font-weight:500;font-size:1.02rem;line-height:1.7;display:inline-block;margin-bottom:.5rem;} .post__ende .mail{color:var(--copper-dk);border-bottom:1px solid rgba(138,87,48,.4);} .post__ende .mail:hover{border-bottom-color:var(--copper-dk);} /* ---------- Inhaltsverzeichnis ---------- Läuft neben dem Artikel mit und hebt den Abschnitt hervor, in dem gerade gelesen wird. Im Quelltext steht es vor dem Artikel, damit die Vorlesereihenfolge stimmt; nach rechts kommt es allein übers Raster. Aufgenommen werden die H2. Die Logik liegt in blog.js. */ .toc{ grid-column:2;grid-row:1; position:sticky;top:calc(var(--nav-h) + 2rem); padding-left:1.3rem; border-left:1px solid var(--hair-dk); } .toc__h{ font-size:.66rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em; color:var(--copper-dk);margin:0 0 1rem; } .toc__list{list-style:none;margin:0;padding:0;counter-reset:toc;} .toc__list li{margin-bottom:.7rem;counter-increment:toc;} .toc__list a{ display:block; font-size:.9rem;line-height:1.45;color:var(--ink-dim); transition:color .2s ease; } .toc__list a::before{ content:counter(toc) "."; margin-right:.5rem;color:var(--copper-dk);opacity:.6; } .toc__list a:hover{color:var(--ink);} .toc__list a.is-hier{color:var(--ink);font-weight:500;} .toc__list a.is-hier::before{opacity:1;} /* ---------- Weiterlesen, steht mit im Papier ---------- Deshalb ohne eigene Trennlinie und in den hellen Fassungen. */ .post__weiter{border-top:0;padding:clamp(2.8rem,5vw,4rem) 0 0;} .post__weiter > .wrap{padding-inline:0;} .papierband .label--copper{color:var(--copper-dk);} .papierband .label--teal{color:var(--teal-dk);} .papierband h2{color:var(--ink);} .papierband .card{background:rgba(255,255,255,.6);border-color:var(--hair-dk);} .papierband .card--lehre{border-top-color:var(--copper-dk);} .papierband .card--lehre:hover{border-color:var(--copper-dk);} .papierband .card--begleitung{border-top-color:var(--teal-dk);} .papierband .card--begleitung:hover{border-color:var(--teal-dk);} .papierband .card__kicker{color:var(--copper-dk);} .papierband .card--begleitung .card__kicker{color:var(--teal-dk);} .papierband .card__text{color:var(--ink-dim);} .papierband .card__link{color:var(--ink);border-bottom-color:var(--hair-dk);} .papierband .card__link:hover{color:var(--copper-dk);border-color:var(--copper-dk);} /* Auf Papier ist das helle Kupfer zu blass. Die verlinkte Kartenüberschrift nimmt deshalb beim Überfahren die dunkle Fassung. */ .papierband .card--lehre:hover .card__title a, .papierband .card--lehre .card__title a:hover{color:var(--copper-dk);} .papierband .card--begleitung:hover .card__title a, .papierband .card--begleitung .card__title a:hover{color:var(--teal-dk);} .papierband .card:has(.card__title a:focus-visible){outline-color:var(--copper-dk);} /* Querverweis und Ghost-Knopf sind für den dunklen Grund gebaut: ihr Text steht in --dim beziehungsweise --fg und wäre auf Papier unlesbar bis unsichtbar. Im Band bekommen sie deshalb die hellen Fassungen. */ .papierband .sec-lede{color:var(--ink-dim);} .papierband .crosslink{ background:rgba(255,255,255,.6); -webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--hair-dk); } .papierband .btn--ghost{ background:rgba(255,255,255,.55); -webkit-backdrop-filter:none;backdrop-filter:none; border-color:var(--copper-dk);color:var(--ink); } .papierband .btn--ghost:hover{border-color:var(--copper);background:rgba(255,255,255,.85);} /* Der Fuß schließt direkt an das Papier an, ohne Haarlinie dazwischen. Über eine Klasse am body statt über :has(), damit es überall greift und zur übrigen Datei passt. Artikelseiten tragen . */ body.artikel .footer{border-top:0;} /* ---------- Responsive ---------- */ /* Umbruch auf das Burger-Menü bei 1180px, also genau bei --wrap. Erst ab dieser Breite steht das Raster in voller Breite, und nur dann haben Logo, fünf Navigationspunkte und der Summit-Knopf nebeneinander sicher Platz. Bei den früheren 1080px ragte der Knopf über die rechte Rasterkante hinaus. */ @media (max-width:1180px){ .nav-toggle{display:flex;} .nav-links{ position:absolute;top:var(--nav-h);left:0;right:0; flex-direction:column;gap:0; padding:.5rem var(--gut) 1.4rem; background:rgba(12,16,23,.96); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); border-bottom:1px solid var(--hair); display:none; } .nav-bar.is-open .nav-links{display:flex;} .nav-links a{padding:.95rem 0;border-bottom:1px solid var(--hair);font-size:.78rem;} .nav{position:static;} } @media (max-width:980px){ .hero__inner{grid-template-columns:1fr;} .hero__figure{order:-1;max-width:420px;} /* Einspaltig tauschen Foto und Text den Platz, damit das Foto unten in der Box sitzt und nicht mittig zwischen Überschrift und Text hängt. */ .about__inner{grid-template-columns:1fr;gap:2rem;} /* Zwei Klassen schlagen sonst die eine darüber, und die Foto-Spalte bliebe im Umbruch bei 340 px stehen. */ .about__inner--box{grid-template-columns:1fr;} .about__inner--box .glasbox{justify-self:center;max-width:360px;} .about__text{order:1;padding-bottom:0;} .about__figure{order:2;justify-self:center;} .about__figure img{max-height:none;width:100%;max-width:320px;} .quali{grid-template-columns:1fr;} .footer__inner{grid-template-columns:1fr 1fr;} .footer__siegel{grid-column:1 / -1;padding-right:0;} /* Der Zuschlag für „Termine" gilt nur im vierspaltigen Raster. Bliebe er stehen, spannte die Spalte hier über die ganze Zeile, und unter 680 px riefe sie sogar eine leere zweite Spalte hervor. */ .footer__col--breit{grid-column:auto;} .doorgrid{grid-template-columns:1fr;} .event{grid-template-columns:1fr;gap:1.2rem;} .event__date{flex-direction:row;align-items:baseline;gap:.7rem;} .event__mon{margin-top:0;} /* Neben dem Artikel ist kein Platz mehr für eine zweite Spalte. Das Inhaltsverzeichnis rutscht über den Text und steht still, statt mitzulaufen: auf dem Handy will man es einmal sehen und dann lesen. */ .post__grid{grid-template-columns:1fr;gap:0;} .post__body{grid-column:1;grid-row:2;} .toc{ grid-column:1;grid-row:1;position:static; margin-bottom:2.6rem;padding:1.2rem 1.4rem; border-left:0;border:1px solid var(--hair-dk);border-radius:10px; } .toc__list{columns:2;column-gap:1.6rem;} } @media (max-width:680px){ :root{--nav-h:100px;} body{font-size:16px;} .logo img{height:64px;} .nav{gap:.8rem;} .nav-cta{padding:.55rem .8rem;font-size:.62rem;letter-spacing:.1em;} .cards{grid-template-columns:1fr;} .card--feature .facts{grid-template-columns:1fr;} /* Die Jahresspalte frisst auf dem Handy die halbe Zeilenbreite. Jahr über Eintrag statt daneben. */ .jahre li{grid-template-columns:1fr;gap:.35rem;} .jahre .jahr{padding-top:0;} .card__logo{height:60px;max-width:215px;} .footer__inner{grid-template-columns:1fr;gap:2rem;} .nachweise{justify-content:flex-start;gap:.9rem;} .nachweis img{height:58px;} .nachweis--breit img{height:40px;} .toc__list{columns:1;} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none !important;} } /* -------------------------------------------------------------------------- E-Mail-Adresse fuer den Fall ohne JavaScript. mail.js setzt die Adressen im Browser zusammen, im Quelltext steht dann keine. Ohne JavaScript bliebe die Stelle leer — und im Impressum muss die Angabe nach § 5 ECG auch dann lesbar sein. Deshalb steht im