/* Open Sans (variabel, selbst gehostet - OFL-Lizenz, kein Google-CDN). Grundgewicht der Website ist Regular (400); die Variable-Datei deckt 300 bis 800 ab, damit Menue (500), Zwischenueberschriften (600) und (700) echte Schnitte bekommen. */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/open-sans-variable.woff2') format('woff2'); } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300 800; font-display: swap; src: url('/assets/fonts/open-sans-italic-variable.woff2') format('woff2'); } /* ========================================================================== Neon – neon.energy Leichtgewichtiges Stylesheet für die CMS-freie Website. Farben/Typografie orientiert am bisherigen Auftritt (Grün, Open Sans). ========================================================================== */ :root { --green: #4b8246; /* Überschriften, Links – verbindlicher Markenwert */ --green-light: #5c9a56; /* Hover */ --text: #626262; /* wie auf der alten Seite (heller als #464646) */ --muted: #999999; --border: #c4c4c4; --bg: #fbfbfb; /* leicht grau statt reinweiß */ --max-width: 1000px; --radius: 5px; /* Kacheln, Slider-Kacheln und Buttons */ } * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* Sprungziele halten Abstand zum sticky Header (104px hoch), sonst schiebt sich die angesprungene Ueberschrift darunter und ist unsichtbar. */ :target, h1[id], h2[id], h3[id] { scroll-margin-top: 124px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Open Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; /* Open Sans Regular als Grundschnitt der Website */ font-size: 15px; line-height: 1.6; /* alte Seite: 15px/24px */ } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* --- Typografie ---------------------------------------------------------- */ /* Automatische Worttrennung im Flisstext. Die Trennmuster kommen aus dem lang-Attribut am (de bzw. en), das build.py setzt. Ueberschriften, Navigation und Buttons bleiben ungetrennt - dort stoert eine Trennung mehr als der Flattersatz. */ p, li, dd, dt, blockquote, figcaption, td, th { -webkit-hyphens: auto; hyphens: auto; } h1 { color: var(--green); font-size: 30px; font-weight: 400; line-height: 1.3; margin: 1.2em 0 0.6em; } h2 { color: var(--green); font-size: 21px; font-weight: 400; line-height: 1.3; /* unitless, sonst erbt h2 mobil die absolute body-Zeilenhöhe */ margin: 2.2em 0 0.5em; } /* Dritte Ebene: kleiner als h2 und in Textfarbe statt Gruen. Steht meist direkt unter einer gruenen h2 - zwei gruene Ueberschriften uebereinander nehmen der oberen die Gliederungsfunktion. Team- und Kursseite behalten ihre gruenen 21px (eigene Regeln weiter unten). */ h3 { font-size: 19px; font-weight: 500; color: var(--text); line-height: 1.3; margin: 1.5em 0 0.4em; } a { color: var(--green); text-decoration: none; } a:hover { color: var(--green-light); text-decoration: underline; } /* Bei Grundgewicht 400 setzt auf den echten 700er-Schnitt */ strong, b { font-weight: 700; } p { margin: 0 0 1em; } .muted, .report-muted, .contact-muted { color: var(--muted); } .contact-muted a { color: var(--muted); } /* Kleine graue Nebenangabe (Metadaten, Beschriftungen) - seitenübergreifend */ .small { font-size: 0.85em; color: var(--muted); } .small a { color: var(--muted); } .small a:hover { color: var(--green); } /* --- Header / Navigation -------------------------------------------------- */ .site-header { background: var(--bg); /* beim Scrollen oben stehen bleiben */ position: sticky; top: 0; z-index: 100; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; /* mehr Luft über und unter dem Logo */ } .logo img { display: block; height: 44px; width: auto; } .main-nav .menu { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; } .menu-item { position: relative; } .menu-item > a, .menu-item > span { display: block; padding: 10px 12px; color: var(--text); cursor: pointer; white-space: nowrap; font-size: 14px; /* wie auf der alten Seite: 14px/500 */ font-weight: 500; } .menu-item > a:hover, .menu-item > span:hover { color: var(--green); text-decoration: none; } .menu-item.current > a, .menu-item.current > span { color: var(--green); } /* Burger-Button (nur Mobil sichtbar) */ .nav-toggle { display: none; } /* Dropdowns – gemeinsame Optik */ .submenu { display: none; margin: 0; padding: 8px 0; list-style: none; } .submenu li a { display: block; padding: 6px 18px; color: var(--text); font-size: 14px; } .submenu li a:hover { color: var(--green); text-decoration: none; background: #f7f7f7; } .submenu-group ul { list-style: none; margin: 0; padding: 0; } /* Hierarchie im Studien-Menü: Überschrift außen, Unterpunkte eingerückt */ .submenu-groups .submenu-heading { display: block; padding: 3px 8px; font-weight: 600; color: var(--green); font-size: 14px; } .submenu-groups .submenu-group ul li a { padding: 3px 8px 3px 24px; } .submenu-tail { border-top: 1px solid #eee; margin-top: 6px; } .submenu-groups .submenu-tail a { font-weight: 600; padding: 8px 8px 3px; } /* Sprachumschalter-Flagge */ .lang-switch a { display: block; padding: 10px 12px; } /* Höhe frei lassen: beide Flaggen behalten ihr echtes Seitenverhältnis (DE 5:3, UK 3:2) – feste Höhe hatte sie gestaucht */ .lang-flag { display: block; width: 18px; height: auto; margin: 6px 0; border: 1px solid #e5e5e5; } /* --- Desktop-Navigation: Hover-Dropdowns ---------------------------------- */ @media (min-width: 761px) { .submenu { position: absolute; top: 100%; left: 0; z-index: 50; min-width: 260px; background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 6px 18px rgba(0,0,0,.08); } /* Einspaltige Dropdowns (Themen, Leistungen) wachsen auf Inhaltsbreite, damit kein Menüpunkt umbricht - längster Eintrag ist „Engpassmanagement & Systembetrieb“ bzw. „Congestion Management & System Operation“. Das Studien-Panel ist ausgenommen: es ist ein Raster fester Breite, dort soll weiter umbrochen werden. */ .submenu:not(.submenu-groups) li a { white-space: nowrap; } .menu-item:hover > .submenu, .menu-item:focus-within > .submenu { display: block; } /* Zweistufiges Studien-Menü: Themen-Gruppen in Spalten, horizontal zur Seitenmitte zentriert, vertikal auf derselben Linie wie die übrigen Dropdowns (= Unterkante der Menüzeile). Die Menüpunkte sind im 80px- Header vertikal zentriert; 24px ≈ halbe Menüzeilenhöhe (20px Padding + 1.7 × 16px Zeile). */ .header-inner { position: relative; } .menu-item.has-groups { position: static; } /* Hover-Kontinuität: unsichtbare Verlängerung unter dem Studien-Link überbrückt die Haarlinie zwischen Menüpunkt und Panel-Oberkante (nur in Linkbreite, stört die Nachbar-Menüpunkte nicht) */ .menu-item.has-groups > a { position: relative; } .menu-item.has-groups > a::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px; } .submenu-groups { top: calc(50% + 24px); left: 50%; transform: translateX(-50%); width: min(920px, 92vw); padding: 18px 10px 12px; } .menu-item:hover > .submenu-groups, .menu-item:focus-within > .submenu-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 8px; } .submenu-group { padding: 0 10px 10px; } .submenu-tail { grid-column: 1 / -1; } .lang-switch { border-left: 1px solid #eee; margin-left: 8px; } } @media (min-width: 761px) and (max-width: 960px) { .menu-item:hover > .submenu-groups, .menu-item:focus-within > .submenu-groups { grid-template-columns: repeat(2, 1fr); } } /* --- Raster --------------------------------------------------------------- 12er-Raster wie im alten WPBakery-Layout: .row + .col-N (N von 12). Bricht unter 760px auf eine Spalte um. */ .row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 48px; align-items: start; } .row.gap-large { row-gap: 42px; } /* Nullminimum fuer die Spalten: ohne min-width:0 ist die automatische Mindestgroesse eines Grid-Items seine min-content-Breite. Steht in einer Spalte ein horizontaler Slider (.slider-track, nowrap, Folien mit flex: 0 0 100% und flex-shrink 0), zaehlt dessen min-content als Summe aller Folien - die Spur waechst auf ein Vielfaches der Fensterbreite und die Seite laesst sich seitlich schieben. Sichtbar wurde das auf /beratung/ unter 760px: dort ist das Raster einspaltig und der Referenz-Slider fuehrt textvolle Folien, waehrend der Studien-Slider mobil nur ein 200px-Titelbild je Folie zeigt und deshalb nie aufgefallen ist. */ .row > * { min-width: 0; } .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; } /* --- Bausteine ------------------------------------------------------------ */ .report-thumb, .media-col img.report-thumb { width: 100%; height: auto; border: 1pt solid var(--border); display: block; } .report-meta { font-size: 0.8em; line-height: 1.45; margin: 6px 0 0; } /* Kontaktbox (Ansprechpartner) */ .contact-box { text-align: center; } /* Portrait in der Kontaktbox: Kreis, 200px, heller Rahmen. object-fit: cover ist nötig, weil die Quellbilder querformatig sind (≈210px hoch, Seitenverhältnis 0,97–1,40) und den Kreis sonst nicht füllen würden; aspect-ratio hält ihn auch dann rund, wenn max-width auf schmalen Spalten greift. Die Team-Seite nutzt .team-portrait mit denselben Eigenschaften, nur 150px statt 200px. */ .neon-portrait { width: 200px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); display: inline-block; } /* Der Name ist der Anker im Kontaktfeld, die Kontaktdaten darunter treten zurueck: Name halbfett, Mail und Telefon klein und grau. Gilt fuer alle Kontaktboxen der Website, damit sie ueberall gleich aussehen. */ .contact-name { margin: 0; font-weight: 600; } .contact-name .contact-muted { font-weight: 400; font-size: 13px; } /* Zwei Ansprechpartner untereinander in derselben Spalte (/beratung/, /studien/). Der Abstand muss groesser sein als die Zeilenluft, sonst liest sich die zweite Kontaktzeile als Fortsetzung der ersten. */ .contact-stack .contact-box + .contact-box { margin-top: 2.6em; } /* Kursseite: Luft zwischen Infoblock (Intro + Eckdaten + Kontakt) und den Kurskacheln - ohne sie stossen zwei Rasterzeilen unmittelbar aneinander */ .row.course-grid { margin-top: 2.8em; } /* Inhaltsverzeichnis der Themenseiten: klein und grau unter dem Blurb, Abschnitte durch Mittelpunkte getrennt */ /* Sprungmarken der Themenseiten: senkrecht in der rechten Spalte unter der Kontaktbox, nicht als Punktreihe im Textfluss - dort konkurriert die Liste mit dem Intro und wird ueberlesen. Sticky, soweit die Zeilenhoehe es hergibt. */ .seiten-toc { font-size: 13px; line-height: 1.5; margin: 1.8em 0 0; padding-top: 1.1em; border-top: 1px solid var(--border); position: sticky; top: 90px; } .seiten-toc .toc-titel { margin: 0 0 .5em; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .seiten-toc a { display: block; padding: .22em 0; } /* Steht das Verzeichnis allein oben in der Randspalte (Projekte, Publikationen), entfaellt die Trennlinie zur Kontaktbox darueber */ .col-3 > .seiten-toc:first-child { margin-top: .4em; border-top: 0; padding-top: 0; } /* Mobil steht die rechte Spalte unter dem Text; dort waere ein mitlaufendes Verzeichnis stoerend und stuende ohnehin zu weit unten. */ @media (max-width: 760px) { .seiten-toc { position: static; } } /* Metadaten-Block auf Projekt-Seiten. Das Auftraggeberlogo steht rechts daneben, nicht darunter: der Block ist kurz, daneben ist Platz, und das Logo gehoert visuell zu "Im Auftrag von ...". */ .project-meta { margin: 0 0 1.2em; display: flex; align-items: flex-start; gap: 34px; } .project-meta p { margin: 0; } .project-meta .meta-text { flex: 1 1 auto; min-width: 0; } /* Die Logospalte ist gedeckelt, damit sie den Metatext nicht in den Umbruch draengt: ein einzelnes Logo hoechstens 150px breit, ab vier Logos ein zweispaltiges Raster mit kleineren Marken. */ .project-meta .auftraggeber { flex: 0 0 auto; margin: 0; justify-content: flex-end; max-width: 190px; gap: 12px 16px; } .project-meta .auftraggeber img { max-width: 190px; } .project-meta .auftraggeber.viele { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; max-width: 240px; align-items: center; justify-items: center; } .project-meta .auftraggeber.viele img { max-width: 108px; } /* Medien-Spalten (Studie / Folien / Weiterführendes) */ .media-col h3, .media-col .media-heading { font-weight: 700; font-size: 15px; margin: 0 0 6px; } .media-col .video-embed { position: relative; padding-top: 56.25%; border: 1pt solid var(--border); } .media-col .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .media-col p.media-sub { margin: 1.5em 0 0.3em; font-weight: 600; } /* Das erste Titelbild sitzt hoeher als die erste Zwischenzeile (.media-sub) der Spalte "Weiterfuehrendes" daneben. Bild um die Differenz absenken, damit Bildoberkante und Zwischenzeile auf einer Linie liegen. */ .media-col > a:not(.stacked) > .report-thumb { margin-top: calc(1.5em - 6px); } /* Zweites Titelbild in derselben Medienspalte (z.B. Bericht + Anhang) */ .media-col a.stacked img { margin-top: 18px; } .media-col ul { margin: 0 0 0 1.1em; padding: 0; } .media-col ul li { margin-bottom: 0.2em; } /* Sektions-Überschriften mit Link (z.B. "Studien" → Projektreferenzen) */ h2 a { color: inherit; } /* Kundenlogos-Collage auf der Startseite: grau, bei Mouseover farbig */ .kundenlogos { width: 100%; height: auto; display: block; margin: 20px 0 0; filter: grayscale(100%); transition: filter .5s ease-in-out; } .kundenlogos:hover { filter: grayscale(0); } /* Publikationsliste (zweispaltig) */ .pub-list p { margin: 0 0 0.9em; break-inside: avoid; } .two-col { columns: 2; column-gap: 48px; } @media (max-width: 760px) { .two-col { columns: 1; } } /* Projektreferenz-Textblöcke */ .ref-block { margin-bottom: 1.7em; } .ref-block p { margin: 0; } /* --- Startseite ------------------------------------------------------------ Vier Prosabloecke im 2x2 links, Neuigkeiten-Spalte rechts, darunter Themenkacheln, Kunden-Slider und Kontakt. Die Abschnitte sind durch eine duenne graue Linie getrennt, die links und rechts eingezogen ist. */ /* Bi-Line unter der H1: die Ueberschrift traegt den Namen, dieser Satz sagt, was Neon tut. Er loest zugleich das Gedraenge, das entstand, als H1 und die erste H2 der Prosabloecke direkt aufeinanderstiessen. */ .bi-line { font-size: 20px; font-weight: 300; line-height: 1.45; color: #4a4a4a; margin: -0.2em 0 1.8em; } /* Oberkante: erste Ueberschrift links und rechts auf derselben Linie */ .top-row h2 { margin-top: 0; font-size: 17px; } .prosa { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6em 34px; } .prosa h2 { margin: 0 0 .35em; font-size: 17px; } /* Silbentrennung: die Spalten sind rund 290px breit, ohne Trennung reißt „energiewirtschaftliches Beratungsunternehmen“ große Löcher in die Zeile. Der Browser trennt korrekt, weil gesetzt ist. */ .prosa p { margin: 0; font-size: 13.5px; line-height: 1.55; hyphens: auto; } /* Neuigkeiten-Spalte: Kurse und Studien, nur durch Abstand getrennt */ .rail { border-left: 1px solid #e3e3e3; padding-left: 26px; } .rail-group + .rail-group { margin-top: 4.2em; } .rail-group h2 { font-size: 17px; margin: 0 0 .6em; font-weight: 600; } .rail ul { list-style: none; margin: 0; padding: 0; } .rail li { padding: 9px 0; border-top: 1px solid #ececec; } .rail li:first-child { border-top: 0; padding-top: 0; } .rail .d { font-size: 12.5px; color: var(--muted); display: block; } .rail .t { display: block; color: var(--green); line-height: 1.35; } .rail .s { font-size: 12px; color: var(--muted); display: block; } .rail .more { font-size: 13px; margin: .7em 0 0; } /* Ein bis zwei Zeilen Einordnung unter einer Abschnittsueberschrift */ .abschnitt-intro { margin: 0 0 1.1em; } /* Themenkacheln: Langfassung des Themenfelds plus drei Stichworte */ .topic-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: .5em 0 0; } .topic-tile { display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid var(--green); background: #fff; border-radius: var(--radius); padding: 9px 12px; color: var(--green); font-size: 15px; line-height: 1.25; transition: background .15s ease; } .topic-tile:hover { background: #f4f8f3; text-decoration: none; color: var(--green); } .topic-tile .stich { font-size: 11.5px; color: var(--muted); line-height: 1.35; } /* Kunden-Slider: je Folie eine Kachel mit Rahmen, Logowolke links, Einordnung rechts, senkrechte Trennlinie dazwischen. */ .kunden-slider { margin: 0 0 10px; } .kunden-slider .slide { display: flex; } .kunden-kachel { position: relative; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--green); background: #fff; border-radius: var(--radius); padding: 20px 26px 22px; } .kunden-kachel h3 { margin: 0 0 .7em; } .kachel-body { flex: 1; display: grid; grid-template-columns: 2fr 1fr; align-items: stretch; } .kachel-text { border-left: 1px solid #e3e3e3; padding: 0 34px 0 26px; } .kachel-text p { margin: 0; font-size: 14px; } /* Wolke statt Reihen: die Wolke ist schmaler als ihre Spalte, dadurch brechen drei bis vier Logos je Zeile; zusaetzlich ist jedes zweite bis vierte Logo senkrecht versetzt, damit keine Baender entstehen. */ .logo-cloud { display: flex; flex-wrap: wrap; align-items: center; align-content: space-evenly; justify-content: center; gap: 18px 32px; padding: 8px 20px 8px 0; min-height: 180px; max-width: 560px; margin: 0 auto; } .logo-cloud img { width: auto; object-fit: contain; display: block; } .logo-cloud img.xl { height: 78px; max-width: 250px; } .logo-cloud img.gross { height: 56px; max-width: 190px; } .logo-cloud img.mittel { height: 40px; max-width: 140px; } .logo-cloud img.klein { height: 30px; max-width: 108px; } .logo-cloud img:nth-child(2n) { transform: translateY(-6px); } .logo-cloud img:nth-child(3n) { transform: translateY(7px); } .logo-cloud img:nth-child(5n) { transform: translateY(-9px); } .logo-cloud img:nth-child(7n) { transform: translateY(4px); } /* Blaetterpfeile in der Kachel: gross, dick, halbtransparent, am Rand */ .slider-arrow-in { position: absolute; top: 0; bottom: 0; width: 56px; display: flex; align-items: center; justify-content: center; color: var(--green); opacity: .28; } .slider-arrow-in.next { right: 0; } .slider-arrow-in.prev { left: 0; } .slider-arrow-in svg { width: 34px; height: 60%; max-height: 190px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .slider-arrow-in:hover:not(:disabled) { opacity: .6; color: var(--green); } .slider-arrow-in:disabled { opacity: .07; cursor: default; } /* Kontaktabschnitt am Fuss: Text links, die beiden Portraits rechts */ .kontakt-row { margin-top: 1.4em; } .kontakt-text p { margin: 0; } /* --- Kundenlogos ---------------------------------------------------------- Zwei Formen: die Wand (.logo-wall) auf Themenseiten und /beratung/, und das einzelne Auftraggeberlogo (.auftraggeber) auf Studienseiten. Die Quelldateien haben Seitenverhältnisse von 0,6 bis 8,0, deshalb steuert die Höhe die Größe und die Breite ist nur nach oben begrenzt – so wirken alle Logos gleich gewichtet, ohne dass breite Wortmarken die Zeile sprengen. */ /* Wolke statt Reihe: mittig gesetzt, senkrecht versetzt und auf eine Breite begrenzt, die mehrere Zeilen erzwingt - dieselbe Optik wie im Kunden-Slider. Die Hoehe je Logo kommt aus build.py (optisch ausgeglichen), deshalb steht hier keine Groesse. Normalzustand grau, bei Hover farbig. */ .logo-wall { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px 44px; max-width: 820px; margin: 2.6em auto 3.2em; } .logo-wall img { width: auto; object-fit: contain; display: block; filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease; } /* Hover faerbt die ganze Wand, nicht das einzelne Logo: die Wand ist ein Kundenbild, kein Menue - einzelne Logos hervorzuheben suggeriert Auswahl. */ .logo-wall:hover img { filter: none; opacity: 1; } /* Schmale Variante in der Textspalte der Themenseiten: die Wolke steht direkt unter dem Intro und fuellt den Raum, der sonst neben der Kontaktspalte leer bliebe. Linksbuendig statt zentriert, weil sie zum Text gehoert, und enger gesetzt, weil nur zwei Drittel Breite da sind. */ .logo-wall.schmal { justify-content: center; gap: 24px 34px; max-width: none; margin: 2em 0 0; padding-right: 26px; } .wand-titel { margin: 1.9em 0 0; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; scroll-margin-top: 120px; } .logo-wall img:nth-child(2n) { transform: translateY(-8px); } .logo-wall img:nth-child(3n) { transform: translateY(9px); } .logo-wall img:nth-child(5n) { transform: translateY(-11px); } .logo-wall img:nth-child(7n) { transform: translateY(5px); } .auftraggeber { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin: 0 0 1.3em; } .auftraggeber img { max-width: 118px; width: auto; object-fit: contain; display: block; } @media (max-width: 760px) { .logo-wall { gap: 22px 28px; margin: 1.6em 0 2.2em; justify-content: flex-start; } /* Studienseiten: gestapelt folgt die Medienzeile ("Studie") direkt auf die Kontaktbox - deutlicher Abstand dazwischen */ .media-row { margin-top: 3em; } /* Themenseiten: unter der Logowand folgt gestapelt direkt die Kontaktbox - ohne deutlichen Abstand klebt das Portrait an den Logos */ .logo-wall.schmal { margin-bottom: 5em; } .logo-wall img { transform: none !important; filter: none; opacity: 1; } .auftraggeber img { max-width: 96px; } } /* --- Design-Variante „Original-Spalten" (Branch design-original) ----------- */ /* Abschnittsüberschriften der Startseite tragen die Trennlinie: dieselbe dünne graue Linie wie zwischen Haupt- und Neuigkeiten-Spalte, links und rechts um 26px eingezogen, damit sie nicht an den Seitenrand stößt. */ /* Jahresbaender der Projektreferenzen: die Seite ist eine lange Folge gleichfoermiger Bloecke, deshalb brauchen die Jahre mehr Luft und eine feine Linie, um als Gliederung zu wirken. */ h2.jahr { margin-top: 3.4em; padding-top: 1.1em; border-top: 1px solid #e3e3e3; } /* Das erste Jahresband folgt direkt auf Blurb und Inhaltsverzeichnis - dort waere die Linie eine Dopplung */ h2.jahr:first-of-type { margin-top: 2.2em; border-top: 0; padding-top: 0; } h2.section { font-size: 30px; padding-top: 1.3em; margin-top: 2.4em; position: relative; } h2.section::before { content: ""; position: absolute; top: 0; left: 26px; right: 26px; border-top: 1px solid #e3e3e3; } /* Startseite: Sektionsüberschriften in Seitentitel-Größe (wie im Original) */ .home-grid h2, .home-slider h2 { font-size: 30px; line-height: 1.3; margin: 1.2em 0 0.6em; /* identisch zu h1 – erste Überschrift sitzt pixelgleich */ } /* Publikationsseiten: Namens-Überschriften laut Master-Prompt in #626262 (Ausnahme von der grünen Theme-Farbe) */ h2.pub-name { color: #626262; } /* Weiterfuehrender Link: Dreieck immer hinter dem Text, immer gruen (einheitlich auf Startseite, Themen-, Kurs- und Studienseiten) */ .arrow-link { color: var(--green); text-decoration: none; font-size: 1.05em; } .arrow-link:hover { color: var(--green-light); text-decoration: none; } /* Call-to-Action-Button (wie im alten Theme: #8FBC8F, schwarze Schrift, volle Spaltenbreite, mittig – im Original in einer 1/3-Spalte) */ .cta-button { display: block; background: #8fbc8f; color: #000; text-decoration: none; text-align: center; padding: 13px 20px; border-radius: var(--radius); line-height: 1.3; margin-bottom: 10px; /* auf Mobil (einspaltig, gap 0) sonst aneinanderklebend */ } .cta-button:hover { background: #7dad7d; color: #000; text-decoration: none; } /* Kurse-Seite -------------------------------------------------------------- */ /* Zentrierte Abschluss-Sektion (Teilnehmer-Logowolke) */ .center { text-align: center; } .participants-heading { margin-top: 55px; } /* Startseite: Neon-Symbol zentriert in 1/3 Breite, darunter Kundenlogos */ /* margin-bottom wirkt gegen .kundenlogos (margin-top 20px) durch Margin- Collapsing als max(80, 20) = 80px – oben und unten also gleich viel Luft */ .home-symbol { text-align: center; margin: 80px 0; } .home-symbol img { width: 33%; min-width: 220px; height: auto; } /* Team: zwei Personen je Zeile, alle gleich behandelt. Rundes Portrait wie in der Kontaktbox, darunter Name, Rolle und Kontakt (E-Mail, Telefon) als grauer Text, dann Bio und Projektreferenzen. */ /* scroll-margin, damit der sticky Header (104px) beim Sprung auf /team/#name die Person nicht verdeckt. */ .team-person { margin-bottom: 3.6em; scroll-margin-top: 120px; } .team-person h2 { margin: 0 0 1px; } .team-portrait { width: 150px; max-width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 50%; border: 1px solid var(--border); display: block; margin: 0 0 14px; } .team-meta { color: var(--muted); margin: 0 0 12px; } .team-meta a { color: var(--muted); } .team-meta a:hover { color: var(--green); } /* Projekt-Highlights links, Themen-Verantwortung rechts; bei Personen ohne Themenverantwortung bleibt die rechte Spalte leer. */ .team-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } /* Farbe und Größe über .small, aber halbfett: die Überschrift muss sich von den gleich großen und gleich grauen Bullets darunter absetzen */ .team-lists-heading { margin: 0 0 3px; font-weight: 600; } /* Bullets wie die Überschrift darüber: klein und grau */ .team-refs { margin: 0 0 0 1.1em; padding: 0; font-size: 0.85em; color: var(--muted); } .team-refs li { margin-bottom: 0.2em; } .team-refs a { color: var(--muted); } .team-refs a:hover { color: var(--green); } /* --- Footer ---------------------------------------------------------------- */ .site-footer { margin-top: 70px; border-top: 1px solid #eee; padding: 28px 0 40px; text-align: center; font-size: 14px; } .footer-menu { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 28px; } .footer-menu a { color: var(--text); } .footer-menu a:hover { color: var(--green); } /* --- Kleinere Schrift auf schmalen Fenstern (wie auf der alten Seite) ------ */ @media (min-width: 761px) and (max-width: 959px) { body { font-size: 13px; line-height: 20px; } .menu-item > a, .menu-item > span { font-size: 13px; } } /* --- Mobil: Burger-Menü mit Akkordeon-Untermenüs --------------------------- */ @media (max-width: 760px) { body { font-size: 13px; line-height: 19px; } .menu-item > a, .menu-item > span { font-size: 13px; } .header-inner { flex-wrap: wrap; min-height: 64px; padding-top: 10px; padding-bottom: 10px; } .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: 0; cursor: pointer; } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menü-Panel */ .main-nav { display: none; width: 100%; } body.nav-open .main-nav { display: block; } .main-nav .menu { flex-direction: column; gap: 0; padding-bottom: 10px; } .menu-item { border-top: 1px solid #eee; } .menu-item > a, .menu-item > span { padding: 12px 4px; white-space: normal; } /* Aufklapp-Indikator */ .menu-item.has-sub > a::after, .menu-item.has-sub > span::after { content: "▾"; float: right; color: var(--muted); transition: transform .2s ease; } .menu-item.open > a::after, .menu-item.open > span::after { transform: rotate(180deg); } /* Akkordeon: Untermenüs erst nach Tap */ .submenu { padding: 0 0 10px 12px; border-left: 2px solid #eee; } .menu-item.open > .submenu { display: block; } .submenu li a { padding: 9px 4px; } .submenu-group { padding: 0; } .submenu-groups .submenu-heading { padding: 9px 4px; } .submenu-groups .submenu-group ul li a { padding: 8px 4px 8px 18px; } .submenu-groups .submenu-tail a { padding: 9px 4px 2px; } /* Studien-Menü: zweite Ebene einzeln aufklappbar, sonst wird die Liste auf dem Handy endlos lang */ .submenu-groups .submenu-group > ul { display: none; } .submenu-groups .submenu-group.open > ul { display: block; } .submenu-groups .submenu-heading::after { content: "▾"; float: right; color: var(--muted); transition: transform .2s ease; } .submenu-groups .submenu-group.open > .submenu-heading::after { transform: rotate(180deg); } .lang-switch { border: 0; margin: 0; } /* Inhalt */ .row { grid-template-columns: 1fr; gap: 0; } .col-1, .col-2, .col-3, .col-4, .col-6, .col-8, .col-12 { grid-column: span 1; } /* Kontaktdaten mittig zum linksstehenden Portrait, nicht linksbuendig - die Box wird dafuer auf Portraitbreite begrenzt (gilt ueberall) */ .contact-box { width: 200px; max-width: 100%; text-align: center; } /* Themenseiten: das Verzeichnis steht rechts neben der Kontaktbox statt darunter; oben buendig, deshalb ohne Trennlinie und Anlauf */ .col-3:has(> .seiten-toc) { display: flex; align-items: flex-start; gap: 20px; } .col-3 > .contact-box + .seiten-toc, .col-3 > .seiten-toc { flex: 1 1 auto; min-width: 0; margin-top: 0; border-top: 0; padding-top: 0; } /* Auf sehr schmalen Displays darf die Box schrumpfen (Portrait skaliert mit), damit neben ihr Platz fuer das Verzeichnis bleibt */ .col-3:has(> .seiten-toc) .contact-box { flex: 0 1 200px; min-width: 0; } /* Zwei Ansprechpartner in einer Spalte (/beratung/, /studien/): mobil nebeneinander statt gestapelt */ .contact-stack { display: flex; align-items: flex-start; gap: 20px; } .contact-stack .contact-box { flex: 0 1 200px; min-width: 0; } .contact-stack .contact-box + .contact-box { margin-top: 0; } /* Team: body-line-height ist mobil absolut (19px) und wird von der 21px grossen Namenszeile geerbt - die Zeile waere kleiner als die Schrift. Eigene, einheitenlose Zeilenhoehe plus mehr Luft unter Name und Metaangabe. */ .team-person h2 { line-height: 1.25; margin-bottom: 5px; } .team-meta { margin-bottom: 16px; } /* Einspaltig ist fuer zwei Bullet-Spalten zu schmal */ .team-lists { grid-template-columns: 1fr; } .team-lists .team-refs + .team-refs { margin-top: 0.6em; } } /* --- Studien-Slider ------------------------------------------------------- Startseite, /projekte/ und die neun Themenseiten: eine Studie je Folie, Punkte darunter zum Navigieren. Das Blättern macht der Browser über CSS Scroll Snap, nav.js steuert nur die Punkte. */ .report-slider { margin: 0 0 10px; } .slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; } .slider-track::-webkit-scrollbar { display: none; } .slider-track:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; } /* Folie = volle Spurbreite. Flex-Stretch hält alle Folien gleich hoch, damit beim Wechsel nichts springt. */ .slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; } /* Titelbild und Text stehen im 12er-Raster drei Spalten auseinander (col-3, leere col-1, col-8). Das ergab 131px Abstand; 33px weniger sind die gewuenschten 25%, ohne die Spaltenbreiten und damit die Bildgroesse anzutasten. Nur im mehrspaltigen Layout - mobil stapeln die Spalten. */ @media (min-width: 761px) { .report-slider .slide-text { margin-left: -33px; } } .slide-title { margin: 0 0 2px; } .slide-title a { color: inherit; } .slide-title a:hover { color: var(--green); } .slide-meta { color: var(--muted); margin: 0 0 0.9em; } .slide-blurb { margin: 0 0 1em; } /* Referenz-Slider (/beratung/): eine Folie je Themenfeld, darin drei Projektreferenzen nebeneinander. Der Folientitel ist ein h3 - er benennt das Themenfeld, nicht nur eine Zeile - und ist kein Link, braucht die Themenfarbe also direkt. Abstand nach unten, damit er sich von den Bloecken loest. */ /* Steht ein Slider in einer Spalte statt ueber die volle Breite (/beratung/, /studien/), fressen die 48px Rasterabstaende die Restbreite auf: in einer 619px breiten col-8 bleiben elf Abstaende à 48px = 528px. Deshalb dort ein engeres Raster, und Silbentrennung fuer die schmalen Referenzbloecke. */ .col-8 .report-slider .row { gap: 0 24px; } .col-8 .ref-slide .ref-block p { hyphens: auto; } .ref-slide .slide-title { margin: 0 0 0.9em; } /* Unter der letzten Referenzzeile folgen direkt die Navigationspunkte */ .ref-slide .ref-block { margin-bottom: 0; } /* Kachelbeschriftung: nur auf Mobil, dort wie die Berichtskacheln */ .slide-card-meta { display: none; } /* Blaetter-Navigation, einheitlich fuer alle Slider der Website: Punkte darunter, dazu rechts neben der Spur ein grosser hellgrauer Winkel als einziges Signal, dass sich hier wischen laesst. Keine kleinen Pfeile mehr und keine Zahlen unter den Punkten - die Foliennummer steht nur im aria-label. Der Winkel liegt nicht ueber dem Inhalt, sondern in einer eigenen Spalte neben der Spur, damit er nichts verdeckt. */ .slider-frame { display: flex; align-items: stretch; gap: 6px; } .slider-frame .slider-track { flex: 1; min-width: 0; } .slider-arrow { padding: 0; border: 0; background: none; cursor: pointer; color: var(--border); transition: color .2s ease, opacity .2s ease; } .slider-arrow:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Winkel links und rechts der Spur - eigene Spalten, damit sie nichts verdecken. Gleiche Optik wie die Pfeile in der Kunden-Kachel. */ .slider-arrow-side { flex: 0 0 34px; display: flex; align-items: center; justify-content: center; color: var(--green); opacity: .28; } .slider-arrow-side svg { width: 26px; height: 60%; max-height: 220px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .slider-arrow-side:hover:not(:disabled) { opacity: .6; } .slider-arrow-side:disabled { opacity: .07; cursor: default; } .slider-dots { display: flex; gap: 4px; margin: 10px 0 0 -8px; /* -8px: das 24px-Touchziel um den 8px-Punkt ausgleichen */ padding: 0; list-style: none; } /* 24px-Schaltfläche als Touch-Ziel, sichtbarer Punkt 8px */ .slider-dots button { display: block; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; } .slider-dots button::before { content: ""; display: block; width: 8px; height: 8px; margin: 8px auto; border-radius: 50%; background: var(--border); transition: background .2s ease; } .slider-dots button[aria-selected="true"]::before { background: #262626; } .slider-dots button:hover::before { background: #8a8a8a; } .slider-dots button[aria-selected="true"]:hover::before { background: #262626; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .slider-track { scroll-behavior: auto; } } @media (max-width: 760px) { /* Kleines Display: Titelbild links, daneben die zwei Metadatenzeilen im Format der Berichtskacheln. Blurb und CTA entfallen. */ .slide-text { display: none; } .slide-card-meta { display: block; margin-top: 0; flex: 1 1 auto; min-width: 0; } /* Linksbuendig wie der uebrige Seiteninhalt - zentriert wirkte die Kachel als einziges Element der Seite eingemittet. Die -8px an den Punkten gleichen das 24px-Touchziel um den 8px-Punkt aus; ohne sie stuende der erste Punkt gegenueber der Textkante eingerueckt. */ .slide .col-3 { display: flex; align-items: flex-start; gap: 14px; } .slide .col-3 > a { flex: 0 0 180px; max-width: 48%; } /* Auf dem Handy wischt man ohnehin; Winkel und Pfeile kosten dort nur Breite */ .slider-arrow-side, .slider-arrow-in { display: none; } /* Startseite einspaltig */ .prosa { grid-template-columns: 1fr; row-gap: 1.6em; } .prosa h2 { margin-top: 0; } /* Randspalte (Kurse, Studien) mobil nebeneinander statt gestapelt */ .rail { border-left: 0; padding-left: 0; margin-top: 2.4em; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; } .rail-group + .rail-group { margin-top: 0; } .topic-tiles { grid-template-columns: repeat(2, 1fr); } .kunden-kachel { padding: 16px 18px 18px; } .kachel-body { grid-template-columns: 1fr; } .kachel-text { border-left: 0; padding: 0; margin-top: 1.1em; } .logo-cloud { gap: 16px 22px; padding: 0; min-height: 0; max-width: none; justify-content: flex-start; } .logo-cloud img { transform: none !important; } .logo-cloud img.xl { height: 48px; } .logo-cloud img.gross { height: 38px; } .logo-cloud img.mittel { height: 29px; } .logo-cloud img.klein { height: 23px; } .kontakt-text { margin-bottom: 1.6em; } /* Kontaktboxen der Startseite mobil nebeneinander; der Text darueber ueber die volle Breite */ .kontakt-row { grid-template-columns: 1fr 1fr; gap: 0 20px; } .kontakt-row .kontakt-text { grid-column: span 2; } h2.section::before { left: 0; right: 0; } } /* --- Kursseite (/kurse/, /en/courses/) ------------------------------------ Eine Seite fuer alle Kurse. Je Kurs eine Kachel: Termin und Kurssprache klein/grau, Titel gruen und auf die Kursbroschuere verlinkt, Beschreibung, darunter die Aktionszeile und der Anmelde-Knopf. */ .intro { margin-bottom: 1.4em; } /* Eckdaten als Label/Wert-Paare; die Label-Spalte ist so breit wie das laengste Label */ .facts-list { display: grid; grid-template-columns: max-content 1fr; column-gap: 28px; row-gap: 4px; margin: 0 0 1.4em; } .facts-list dt { color: var(--muted); } .facts-list dd { margin: 0; } .course-card { margin-bottom: 1.2em; } .course-card .course-meta { margin: 0 0 2px; } .course-card h2 { margin: 0 0 0.5em; } .course-card h2 a { color: inherit; } /* Titel verlinkt die Kursbroschuere */ .course-card p { margin: 0 0 0.6em; } /* Aktionszeile: Umschalter und Broschuere nebeneinander. Beide liegen im , damit die aufgeklappte Liste darunter ueber die volle Kachel- breite laeuft. display:contents auf
geht nicht - Chrome schiebt den Inhalt in einen eigenen Kasten. Ein Klick auf den Broschueren-Link klappt nichts auf, das macht nur der Umschalter. */ .course-details { margin: 0; } .course-details > summary { display: flex; flex-wrap: wrap; column-gap: 26px; align-items: baseline; list-style: none; cursor: pointer; } .course-details > summary::-webkit-details-marker { display: none; } .course-details > summary::marker { content: ""; } .course-details > summary .arrow-link { white-space: nowrap; } .course-toggle { color: var(--green); white-space: nowrap; } .course-toggle::after { content: "\25B8"; display: inline-block; margin-left: 6px; transition: transform .15s ease; } .course-details[open] .course-toggle::after { transform: rotate(90deg); } .course-details > summary:hover .course-toggle { color: var(--green-light); } /* Kursinhalte in normaler Schrift und Textfarbe: wer aufklappt, will lesen */ .course-details > ul { margin: 0.7em 0 0 1.1em; padding: 0; } .course-details > ul li { margin-bottom: 0.2em; } /* Anmelden hervorgehoben: kompakter Knopf, Farben wie die grossen CTA-Buttons */ .cta-inline { display: inline-block; background: #8fbc8f; color: #000; padding: 3px 14px; border-radius: var(--radius); line-height: 1.5; white-space: nowrap; } .cta-inline:hover { background: #7dad7d; color: #000; text-decoration: none; } @media (max-width: 760px) { .facts-list { grid-template-columns: 1fr; row-gap: 0; } .facts-list dd { margin-bottom: 0.5em; } }