/* ==================================================================== RESSOS-SATZ Die Hausregeln fuer Beitragstexte. Angelegt 09/2026. WARUM EINE EIGENE DATEI Diese Regeln standen zuerst am Ende von style.css. Die Datei wurde von aussen wieder auf einen alten Stand gesetzt - OneDrive oder Publii -, und die Regeln waren weg. Der zweite Versuch war, custom.css zu laden. Darin schlummerten aber alte Entwuerfe aus einer fremden Farbfassung (ein tuerkiser Verlauf auf .frontpage, #47A3A6 auf den Kachelschaltflaechen, ein gruener Verlauf). Solange die Datei nicht geladen wurde, fiel das niemandem auf; mit dem Laden faerbte sich die Startseite beige und tuerkis. Deshalb jetzt eine eigene Datei, die nur die Hausregeln enthaelt. custom.css bleibt ungeladen und dient als Ablage. GELADEN in partials/head.hbs, direkt hinter style.css. ==================================================================== */ /* ==================================================================== GOLDENER SCHNITT IM BEITRAGSRASTER (with-sidebar, article, book - zusammen 227 veroeffentlichte Beitraege) Angelegt 09/2026. AUSGANGSLAGE Auf breiten Schirmen galt bisher: grid-template-columns: minmax(0, 46rem) 400px column-gap: 7rem also 736 zu 400 Pixel, Verhaeltnis 1,84. Die Ueberschrift war zusaetzlich auf 700px gedeckelt, der Text lief auf 736 - Ueberschrift und Text endeten also an verschiedenen Stellen. Das ist der Grund, warum diese Seiten unruhig wirkten. Die Zeile war mit 736px bei 16px Grundschrift rund 82 Zeichen lang; angenehm liest sich 70 bis 78. JETZT Die Sidebar bleibt auf 400px - ihr Inhalt (Ansprechpartner, verwandte Beitraege) ist darauf gebaut und braucht nicht angefasst zu werden. Die Textspalte ist das Phi-fache davon: 400 x 1,618 = 647px 647 + 71 (Fuge) + 400 = 1118px Blockbreite Bei 18px Grundschrift sind 647px rund 72 Zeichen. Die Deckelung der Ueberschrift faellt weg, Ueberschrift und Text haben damit dieselbe Breite. Abstaende nach derselben Reihe wie im Termin-Raster: 10 - 17 - 27 - 44 - 71 - 115. NUR AB 73,25em (1172px). Darunter greifen unveraendert die bestehenden Regeln: ab 1100px schmalere Sidebar, ab 768px einspaltig. RUECKGAENGIG: diesen Block loeschen. Es wird nichts ueberschrieben, was nicht hier steht. ==================================================================== */ @media all and (min-width: 73.25em) { .post-twocol, .post-twocol.post-twocol--sidebar { max-width: 1118px !important; margin-left: auto !important; margin-right: auto !important; grid-template-columns: minmax(0, 647px) minmax(0, 400px) !important; -webkit-column-gap: 71px !important; column-gap: 71px !important; align-items: start !important; } .post-twocol .post-twocol__left, .post-twocol .post-twocol__left--wide { max-width: none !important; } .post-twocol--sidebar .post-twocol__right, .post-twocol .post-twocol__right { max-width: 400px !important; } /* Ueberschrift auf die Breite der Textspalte */ .post-twocol .fullwidthheadline { max-width: none !important; margin-bottom: 27px !important; } /* Satz: 18px auf 647px sind rund 72 Zeichen, Zeilenabstand 1,618 */ .post-twocol .post-twocol__left p:not(.post-subtitle), .post-twocol .post-twocol__left li { font-size: 18px !important; line-height: 1.618 !important; } .post-twocol .post-twocol__left h2 { margin-top: 71px !important; margin-bottom: 27px !important; } .post-twocol .post-twocol__left h3 { margin-top: 44px !important; margin-bottom: 17px !important; } .post-twocol .post-twocol__left > *:first-child { margin-top: 0 !important; } } /* ==================================================================== SIDEBAR-KARUSSELL: LUECKE UNTER DEM TITEL 09/2026. .related-news-item__title trug min-height: 3.6em - Platz fuer drei Zeilen, auch wenn der Titel nur zwei braucht. In einem Raster aus nebeneinanderstehenden Karten hat das seinen Sinn: die Karten bleiben gleich hoch. Im Karussell der Seitenspalte steht immer nur eine Karte, und die reservierte dritte Zeile erscheint dort als Loch zwischen Titel und Kurztext. Zusammen mit dem Aussenabstand von 1em waren das rund fuenfzig Pixel Leere. Nur fuer die Seitenspalte abgeschaltet; im Raster bleibt die Mindesthoehe. ==================================================================== */ .post-sidebar .related-news-item__title, .post-sidebar__block .related-news-item__title { min-height: 0 !important; margin: 0 0 10px !important; -webkit-line-clamp: 4 !important; } .post-sidebar .related-news-item__text, .post-sidebar__block .related-news-item__text { margin: 0 0 17px !important; } /* Ohne Bild faellt der Kasten weg; vorher stand dort eine graue Flaeche. Siehe auch die Vorlagen: das Feld wird jetzt nur noch ausgegeben, wenn ein Bild vorhanden ist. */ .post-sidebar .related-news-item__image-wrap, .post-sidebar__block .related-news-item__image-wrap { margin-bottom: 17px !important; } .post-sidebar .related-news-item__date, .post-sidebar__block .related-news-item__date { margin: 0 0 8px !important; } /* ==================================================================== AUFSATZFASSUNG .ra-article AUF DAS HAUSSYSTEM GEBRACHT 09/2026. Betrifft 14 veroeffentlichte Beitraege. BEFUND Diese Fassung stammt aus einer fremden Vorlage und brachte ein eigenes Schriftsystem mit, das mit dem Rest der Website nichts zu tun hatte: Fliesstext Georgia statt der Hausschrift Auszeichnung -apple-system / Segoe UI / Helvetica statt NeueHaasUnica Ueberschrift Georgia in Halbfett mit negativer Laufweite statt Calluna in normaler Staerke Akzentfarbe #6c6c6c - ein Gold, das es in der Palette nicht gibt; das Hausgold ist #a9b6b2 Satzbreite 46rem, also 736px, waehrend die Textspalte nach dem Umbau auf den goldenen Schnitt 647px breit ist Nebeneinandergelegt sahen zwei Beitraege deshalb aus, als kaemen sie von zwei verschiedenen Kanzleien. JETZT Dieselben Werte wie auf den uebrigen Seiten: Fliesstext 17px in der Hausschrift mit Zeilenabstand 1,618, Ueberschriften in Calluna ohne Fettung, Abstaende aus der Reihe 10-17-27-44-71, Akzente im Hausgold. Der Einstiegsabsatz bleibt gross und steht in Calluna - das ist dieselbe Loesung wie auf der Terminseite. Die Bausteine der Fassung bleiben unveraendert nutzbar: ra-standfirst, ra-byline, ra-summary, ra-checklist, ra-note, ra-table, ra-runsheet, ra-cta, ra-lead, ra-kicker. RUECKGAENGIG: diesen Block loeschen. ==================================================================== */ .ra-article { max-width: none !important; padding: 0 0 44px !important; font: 400 17px/1.618 NeueHaasUnicaW1G, NeueHaasUnicaPro, 'Roboto Condensed', Helvetica, Arial, sans-serif !important; color: #2E2E2E !important; } .ra-article p { margin: 0 0 27px !important; } .ra-article h1 { margin: 0 0 27px !important; font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 50px !important; line-height: 1.16 !important; letter-spacing: -0.015em !important; color: var(--colour-brand-blue-100, #475956) !important; } .ra-article h2 { margin: 71px 0 27px !important; font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 28px !important; line-height: 1.22 !important; letter-spacing: 0 !important; color: var(--colour-brand-blue-100, #475956) !important; } .ra-article h3 { margin: 44px 0 17px !important; font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 21px !important; line-height: 1.3 !important; color: var(--colour-brand-blue-100, #475956) !important; } /* Einstiegsabsatz: ein halber Schritt der Reihe, in Calluna - wie auf der Terminseite. */ .ra-article .ra-standfirst, .ra-article .ra-lead { /* 44px waren zu weit: der Strich der Verfasserzeile stand darunter wie ein eigener Abschnitt. 22px binden beide zusammen. */ /* Die Klasse sitzt auch einmal auf einer Ueberschrift. Ohne eigene Angabe erbt sie dort die Serifenschrift des Themes und stand als kleine Serifenzeile unter dem Titel - zu klein fuer eine Ueberschrift, in der falschen Schrift fuer einen Vorspann. Familie und Schnitt stehen deshalb hier, und der Vorlauf wird genullt: eine Ueberschrift bringt ihren eigenen mit. */ margin: 0 0 22px !important; margin-top: 0 !important; font-family: NeueHaasUnicaPro, NeueHaasUnicaW1G, Helvetica, Arial, sans-serif !important; font-weight: 300 !important; font-size: 21px !important; line-height: 1.52 !important; color: var(--colour-brand-blue-100, #475956) !important; } .ra-article .ra-kicker { font-family: inherit !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .1em !important; color: #7A7268 !important; } .ra-article .ra-byline { font-family: inherit !important; font-size: 13px !important; line-height: 1.55 !important; color: #6A6A6A !important; } /* Der Kasten steht auf dem Steingrund der Website; die Linie links traegt das Hausgold. */ .ra-article .ra-summary { margin: 44px 0 44px !important; padding: 27px !important; background: var(--colour-brand-stone-40, #EFECEA) !important; border-left: 0px solid var(--colour-brand-gold-100, #a9b6b2) !important; font-family: inherit !important; font-size: 16px !important; line-height: 1.6 !important; } .ra-article .ra-summary p { margin: 0 0 17px !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: #7A7268 !important; } .ra-article .ra-checklist, .ra-article .ra-runsheet, .ra-article .ra-table { font-family: inherit !important; font-size: 16px !important; } .ra-article .ra-runsheet strong, .ra-article .ra-table th { color: var(--colour-brand-blue-100, #475956) !important; } .ra-article .ra-table th { border-bottom: 1px solid var(--colour-brand-gold-100, #a9b6b2) !important; } .ra-article .ra-note { margin-top: 44px !important; padding-top: 17px !important; border-top: 1px solid rgba(71, 89, 86, .18) !important; font-family: inherit !important; font-size: 13px !important; color: #6A6A6A !important; } .ra-article .ra-cta { margin: 71px 0 0 !important; padding: 27px !important; border: 1px solid var(--colour-brand-blue-100, #475956) !important; font-family: inherit !important; } .ra-article ul, .ra-article ol { margin: 0 0 27px !important; padding-left: 27px !important; } .ra-article li { margin: 0 0 10px !important; } @media (max-width: 62em) { .ra-article h1 { font-size: 32px !important; } .ra-article h2 { font-size: 24px !important; margin-top: 44px !important; } .ra-article .ra-standfirst, .ra-article .ra-lead { font-size: 19px !important; } } /* ==================================================================== SATZSYSTEM IM BEITRAGSTEXT 09/2026. Gilt fuer jeden Beitrag ausser der Startseite. DAS MASS Der Fliesstext der Kontaktseite ist das Mass der Website. Gemessen: NeueHaasUnicaPro im Light-Schnitt, 13,5px, Zeilenabstand 1,4, Schriftfarbe #222222. Die Vorlage rechnet in rem, und ihre rem-Grundlage ist 13,5px - deshalb sind 1,4rem dort 18,9px und nicht 22,4px. Absolute Pixelwerte aus einem anderen System sahen daneben sofort zu gross aus; das war der Fehler der ersten Fassung. DIE LEITER h1 Calluna 45 / 1,16 blau Vorspann Light 15,66 / 1,5 Graphit h2 Calluna 28 / 1,22 blau h3 Calluna 21 / 1,30 blau h4 Calluna 17 / 1,30 blau Fliesstext, Listen Light 13,5 / 1,4 #222222 WORAUF DIE REGELN GREIFEN Auf Elemente ohne eigene Klasse. Alles, was der Editor schreibt, hat keine Klasse; jedes Band und jede Kachel bringt eine mit (centres-band__lead, termine-teaser__lead und so fort). Damit fasst dieser Block genau den Beitragstext an und laesst die Baender in Ruhe. Die Startseite ist ueber body:not(.frontpage) ausgenommen. WARUM body UND !important Die Vorlage bringt mehrere Regelwerke mit, die sich gegenseitig ueberschreiben - eine Grundfassung fuer h2/h3/h4, eine zweite nur fuer .h3, eine dritte fuer Vorspannzeilen aus einer fremden Vorlage (article h3[data-lead]), dazu Absatzabstaende aus zwei Quellen. Gemessen ergab das fuer eine Untertitelzeile 15,66px serifenlos, waehrend der Absatz darunter auf 21px stand. Der Praefix sorgt dafuer, dass diese Leiter gewinnt. RUECKGAENGIG: diesen Block loeschen. ==================================================================== */ /* --- Fliesstext: das Mass der Kontaktseite -------------------------- */ body:not(.frontpage) main.main p:not([class]), body:not(.frontpage) main.main li:not([class]), body:not(.frontpage) main.main td:not([class]), body:not(.frontpage) main.main th:not([class]), body:not(.frontpage) main.main dd:not([class]), body:not(.frontpage) main.main dt:not([class]) { font-family: NeueHaasUnicaPro, NeueHaasUnicaW1G, Helvetica, Arial, sans-serif !important; font-weight: 300 !important; font-size: 13.5px !important; line-height: 1.4 !important; color: #222222 !important; } body:not(.frontpage) main.main p:not([class]) { margin: 0 0 18.9px !important; } /* Die Punkte standen links ausserhalb der Textspalte: die Liste trug keinen Innenabstand, und ein Punkt mit list-style-position: outside haengt rund 17px links vor dem Inhaltsrand. Gemessen: Spalte bei 91, Punkt bei 74. Mit 17px Innenabstand sitzt der Punkt genau auf der linken Kante der Ueberschrift darueber, und der Text ruecke davon ab - ein haengender Einzug, wie er sich gehoert. */ body:not(.frontpage) main.main ul:not([class]), body:not(.frontpage) main.main ol:not([class]) { margin: 0 0 18.9px !important; padding-left: 17px !important; } body:not(.frontpage) main.main li:not([class]) { margin: 0 0 6px !important; } /* AUSNAHME: die Punktreihe des Karussells in der Randspalte. Die Punkte des Karussells sind
  • ohne Klasse - bis auf den aktiven, der slick-active traegt. Die Regel darueber fasste deshalb genau die inaktiven Punkte und gab ihnen 6px nach unten und null zur Seite, waehrend der aktive seine 4px links und rechts behielt. Gemessen an der Seite "Methode": Punkt 1 bei x=965, Punkt 2 bei 984, Punkt 3 bei 998 - also 19px und 14px Abstand, dazu ein Punkt, der tiefer sitzt als die beiden anderen. Das war der schiefe Eindruck. Hier bekommen alle drei dieselben 4px und keinen Abstand nach unten. */ body:not(.frontpage) main.main .slick-dots li, body:not(.frontpage) main.main .slick-dots li:not([class]) { margin: 0 4px !important; } body:not(.frontpage) main.main ul.slick-dots, body:not(.frontpage) main.main .slick-dots { margin: 0 !important; padding: 0 !important; } /* --- Titel ---------------------------------------------------------- */ body:not(.frontpage) main.main h1:not([class]), body:not(.frontpage) main.main .fullwidthheadline { max-width: none !important; font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 45px !important; line-height: 1.16 !important; letter-spacing: -0.015em !important; color: var(--colour-brand-blue-100, #475956) !important; margin: 0 0 17px !important; } /* --- Vorspann: die Zeile unter dem Titel ---------------------------- */ /* DAS MUSTER, gemessen an der Honorarseite und dort fuer richtig befunden: Titel Calluna, gross, blau Vorspann serifenlos, 15,66px auf 1,5, blau - EIN Absatz Zwischentitel Calluna, blau Fliesstext serifenlos, 13,5px auf 1,4, Ink Der Vorspann ist blau und nicht Graphit. Blau stellt ihn eine Stufe ueber den Fliesstext und schlaegt die Bruecke vom Titel zum Text; auf der Honorarseite und im Profil steht er seit jeher so. Bis 09/2026 war er in den uebrigen Beitraegen Graphit - daher der Bruch, den man beim Blaettern sah. ZWEI WEGE FUEHREN ZUM VORSPANN 1. Ein

    als erstes Element. So ist es in rund 145 Beitraegen angelegt, und so ist es auf der Honorarseite. 2. Der erste Absatz, wenn kein

    davorsteht. Das greift in den rund 150 Beitraegen, die ohne eigene Vorspannzeile beginnen. Beide Wege koennen sich nicht ueberschneiden: Weg 2 verlangt, dass der Absatz unmittelbar auf den Titel folgt oder erstes Kind ist. Steht ein

    davor, trifft keine der Bedingungen zu, und der Absatz bleibt Fliesstext. Damit bleibt der Vorspann immer EIN Absatz. DIE HAUPTMENUESEITEN sind von Weg 2 ausgenommen (205 Honorar, 247 Profil, 317 Insights, 326 Kontakt, 387 Kanzlei, 390 Expertise, 393 Mandanten, 560 Themen, 600 Sektoren, 685 Events). Sie sind eingerichtet und sollen sich nicht mitbewegen. Von Weg 1 sind sie nicht ausgenommen - dort stehen sie schon heute so. */ body:not(.frontpage) main.main .post-twocol__left > h1 + h3, body:not(.frontpage) main.main .post-twocol__left--wide > h1 + h3, body:not(.frontpage) main.main .post-twocol__left > .post-subtitle + h3, body:not(.frontpage) main.main .post-twocol__left--wide > .post-subtitle + h3, body:not(.frontpage) main.main .post-twocol__left > h3:first-child, body:not(.frontpage) main.main .post-twocol__left--wide > h3:first-child, body:not(.frontpage) main.main .col860px > h3:first-child, body:not(.frontpage) main.main article > .col860px > h3:first-child, body:not(.frontpage) main.main article .row > .col:first-child > h3:first-child, body:not(.frontpage) main.main article .col860px .col:first-child > h3:first-child, body:not(.frontpage) main.main article.section > h1 + h3, body:not(.frontpage) main.main article.section > h3:first-child, body:not(.frontpage) main.main p.vorspann, body:not(.frontpage) main.main p.lead { font-family: NeueHaasUnicaPro, NeueHaasUnicaW1G, Helvetica, Arial, sans-serif !important; font-weight: 300 !important; font-size: 1.16rem !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--colour-brand-blue-100, #475956) !important; margin: 0 0 10px !important; } /* Weg 2: der erste Absatz, wenn keine eigene Vorspannzeile dasteht. */ body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main .post-twocol__left > h1 + p:not([class]), body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main .post-twocol__left--wide > h1 + p:not([class]), body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main .post-twocol__left > .post-subtitle + p:not([class]), body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main .post-twocol__left--wide > .post-subtitle + p:not([class]), body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main .post-twocol__left > p:not([class]):first-child, body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main .post-twocol__left--wide > p:not([class]):first-child, body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main article > .col860px > h1 + p:not([class]), body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main article > .col860px > p:not([class]):first-child, body:not(.frontpage):not(.page-205):not(.page-247):not(.page-317):not(.page-326):not(.page-387):not(.page-390):not(.page-393):not(.page-560):not(.page-600):not(.page-685) main.main article.section > h1 + p:not([class]) { font-family: NeueHaasUnicaPro, NeueHaasUnicaW1G, Helvetica, Arial, sans-serif !important; font-weight: 300 !important; font-size: 1.16rem !important; line-height: 1.5 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--colour-brand-blue-100, #475956) !important; margin: 0 0 10px !important; } /* --- Gliederung ----------------------------------------------------- */ body:not(.frontpage) main.main h2:not([class]) { font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 28px !important; line-height: 1.22 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--colour-brand-blue-100, #475956) !important; margin: 44px 0 17px !important; } body:not(.frontpage) main.main h3:not([class]) { font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 21px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--colour-brand-blue-100, #475956) !important; margin: 27px 0 10px !important; } body:not(.frontpage) main.main h4:not([class]) { font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 17px !important; line-height: 1.3 !important; color: var(--colour-brand-blue-100, #475956) !important; margin: 18.9px 0 6px !important; } /* Vorspann und erste Abschnittsueberschrift: der Vorspann bringt 27 mit, die Ueberschrift 44 - zusammen zu viel. Deshalb hier 17. */ body:not(.frontpage) main.main .post-twocol__left > p:first-of-type + h2, body:not(.frontpage) main.main .post-twocol__left--wide > p:first-of-type + h2 { margin-top: 17px !important; } /* Auszeichnung traegt den Medium-Schnitt. */ body:not(.frontpage) main.main p:not([class]) strong, body:not(.frontpage) main.main li:not([class]) strong, body:not(.frontpage) main.main p:not([class]) b { font-family: NeueHaasUnicaW1G, NeueHaasUnicaPro, Helvetica, Arial, sans-serif !important; font-weight: 500 !important; color: inherit !important; } /* --- Aufsatzfassung auf dasselbe Mass ------------------------------- */ .ra-article, .ra-article p, .ra-article li { font-family: NeueHaasUnicaPro, NeueHaasUnicaW1G, Helvetica, Arial, sans-serif !important; font-weight: 300 !important; font-size: 13.5px !important; line-height: 1.4 !important; color: #222222 !important; } .ra-article p { margin: 0 0 18.9px !important; } .ra-article .ra-standfirst, .ra-article .ra-lead { font-size: 1.16rem !important; line-height: 1.5 !important; /* Blau wie jeder andere Vorspann der Website. */ color: var(--colour-brand-blue-100, #475956) !important; } /* --- Zweispaltige Reihe im Beitragstext ----------------------------- */ /* .col860px > .row > .col Die linke Spalte beginnt mit einem Vorspann, die rechte mit einer Ueberschrift. Beide tragen verschiedene Vorlaeufe, und die rechte Ueberschrift stand deshalb rund 33 Pixel ueber der ersten Zeile links. Gemessen auf der Honorarseite: links 297, rechts 264. Die 2,45rem sind genau diese Differenz in der rem-Grundlage der Vorlage (13,5px). Damit beginnen beide Spalten auf derselben Hoehe. */ @media all and (min-width: 60.75em) { /* Bis 09/2026 standen hier 2,45rem, um die rechte Spalte auf die erste Textzeile links zu heben. Seit der Vorspann links seine eigene Groesse hat, beginnen beide Spalten ohnehin gleich hoch, und der Vorlauf war nur noch ein Loch ueber der Ueberschrift. */ .row .col:last-child > :first-child { margin-top: 0 !important; } } /* ===================================================================== AKKORDION MIT EIGENEM LAUF Ein Abschnitt des Akkordions bekommt eine feste Hoehe und einen eigenen Rollbalken. Gedacht fuer lange Aufzaehlungen - die exemplarischen Mandate im Profil -, die den geoeffneten Abschnitt sonst ueber die ganze Seite ziehen. WIE ES ANGEWENDET WIRD Im Beitragstext den zu rollenden Teil (in der Regel die Liste, nicht den einleitenden Absatz) in
    ...
    fassen. Alles andere bleibt unveraendert. WARUM EIN EIGENER KASTEN UND NICHT DAS dd SELBST Das Akkordion misst beim Aufklappen die Hoehe von .accordion-wrapper und setzt sie dem dd als Hoehe. Eine Begrenzung am dd selbst wuerde diese Messung ueberschreiben. Der Kasten hier steht innerhalb des Wrappers; der Wrapper misst dann den begrenzten Kasten, und die Rechnung des Akkordions bleibt unberuehrt. ===================================================================== */ .accordion .akkordion-rollen { /* Gemessen an der Profilseite: ein Eintrag der Mandatsliste ist dort 43 Pixel hoch, die sechs Eintraege zusammen 257. 200 Pixel zeigen also gut vier Eintraege und lassen den Rest rollen. */ max-height: 200px; overflow-y: auto; overscroll-behavior: contain; padding-right: 20px; scrollbar-width: thin; scrollbar-color: rgba(71, 89, 86, .38) rgba(20, 20, 20, .07); } .accordion .akkordion-rollen::-webkit-scrollbar { width: 6px; } .accordion .akkordion-rollen::-webkit-scrollbar-track { background: rgba(20, 20, 20, .07); } .accordion .akkordion-rollen::-webkit-scrollbar-thumb { background: rgba(71, 89, 86, .38); } .accordion .akkordion-rollen::-webkit-scrollbar-thumb:hover { background: var(--colour-brand-blue-100, #475956); } /* Oben und unten kein zusaetzlicher Abstand: der Kasten soll buendig unter dem einleitenden Absatz beginnen. */ .accordion .akkordion-rollen > :first-child { margin-top: 0 !important; } .accordion .akkordion-rollen > :last-child { margin-bottom: 0 !important; } /* Haarlinie unter dem Kasten. Sie zeigt an, wo der Abschnitt endet, auch wenn der Text weiterlaeuft. */ .accordion .akkordion-rollen { border-bottom: 1px solid rgba(71, 89, 86, .16); padding-bottom: 14px; } @media (max-width: 640px) { .accordion .akkordion-rollen { max-height: 260px; } } /* ===================================================================== TRENNSTRICH IM PROFIL Vom Nutzer diktiert, 09/2026. Vorher 1px auf #CFCFCF mit 12px Vorlauf; jetzt 2px im Markenblau und mit 24px Vorlauf. Nach unten kein Abstand - der Strich gehoert zu dem, was unter ihm folgt. Die Regel steht hier und nicht in der custom.css: jene Datei ist nicht eingebunden und dient nur noch als Archiv. ===================================================================== */ html body .profile-separator { width: 80px !important; height: 1px !important; background: var(--colour-brand-blue-100) !important; margin: 24px 0 24px !important; } /* ===================================================================== HAFTUNGSHINWEIS AM FUSS EINES BEITRAGS Der Hinweis ist eine Fussnote und soll auch so aussehen: die kleinste Schrift der Seite, gedeckt, mit einer einzigen Haarlinie darueber, die ihn vom Text abtrennt. Rahmen an den anderen drei Seiten sind ausdruecklich zurueckgenommen - eine Linie, die nichts trennt, fuellt nur eine Stelle, an der Raum genuegt haette. Die Regel fasst beide Schreibweisen: .ra-note aus der Aufsatzfassung und .haftungshinweis, das die uebrigen Beitraege tragen. html body davor, damit sie jede Angabe der Vorlage und der Aufsatzfassung schlaegt. ===================================================================== */ html body .ra-article p.ra-note, html body .ra-article .ra-note, html body .haftungshinweis, html body p.haftungshinweis, html body em.haftungshinweis { display: block !important; margin: 44px 0 0 !important; padding: 17px 0 0 !important; border: 0 !important; border-top: 1px solid rgba(71, 89, 86, .18) !important; font-family: NeueHaasUnicaPro, NeueHaasUnicaW1G, Helvetica, Arial, sans-serif !important; font-weight: 300 !important; font-style: normal !important; font-size: 11px !important; line-height: 1.5 !important; color: #7A7268 !important; } /* ===================================================================== DREISPALTIGE REIHE: SPALTENUEBERSCHRIFTEN SIND GLEICHRANGIG In einer .row--col3 traegt jede Spalte eine eigene Ueberschrift - auf der Kontaktseite "Erstgespraech", "Duesseldorf" und "Vertraulichkeit". Sie stehen nebeneinander und haben denselben Rang. Die Vorspannregel des Themes greift dort aber auf die ERSTE Spalte zu (article .row > .col:first-child > h3:first-child) und machte aus "Erstgespraech" eine Vorspannzeile: serifenlos, 15,66px, mit anderem Vorlauf als die beiden anderen. Sichtbar war das doppelt - die Ueberschrift las sich wie ein Untertitel, und die mittlere Spalte hing 22px tiefer als die beiden aussen. Hier bekommen alle drei dieselbe Ausfuehrung und keinen Vorlauf, damit sie auf einer Linie beginnen. ===================================================================== */ html body:not(.frontpage) main.main .row--col3 .col > h3:first-child { font-family: Calluna, Georgia, 'Times New Roman', Times, serif !important; font-weight: 400 !important; font-size: 21px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--colour-brand-blue-100, #475956) !important; margin: 0 0 10px !important; } /* --- Schlagwortseiten: kein Steinfeld hinter der Liste ----------------- Gemessen auf /tags/videos/: .news-section trug den Steinton --colour-brand-stone-40 (#EFECEA). Auf der Startseite ist das ein Band ueber die volle Breite und dort richtig. Auf einer Schlagwortseite sitzt der Abschnitt im Satzspiegel: bei 1600px Fensterbreite von x = 165 bis 1435, mit Weiss ringsum. Die Flaeche endet damit mitten auf der Seite und liest sich als Versehen. Die Kacheln stehen auf Weiss und tragen die Gliederung selbst; ein zweiter Ton dahinter fuegt nichts hinzu. RUECKGAENGIG: diesen Block loeschen. */ html body:not(.frontpage) main.main .news-section.news-section--listing { background: transparent !important; } /* --- Akkordion: das Satzsystem haelt sich heraus ----------------------- DIESELBE FALLE WIE BEI DEN KARUSSELLPUNKTEN UND DEN BANDPUNKTEN. Die Regel weiter oben fasst jedes dt OHNE Klasse und setzt es auf NeueHaasUnicaPro in 300. Das Akkordion haengt der aufgeklappten Zeile aber die Klasse is-active an. In dem Moment greift dt:not([class]) nicht mehr, und die Grundregel des Themes - dl dt { font-weight: 500 } - kommt durch. Die Zeile wurde also beim Anklicken fett, und sie blieb es, solange die Klasse stand. Gemessen: geschlossen 300 in NeueHaasUnicaPro, aufgeklappt 500 in der Systemschrift. Hier tragen alle Zeilen denselben Schnitt, mit und ohne Klasse. Die Auswahl nennt dl.accordion ausdruecklich, damit sie die Satzregel schlaegt: die steht mit drei Klassen und drei Elementen da, diese mit drei Klassen und fuenf Elementen. MERKSATZ: jedes Bedienelement braucht seine eigene Klasse, und jede Regel mit :not([class]) braucht die Gegenprobe an den Bauteilen, die ihre Klassen erst durch JavaScript bekommen. */ html body:not(.frontpage) main.main dl.accordion dt, html body:not(.frontpage) main.main dl.accordion dt:not([class]), html body:not(.frontpage) main.main dl.accordion dt.is-active, html body:not(.frontpage) main.main dl.accordion dt:hover, html body:not(.frontpage) main.main dl.accordion dt:focus { font-family: NeueHaasUnicaW1G, NeueHaasUnicaPro, Helvetica, Arial, sans-serif !important; font-weight: 500 !important; }