/* =========================================================================
   FLUIDTIME – fluidtime.com
   Zentrales Stylesheet für alle Seiten (DE + EN).
   Farben, Schriftgrößen und Abstände zentral über die Variablen in :root anpassen.
   ========================================================================= */

/* ---------- Schriften (lokal, kein externer Aufruf) ---------- */
@font-face { font-family: "Heebo"; font-weight: 100; font-style: normal; font-display: swap; src: url("../fonts/heebo-thin.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/heebo-light.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/heebo-regular.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/heebo-bold.woff2") format("woff2"); }   /* echter Bold-Schnitt für Überschriften und Fettes (vorher vom Browser künstlich erzeugt) */

/* ---------- Design-Variablen ---------- */
:root {
  /* Alle Farben stehen nur hier; alles andere verweist darauf (brand.md, Abschnitt 1). */
  /* Neutraltöne (brand.md 1.2) */
  --black: #000000;
  --grey-dark: #373737;      /* Dunkelgrau */
  --grey-mid: #686868;       /* Mittelgrau */
  --grey-line: #e1e1e1;      /* Linie */
  --grey-light: #ededed;     /* Hellgrau */
  --grey-soft: #fafafa;      /* Fläche grau */
  --white: #ffffff;

  --ink: var(--black);       /* Überschriften & Text */
  --text: var(--black);
  --muted: var(--grey-mid);  /* Fußzeile, Metadaten */
  --link: var(--blue-text);  /* Links im Fließtext */
  --link-hover: #003d5c;
  --btn: var(--black);       /* Haupt-Button */
  --line: var(--grey-line);
  --soft: var(--grey-soft);  /* helle Flächen, Fußzeile */
  /* Farbsystem aus Figma (brand.md 1.1): je Farbe Fläche, Tag, Überschrift/Tag-Schrift, Fließtext */
  --panel-blue: #e4f0fd;   --tag-blue-bg: #c2dbfb;   --blue-text: #005d8c;   --blue-text-secondary: #4d698e;
  --panel-red: #fae4e2;    --tag-red-bg: #fbc6c2;    --red-text: #a43227;    --red-text-secondary: #975050;
  --panel-yellow: #fff6d9; --tag-yellow-bg: #f3db8d; --yellow-text: #775b00; --yellow-text-secondary: #7d631d;
  --panel-green: #daf6de;  --tag-green-bg: #9cdda4;  --green-text: #005d00;  --green-text-secondary: #377233;
  --panel-grey: var(--grey-soft); --tag-grey-bg: var(--grey-light); --grey-text: var(--grey-dark); --grey-text-secondary: var(--grey-mid);
  --tag-blue-fg: var(--blue-text);
  --tag-red-fg: var(--red-text);
  --tag-yellow-fg: var(--yellow-text);
  --tag-green-fg: var(--green-text);
  --tag-grey-fg: var(--grey-text);
  /* Akzentfarben (brand.md 1.3): Referenz-Karten Startseite, Symposium-Button */
  --accent-blue: #007aff;  --accent-blue-dark: #003d7e;  --accent-green: #34c759;
  /* Hinweisleiste (brand.md 11): gelbe Farbreihe aus 1.1 */
  --notice-bg: var(--panel-yellow); --notice-fg: var(--yellow-text-secondary);
  /* Sonderfarben Symposium-Seiten und bisherige Einzelfarben (brand.md 1.4) */
  --karriere-green: #d8ffdc;
  --team-blue: #7bb0e7;
  --sym-purple: #533fa1;  --sym-purple-dark: #3f198c;  --sym-magenta: #c046b4;  --sym-berry: #91485c;
  --sym-navy: #3f4f7f;    --sym-teal: #5f8789;         --sym-sage: #94b9be;
  --sym-cyan: #1498c0;    --sym-ocean: #219ebc;        --sym-blue: #3685b2;     --sym-cyan-light: #60d9e6;

  --container: 1310px;
  --gutter: 50px;            /* Seitenrand innen */
  --gap: 6%;                 /* Spaltenabstand */
  --section-pad: 64px;       /* Abschnitt oben und unten: 64 + 64 = 128 px zwischen zwei Abschnitten, auf allen Seiten gleich (brand.md 3) */
  --radius: 24px;
  --header-h: 90px;

  /* Schriftgrößen (Desktop) */
  --fs-h1: 64px;
  --fs-h2: 34px;
  --fs-h3: 26px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --font: "Heebo", Helvetica, Arial, sans-serif;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 10px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }   /* sanftes Scrollen nur ohne „Bewegung reduzieren“ */
body { margin: 0; font-family: var(--font); font-weight: 300; font-size: 18px; line-height: 29.7px; color: var(--text); background: var(--white); }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
p { font-size: var(--fs-body); margin: .85em 0; }
ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin-bottom: .25em; }
/* Aufzählungen im Inhalt wie WordPress: 18 px, eingerückt, 3 px Abstand je Punkt */
main :is(ul, ol):not([class]) { margin: 0 0 20px 7px; padding-left: 0; }
main :is(ul, ol):not([class]) > li { margin: 0 0 0 18px; padding: 3px 0; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 700; color: var(--ink); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em; }   /* große Überschriften leicht enger (brand.md 2) */
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-body); }
h1, h2, h3, h4 { overflow-wrap: break-word; }   /* lange Wörter umbrechen statt aus der Fläche zu laufen (WCAG 1.4.10); wirkt nur, wenn ein Wort nicht in die Zeile passt */
hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
td, th { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
blockquote { margin: 0 0 1em; padding-left: 20px; border-left: 3px solid var(--line); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 0 20px 10px 0; }
.alignright { float: right; margin: 0 0 10px 20px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #000; color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }   /* 1310 px inkl. Seitenrand = 1210 px Inhalt wie WordPress */
.container .container { padding: 0; max-width: none; }
.section { padding: var(--section-pad) 0; background-repeat: no-repeat; }
.section--small { --section-pad: 20px; }
.section--large { --section-pad: 70px; }
.section--huge { --section-pad: 130px; }
.section--flush { padding: 0; }
.section--plain { padding: 0; }
.section--plain > .container > .spacer:only-child { display: none; }
.panel { border-radius: var(--radius); padding: 64px; background: var(--panel-grey); }
.panel--blue { background: var(--panel-blue); }
.panel--red { background: var(--panel-red); }
.panel--yellow { background: var(--panel-yellow); }
.panel--green { background: var(--panel-green); }
.panel--grey { background: var(--panel-grey); }
.spacer { display: block; }

/* Spalten (wie im bisherigen Theme: 6 % Abstand) */
.cols { display: flex; flex-wrap: wrap; align-items: flex-start; }
.cols + .cols, .cols + *, * + .cols { margin-top: 0; }
.col { min-width: 0; margin-left: var(--gap); }
.col:first-child { margin-left: 0; }
.col > :last-child { margin-bottom: 0; }
.col-1-1 { width: 100%; margin-left: 0; }
.col-1-2 { width: 47%; }
.col-1-3 { width: 29.333%; }
.col-2-3 { width: 64.666%; }
.col-1-4 { width: 20.5%; }
.col-3-4 { width: 73.5%; }
.col-1-5 { width: 15.2%; }
.col-2-5 { width: 36.4%; }
.col-3-5 { width: 57.6%; }
.col-4-5 { width: 78.8%; }
.cols--nogap .col { margin-left: 0; }
.cols--nogap .col-1-2 { width: 50%; } .cols--nogap .col-1-3 { width: 33.333%; } .cols--nogap .col-2-3 { width: 66.666%; }
.cols--nogap .col-1-4 { width: 25%; } .cols--nogap .col-3-4 { width: 75%; } .cols--nogap .col-1-5 { width: 20%; }
.cols--nogap .col-2-5 { width: 40%; } .cols--nogap .col-3-5 { width: 60%; } .cols--nogap .col-4-5 { width: 80%; }
.cols--equal { align-items: stretch; }
.cols--equal > .col--middle { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.cols--equal > .col--bottom { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.col.bg-photo { background-size: cover; min-height: 400px; }
.col--middle { align-self: center; }
.col--bottom { align-self: flex-end; }
.cols + .cols { margin-top: 50px; }
.cols + .spacer, .spacer + .cols { margin-top: 0; }

/* ---------- Überschriften-Bausteine ---------- */
.heading { padding-bottom: 10px; }
.heading h1, .heading h2, .heading h3, .heading h4, .heading h5, .heading h6 { margin: 0; color: inherit; }
.heading { color: var(--ink); }
.eyebrow { margin: 0; font-size: 15px; }
.heading .eyebrow + :is(h1, h2, h3, h4, h5, h6) { padding-top: 24px; }   /* Abstand Etikett → Überschrift wie WordPress */
.tag { display: inline-block; padding: 7px 10px; border-radius: 8px; font-weight: 700; font-size: 14px; line-height: 1.4; }
.tag--blue { background: var(--tag-blue-bg); color: var(--tag-blue-fg); }
.tag--green { background: var(--tag-green-bg); color: var(--tag-green-fg); }
.tag--red { background: var(--tag-red-bg); color: var(--tag-red-fg); }
.tag--yellow { background: var(--tag-yellow-bg); color: var(--tag-yellow-fg); }
.tag--grey { background: var(--tag-grey-bg); color: var(--tag-grey-fg); }
.subheading { margin-top: 8px; font-size: 18px; }
.subheading p { margin: 0; }
.text { margin-bottom: 0; }
.text--columns { column-count: 2; column-gap: 40px; }
.text + .text, .heading + .text { margin-top: 0; }
.text ul li, .text ol li { margin-bottom: 0; }
.spacer + .heading { margin-top: 50px; }   /* Überschrift nach Abstandshalter wie WordPress */
.text :is(h2, h3, h4, h5, h6) { margin: 1.5em 0 8px; }   /* Zwischenüberschriften im Text (z. B. AGB) */
.text > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 3px 0 5px; }
.btns--center { justify-content: center; }
.btns--right { justify-content: flex-end; }
.btn { --bg: var(--grey-dark); --fg: var(--white); --bd: var(--bg); --bw: 1px; --br: 3px;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px 10px; font-family: var(--font); font-size: 14px; font-weight: 400; line-height: 1.2;
  color: var(--fg); background: var(--bg); border: var(--bw) solid var(--bd); border-radius: var(--br); text-decoration: none; cursor: pointer; transition: all .3s ease-in-out; }
.btn:hover { color: var(--hfg, var(--fg)); background: var(--hbg, var(--bg)); opacity: .9; text-decoration: none; }
.btn--light { --bg: var(--grey-soft); --fg: var(--black); --bd: var(--black); }
.btn--small { padding: 9px 12px 7px; font-size: 13px; }
.btn--x-large { padding: 20px 50px 18px; font-size: 18px; }
.btn--symposium { --bg: var(--accent-blue); --bd: var(--accent-blue); background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-green) 100%); border-radius: 9px; font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,.36); }
.btn--pill { --bg: #000; --fg: #fff; --bd: #000; --bw: 2px; --br: 100px; padding: 9px 15px; font-weight: 300; }
.btn--pill:hover { --hbg: #fff; --hfg: #000; opacity: 1; }
/* Feste Button-Varianten (ersetzen die früheren Einzelklassen btn-bg-*, btn-bd-*, btn-fg-*, btn-hbg-*, btn-hfg-*) */
.btn.btn--round-dark { --bg: var(--black); --fg: var(--white); --bd: var(--black); --br: 100px; font-size: 16px; }
.btn.btn--round-dark:hover { background: transparent; color: var(--black); border-color: var(--black); opacity: 1; }
.btn.btn--round-invert { --bg: var(--black); --fg: var(--white); --bd: var(--black); --br: 100px; --hbg: var(--white); --hfg: var(--black); font-size: 16px; }
.btn.btn--round-light { --bg: var(--white); --fg: var(--black); --bd: var(--black); --br: 100px; --hbg: var(--black); --hfg: var(--white); font-size: 16px; }
.btn.btn--round-blue { --bg: var(--white); --fg: var(--link); --bd: var(--link); --br: 100px; font-size: 16px; }
.btn.btn--round-blue:hover { background: var(--black); color: var(--white); border-color: var(--white); opacity: 1; }
/* Symposium-Seiten (bisherige Farben, Werte in :root) */
.btn.btn--purple { --bg: var(--sym-purple); --fg: var(--white); --bd: var(--sym-purple); --hbg: var(--sym-purple-dark); --hfg: var(--white); }
.btn.btn--magenta { --bg: var(--sym-magenta); --fg: var(--white); --bd: var(--sym-magenta); --hbg: var(--sym-purple); --hfg: var(--white); }
.btn.btn--navy { --bg: var(--sym-navy); --fg: var(--white); --bd: var(--sym-navy); }
.btn.btn--teal { --bg: var(--sym-teal); --fg: var(--white); --bd: var(--sym-teal); }
.btn.btn--berry { --bg: var(--sym-berry); --fg: var(--white); --bd: var(--sym-berry); }
.btn.btn--white-cyan { --bg: var(--white); --bd: var(--white); --fg: var(--sym-cyan); }
.btn.btn--white-sage { --bg: var(--white); --bd: var(--white); --fg: var(--sym-sage); }
.btn.btn--white-purple { --bg: var(--white); --bd: var(--white); --fg: var(--sym-purple); --hbg: var(--sym-magenta); --hfg: var(--white); }
.btn .icon { font-size: 1em; }
.btn--icon-only { padding: 10px 12px; }

/* ---------- Icons ---------- */
.icon { display: inline-block; line-height: 1; font-style: normal; speak: never; }
/* Symbole als SVG (vorher Icon-Schriften): Breite und Höhe wie das frühere Schriftzeichen, Farbe = Schriftfarbe */
.icon.icon--glyph, .iconbox > .icon.icon--glyph { line-height: 0; }
.icon--glyph svg { fill: currentColor; vertical-align: -0.15em; overflow: visible; }
.icon--svg svg { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }
.fonticon { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 40px; line-height: 1; }
.fonticon__caption { font-size: 14px; }
.fonticon-wrap { margin-bottom: 10px; }
.fonticon-wrap--center { text-align: center; }
.fonticon-wrap--right { text-align: right; }

/* ---------- Bilder ---------- */
.figure { margin: 0; }
.figure img { display: inline-block; }
.figure--center { text-align: center; }
.figure--left { text-align: left; }
.figure--right { text-align: right; }
.figure figcaption { font-size: var(--fs-small); color: var(--muted); margin-top: 6px; }
.border-radius-24 img { border-radius: 24px; }
.figure--karriere img { width: 360px; border-radius: 24px; }
.figure--round img { border-radius: 50%; }
.video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 20px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Icon-Boxen ---------- */
.iconbox { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 0; }
.iconbox > .icon { flex: 0 0 auto; font-size: 40px; line-height: 1; color: var(--ink); }
.iconbox--top { flex-direction: column; align-items: center; text-align: center; }
.iconbox--right { flex-direction: row-reverse; text-align: right; }
.iconbox__title { font-size: var(--fs-h4); margin-bottom: .4em; }
.iconbox__body > :last-child { margin-bottom: 0; }
.iconbox__body h3 { margin-bottom: .3em; }
.successstory .iconbox__body, .successstory-ubigo .iconbox__body, .successstory-aarhus .iconbox__body,
.successstory-domino .iconbox__body, .successstory-moves .iconbox__body { padding: 20px; box-shadow: 0 0 10px 4px rgba(0,0,0,.2); }

/* ---------- Tool-Karten und Abschluss-Panel (Mobility Consulting Tools) ---------- */
/* Fläche, Überschrift und Text aus einer Farbreihe (brand.md 1.1), Linien-Icon in Überschriftsfarbe, ohne Schatten */
.tool-col { display: flex; flex-direction: column; }
.tool-card { --tc-bg: var(--panel-grey); --tc-head: var(--grey-text); --tc-text: var(--grey-text-secondary); flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; padding: 48px; border-radius: var(--radius); background: var(--tc-bg); color: var(--tc-text); }
.tool-card--blue { --tc-bg: var(--panel-blue); --tc-head: var(--blue-text); --tc-text: var(--blue-text-secondary); }
.tool-card--green { --tc-bg: var(--panel-green); --tc-head: var(--green-text); --tc-text: var(--green-text-secondary); }
.tool-card > .icon { font-size: 40px; line-height: 0; color: var(--tc-head); }
.tool-card__title { margin: 8px 0 0; font-size: var(--fs-h4); color: var(--tc-head); }
.tool-card > p { margin: 0; }
.tool-next { display: flex; justify-content: center; margin-top: 16px; font-size: 32px; line-height: 0; color: var(--grey-mid); }   /* Pfeil zu den Reitern darunter */
.cta-panel { padding: 64px; border-radius: var(--radius); background: var(--panel-blue); color: var(--blue-text-secondary); text-align: center; }   /* Aufruf mit Button in Inhaltsbreite, blaue Farbreihe */
.cta-panel > .btns { margin-top: 32px; }
@media (max-width: 767px) { .tool-card, .cta-panel { padding: 32px 22px; border-radius: 18px; } }

/* ---------- Farb-Kästen, Kacheln, Foto-Kacheln, blaue Abschnitte (Nov. 2026) ----------
   Ersetzen die WordPress-Einzelklassen bg-panel-… r-24 p-48 / p-64 / r-12 p-20 / r-24 p-20 und die Farbklassen c-… an Überschrift und Text.
   Werte 1:1 wie vorher (auch am Handy), Farben aus einer Farbreihe (brand.md 1.1). */
.card-panel { --cp-bg: var(--panel-grey); --cp-head: var(--grey-text); --cp-text: var(--grey-text-secondary); padding: 48px; border-radius: var(--radius); background: var(--cp-bg); color: var(--cp-text); }
.card-panel--blue { --cp-bg: var(--panel-blue); --cp-head: var(--blue-text); --cp-text: var(--blue-text-secondary); }
.card-panel--red { --cp-bg: var(--panel-red); --cp-head: var(--red-text); --cp-text: var(--red-text-secondary); }
.card-panel--grey { --cp-bg: var(--panel-grey); --cp-head: var(--grey-text); --cp-text: var(--grey-text-secondary); }
.card-panel--lg { padding: 64px; }   /* großer Innenabstand (Logo-Kasten Startseite) */
.card-panel > .heading { color: var(--cp-head); }
.tile { border-radius: 12px; background: var(--panel-grey); }   /* Kacheln „Einsatzbereiche“ (Startseite) */
.bg-photo--tile { padding: 20px; border-radius: var(--radius); }   /* Foto als gerundete Kachel (Über uns, Karriere) */
.section--blue { background-color: var(--panel-blue); }
/* Kartenüberschriften auf der Startseite (Vorteile, Einsatzbereiche, Schritte): 16 pt, Zeilenhöhe und Abstand wie bisher (vorher <span class="fs-16pt"> in einer H3 mit 26 px) */
:where(.page-home, .page-en) :is(#benefits .iconbox__body, #use-cases .tile__text) > h3, :where(.page-home, .page-en) .step__title { font-size: 16pt; line-height: 29.9px; }
:where(.page-home, .page-en) #benefits .iconbox__body > h3 { margin-bottom: 7.8px; color: var(--blue-text); }
:where(.page-home, .page-en) #use-cases .tile__text > h3 { margin-bottom: 13px; }

/* ---------- FAQ / Aufklapper ---------- */
.faqs { margin-top: 10px; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 12px 10px 12px 36px; font-size: 18px; color: #373737; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; left: 10px; top: 50%; width: 12px; height: 2px; background: currentColor; transition: transform .2s; }
.faq summary::after { transform: rotate(90deg); }
.faq[open] summary::after { transform: rotate(0deg); }
.faq__body { padding: 0 36px 16px; color: #373737; }
.panel .faq { border-color: var(--grey-light); }

/* ---------- Logos ---------- */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px 40px; align-items: center; margin-top: 20px; }
.logos__item { text-align: center; }
.logos__item img { max-height: 70px; width: auto; filter: grayscale(0); }

/* ---------- Karten (Beiträge) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card { background: var(--white); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.card__img img { width: 100%; aspect-ratio: 495 / 400; object-fit: cover; }
.card__body { padding: 16px 0; }
.card__title { font-size: 20px; margin: 4px 0 8px; }
.card__title a { color: var(--ink); }
.card__meta { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------- Galerie (horizontal) ---------- */
.hgallery { position: relative; margin: 10px 0 20px; }
.hgallery__track { display: flex; gap: 1px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.hgallery__item { flex: 0 0 auto; scroll-snap-align: start; }
.hgallery__item img { height: 303px; width: auto; max-width: none; object-fit: cover; }
.hgallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 60px; border: 0; background: rgba(0,0,0,.45); color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.hgallery__nav.prev { left: 0; } .hgallery__nav.next { right: 0; }

/* ---------- Team & Zahlen ---------- */
.team { text-align: center; margin-bottom: 20px; }
.team img { border-radius: 50%; margin-bottom: 10px; }
.team__name { font-size: 18px; margin: 0; font-weight: 700; line-height: 1.15; color: var(--ink); }   /* Namen als Absatz statt H3 (Nov. 2026), Aussehen wie vorher */
.team__job { font-size: var(--fs-small); color: var(--muted); }
.stat { text-align: center; }
.stat--left { text-align: left; }
.stat__num { display: block; font-size: 48px; line-height: 1.1; font-weight: 700; margin-bottom: 6px; }

/* ---------- Tabs ---------- */
.tabsection { padding: 30px 0; }
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 30px; }
.tab { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 20px; font: inherit; font-size: 16px; cursor: pointer; color: var(--ink); }
.tab .icon { font-size: 30px; }
.tab[aria-selected="true"] { border-bottom-color: currentColor; font-weight: 700; }

/* ---------- Raster & Icon-Liste ---------- */
.grid { display: flex; flex-wrap: wrap; }
.grid__cell { padding: 30px; }
.grid__cell--1-2 { width: 50%; } .grid__cell--1-3 { width: 33.333%; } .grid__cell--2-3 { width: 66.666%; } .grid__cell--1-4 { width: 25%; } .grid__cell--3-4 { width: 75%; } .grid__cell--1-1 { width: 100%; }
.iconlist { list-style: none; padding: 0; }
.iconlist li { display: flex; gap: 16px; margin-bottom: 20px; }
.iconlist .icon { font-size: 28px; }
.iconlist h4 { margin-bottom: 4px; }
.iconlist__name { display: block; margin-bottom: 4px; font-size: var(--fs-h4); font-weight: 700; line-height: 1.15; color: var(--ink); }   /* Listeneintrag im Stil einer H4, ohne Überschrift zu sein (Stadtwerke) */

/* ---------- Codeblöcke (individuelles HTML) ---------- */
.code { margin-bottom: 0; }

/* ---------- Hinweisleiste oben (Nov. 2026, brand.md 11): Etikett, Datum, Text, runder Button, Schließen ---------- */
.notice-bar { background: var(--notice-bg); color: var(--notice-fg); border-bottom: 1px solid var(--tag-yellow-bg); font-size: var(--fs-small); line-height: 1.4; }
.notice-bar .container { position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 8px calc(var(--gutter) + 40px); }   /* Inhalt mittig, Schließen-Kreuz rechts am Inhaltsrand */
.notice-bar__msg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; flex: 0 1 auto; min-width: 0; margin: 0; font-size: var(--fs-small); line-height: 1.4; }
.notice-bar__tag { padding: 4px 8px; border-radius: 8px; background: var(--tag-yellow-bg); color: var(--yellow-text); font-weight: 700; line-height: 1.3; }
.notice-bar__date { color: var(--yellow-text); }
.notice-bar__btn { flex: 0 0 auto; padding: 8px 16px; border: 1px solid var(--black); border-radius: 100px; background: var(--black); color: var(--white); font-size: var(--fs-small); font-weight: 400; line-height: 1.2; white-space: nowrap; transition: background-color .3s, color .3s; }
.notice-bar__btn:hover { background: transparent; color: var(--black); text-decoration: none; }
.notice-bar__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; position: absolute; right: calc(var(--gutter) - 8px); top: 50%; transform: translateY(-50%); border: 0; border-radius: 50%; background: none; color: var(--yellow-text); cursor: pointer; transition: background-color .2s; }
.notice-bar__close:hover { background: var(--tag-yellow-bg); }
.notice-bar__btn:focus-visible, .notice-bar__close:focus-visible { outline: 2px solid var(--yellow-text); outline-offset: 2px; }
.notice-bar__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.notice-bar.is-hidden { display: none; }

/* ---------- Kopfbereich ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: 24px; height: var(--header-h); }   /* gleiche Breite wie der Inhalt: Logo und Kontakt-Button fluchten mit den Abschnitten (Nov. 2026) */
.site-logo { flex: 0 0 auto; display: block; }
.site-logo img { height: 90px; width: auto; display: block; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.main-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.main-nav li { position: relative; margin: 0; }
.main-nav > ul > li > a { display: block; padding: 8px 13px; color: #000; font-size: 14px; font-weight: 400; }
.main-nav > ul > li > a:hover, .main-nav > ul > li.is-active > a { color: #4c4948; text-decoration: none; }
.main-nav > ul > li.is-active > a { color: #4c4948; font-weight: 400; }   /* aktiver Menüpunkt wie beim Darüberfahren (9 : 1); vorher #9c9796 mit 2,9 : 1 zu blass (WCAG 1.4.3, Nov. 2026) */
.main-nav .nav-cta { margin-left: 10px; }
.main-nav > ul > li.nav-cta > a.btn { font-size: 14px; color: var(--fg); padding: 9px 15px; }
.main-nav > ul > li.nav-cta > a.btn:hover { color: #000; background: #fff; }
.sub-toggle { display: none; }
.main-nav .sub { list-style: none; margin: 0; padding: 8px 0; position: absolute; left: 0; top: 100%; min-width: 200px; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(0,0,0,.08); display: none; }
.main-nav li:hover > .sub, .main-nav li:focus-within > .sub, .main-nav li.open > .sub { display: block; }
.main-nav .sub a { display: block; padding: 8px 16px; color: #000; font-size: 14px; }
.main-nav .sub a:hover { background: var(--soft); text-decoration: none; }
.langs { display: flex; align-items: center; gap: 10px; }
.lang { display: inline-flex; align-items: center; gap: 4px; color: var(--grey-mid); font-size: 12px; }
.lang img { opacity: .55; }   /* Flagge der anderen Sprache blasser; Schrift in festem Mittelgrau statt 55 % Deckkraft (Nov. 2026) */
.lang span { display: none; }
.lang.is-current, .lang:hover { color: var(--black); text-decoration: none; }
.lang.is-current img, .lang:hover img { opacity: 1; }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; height: 2px; background: #000; margin: 6px 0; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Fußbereich ---------- */
.site-footer { background: var(--soft); color: var(--muted); font-size: 14px; line-height: 1.7; }
.site-footer p { font-size: 14px; margin: 0 0 8px; }
.site-footer a { color: var(--grey-dark); }
.site-footer a:hover { color: var(--black); }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px 48px; padding-top: 64px; padding-bottom: 48px; }
.footer-logo { display: inline-block; margin-bottom: 16px; }
.footer-logo img { height: 48px; width: auto; display: block; mix-blend-mode: multiply; }   /* weißer Bildhintergrund verschwindet auf der grauen Fläche */
.footer-title { margin: 0 0 16px; font-weight: 700; color: var(--black); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin: 0 0 8px; padding: 0; }
.footer-bottom { border-top: 1px solid var(--line); }
.footer-bottom .container { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 16px; padding-bottom: 16px; }
.copyright { margin: 0; }
.site-footer .copyright { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--black); }
.footer-legal .cc-open { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }   /* „Cookie-Einstellungen“: Button im Aussehen der Links daneben */
.footer-legal .cc-open:hover { color: var(--black); text-decoration: underline; }
.social { display: flex; gap: 16px; }
.social a { color: var(--grey-dark); display: inline-flex; }
.social a:hover { color: var(--black); }
.social svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 989px) { .footer-main { grid-template-columns: 1fr 1fr; } }

/* ---------- Cookie-Hinweis (Nov. 2026): Aufbau wie fluidlife.app, Gestaltung nach brand.md ----------
   Weiße Karte unten links (Handy: unten über die volle Breite), Einwilligung je Zweck (hier nur Statistik).
   Solange er offen ist, bekommt die Seite unten Platz (--cc-h, gesetzt von site.js), damit er nichts verdeckt. */
.cc { position: fixed; left: 24px; bottom: 24px; z-index: 200; width: min(480px, calc(100% - 48px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: 24px; border: 1px solid var(--grey-line); border-radius: var(--radius); background: var(--white); color: var(--black); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.cc[hidden], .cc [hidden] { display: none; }
.cc p { margin: 0 0 8px; font-size: var(--fs-small); line-height: 1.5; }
.cc .cc-t { font-size: var(--fs-body); font-weight: 700; }
.cc a { color: var(--link); text-decoration: underline; }
.cc-set { margin: 16px 0 0; padding: 0; border: 0; font-size: var(--fs-small); line-height: 1.5; }
.cc-set legend { margin-bottom: 8px; padding: 0; font-weight: 700; }
.cc-cat { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--grey-line); cursor: pointer; }
.cc-cat input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--black); }
.cc-cat b { display: block; color: var(--black); }
.cc-cat span { color: var(--grey-dark); }
.cc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
html.has-cc body { padding-bottom: var(--cc-h, 0px); }
@media (max-width: 767px) {
  .cc { left: 0; right: 0; bottom: 0; width: auto; max-height: 80vh; padding: 20px 7.5%; border-width: 1px 0 0; border-radius: 18px 18px 0 0; }
}

/* ---------- Startseite: Hero ---------- */
/* ---------- Startseite: Hero (Slogan links, Illustration rechts) ---------- */
/* wie WordPress: Illustration groß rechts hinter dem Text, Text über 3/5 der Breite; am Handy ohne Bild */
.hero { position: relative; padding: 0; margin-top: 78px; overflow: hidden; }
.hero .container { position: static; }
.hero__cols { display: grid; grid-template-columns: minmax(0, 57.6fr) minmax(0, 42.4fr); column-gap: 32px; align-items: center; min-height: 568px; }
.hero__cols > .hero__text { width: auto; margin: 0; align-self: center; }
.hero__text .eyebrow { margin-bottom: 5px; }
.hero__text .eyebrow + h1 { padding-top: 0; }
.hero__text h1 { margin-bottom: 0; }
.hero__text .heading { padding-bottom: 0; }
.hero__text .heading + .heading { margin-top: 60px; }
.hero__text .text { margin-top: 10px; }
.hero__text .spacer { display: none; }
.hero__text .btns { margin-top: 24px; gap: 12px; }
/* Illustration (freigestellt, rechts angeschnitten): rechte Spalte, reicht wie bei WordPress bis an den rechten Bildschirmrand, damit die Schnittkante dort verschwindet; höchstens 1000 px */
.hero__media { position: relative; align-self: stretch; width: auto; margin: 0 calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter))) 0 -32px; }
.hero__media img { position: absolute; right: 0; bottom: 0; display: block; width: 100%; max-width: 1000px; height: auto; margin: 0; transform: translateY(20%); }   /* Bild bestimmt die Höhe des Heros nicht mehr (die kommt vom Text); unten um 20 % seiner Höhe hinter den blauen Abschnitt geschoben wie bei WordPress */
/* Tablet und Handy: nur Text, ohne Illustration */
@media (max-width: 989px) {
  .hero__cols { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__media { display: none; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .site-header .main-nav > ul > li > a { padding: 8px 10px; }
}
@media (max-width: 989px) {
  /* Tablet wie WordPress: Logo kleiner, normales Menü bleibt bis 768 px */
  .site-header .container { padding: 0 16px; gap: 12px; }
  .site-logo img { height: 52px; }
  .main-nav { gap: 10px; }
  .main-nav > ul > li > a { padding: 8px 10px; }
}
@media (max-width: 767px) {
  .nav-toggle { display: block; }
  .main-nav { position: absolute; left: 0; right: 0; top: 100%; display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 10px 20px rgba(0,0,0,.08); padding: 10px var(--gutter) 20px; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .main-nav.open { display: flex; }
  .main-nav > ul { flex-direction: column; align-items: stretch; }
  .main-nav > ul > li { border-bottom: 1px solid var(--grey-light); display: flex; flex-wrap: wrap; align-items: center; }
  .main-nav > ul > li > a { padding: 14px 0; font-size: 16px; flex: 1; }
  .main-nav .sub { position: static; display: none; width: 100%; border: 0; box-shadow: none; padding: 0 0 10px 14px; }
  .main-nav li:hover > .sub, .main-nav li:focus-within > .sub { display: none; }
  .main-nav li.open > .sub { display: block; }
  .sub-toggle { display: block; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; position: relative; }
  .sub-toggle span::before { content: ""; position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: translate(-50%, -50%) rotate(45deg); }
  .main-nav li.open .sub-toggle span::before { transform: translate(-50%, -20%) rotate(-135deg); }
  .main-nav .nav-cta { margin: 16px 0 0; border: 0; }
  .langs { padding-top: 16px; gap: 18px; }
  .lang span { display: inline; font-size: 14px; }
}
@media (max-width: 989px) {
  .col-1-4, .col-3-4 { width: 47%; }
  .cols .col-1-4:nth-child(odd) { margin-left: 0; }
  .cols .col-1-4 { margin-bottom: 30px; }
  .col-1-5 { width: 29.333%; margin-bottom: 30px; }
  .cols .col-1-5:nth-child(3n+1) { margin-left: 0; }
  .logos { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .hide-medium { display: none !important; }
}
@media (min-width: 990px) { .hide-desktop { display: none !important; } }
@media (min-width: 768px) and (max-width: 989px) { .hide-medium { display: none !important; } }
@media (max-width: 767px) {
  /* Handy: 85 % Breite, Abschnitte 32 px oben und unten (64 px dazwischen), H2 34 / H3 26 / H4 22 px (H1 bewusst 36 statt 64 px) */
  :root { --gutter: 20px; --fs-h1: 36px; --fs-h2: 34px; --fs-h3: 26px; --fs-h4: 22px; --section-pad: 32px; --header-h: 80px; }
  .container, .site-header .container { width: 85%; padding: 0; }
  .container .container { width: 100%; }
  .site-logo img { height: 56px; }
  .hero__cols { min-height: 0; }
  .hero__cols > .hero__text { width: 100% !important; margin-left: 0 !important; }
  .hero__media { display: none; }
  .heading h1 { font-size: var(--fs-h1) !important; }
  .heading h2 { font-size: var(--fs-h2) !important; }
  .heading h3 { font-size: var(--fs-h3) !important; }
  .cols { flex-direction: column; }
  .cols .col, .cols--nogap .col { width: 100% !important; margin-left: 0 !important; }
  .cols .col + .col { margin-top: 30px; }
  .cols .col-1-4, .cols .col-1-5 { margin-bottom: 0; }
  .panel { padding: 32px 22px; border-radius: 18px; }
  .text--columns { column-count: 1; }
  .logos { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .cards { grid-template-columns: 1fr; }
  .grid__cell { width: 100% !important; }
  .hgallery__item img { height: 240px; }
  .iconbox { gap: 14px; }
  .notice-bar .container { flex-wrap: wrap; justify-content: flex-start; gap: 8px 12px; padding: 12px 0; }
  .notice-bar__msg { flex: 1 1 calc(100% - 48px); }
  .notice-bar__text { flex-basis: 100%; }
  .notice-bar__close { position: static; transform: none; order: 2; align-self: flex-start; margin-right: -8px; }
  .notice-bar__btn { order: 3; }
  .footer-main { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 32px; }
  .footer-bottom .container { flex-direction: column; align-items: flex-start; }
  .footer-legal { margin-left: 0; }
  .hide-small { display: none !important; }
  .alignleft, .alignright { float: none; margin: 0 0 10px; }
  table { display: block; overflow-x: auto; }
  .figure--karriere img { width: 100%; }
}
@media (max-width: 479px) {
  .hide-mini { display: none !important; }
  .logos { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================================
   Hilfsklassen (Farben, Abstände, Rundungen, Schriftgrößen)
   ========================================================================= */
.bg-berry { background-color: var(--sym-berry); }
.bg-cyan { background-color: var(--sym-cyan); }
.bg-magenta { background-color: var(--sym-magenta); }
.bg-navy { background-color: var(--sym-navy); }
.bg-ocean { background-color: var(--sym-ocean); }
.bg-purple { background-color: var(--sym-purple); }
.bg-sage { background-color: var(--sym-sage); }
.bg-teal { background-color: var(--sym-teal); }
.bg-panel-blue { background-color: var(--panel-blue); }
.bg-panel-green { background-color: var(--panel-green); }
.bg-panel-grey { background-color: var(--panel-grey); }
.bg-panel-red { background-color: var(--panel-red); }
.bg-panel-yellow { background-color: var(--panel-yellow); }
.bg-white { background-color: var(--white); }
.border-white { border: 2px solid var(--white); }
.c-black { color: var(--black) !important; }
.c-berry { color: var(--sym-berry) !important; }
.c-blue { color: var(--link) !important; }
.c-navy { color: var(--sym-navy) !important; }
.c-purple { color: var(--sym-purple) !important; }
.c-red { color: var(--red-text) !important; }
.c-rose { color: var(--red-text-secondary) !important; }    /* Fließtext auf roter Fläche */
.c-slate { color: var(--blue-text-secondary) !important; }  /* Fließtext auf blauer Fläche */
.c-teal { color: var(--sym-teal) !important; }
.c-dark { color: var(--grey-dark) !important; }
.c-grey { color: #999999 !important; }      /* nicht in brand.md, sichtbar: bleibt vorerst */
.c-muted { color: var(--grey-mid) !important; }
.c-white { color: var(--white) !important; }
.float-right { float: right; }
.fs-10 { font-size: 10px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-16pt { font-size: 16pt; }
.fs-20 { font-size: 20px; }
.fs-30 { font-size: 30px; }
.fs-40 { font-size: 40px; }
.fs-60 { font-size: 60px; }
.fs-xs { font-size: .6em; }
.lh-normal { line-height: normal; }
.p-12-24 { padding: 12px 24px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-48 { padding: 48px; }
.p-64 { padding: 64px; }
.r-6 { border-radius: 6px !important; }
.r-12 { border-radius: 12px !important; }
.r-14 { border-radius: 14px !important; }
.r-24 { border-radius: 24px !important; }
.shadow { box-shadow: 0 0 10px 0 rgba(10,10,10,.61); }
.spacer--4 { height: 4px; }
.spacer--5 { height: 5px; }
.spacer--7 { height: 7px; }
.spacer--10 { height: 10px; }
.spacer--15 { height: 15px; }
.spacer--16 { height: 16px; }
.spacer--20 { height: 20px; }
.spacer--24 { height: 24px; }
.spacer--25 { height: 25px; }
.spacer--30 { height: 30px; }
.spacer--40 { height: 40px; }
.spacer--45 { height: 45px; }
.spacer--50 { height: 50px; }
.spacer--60 { height: 60px; }
.spacer--80 { height: 80px; }
.spacer--85 { height: 85px; }
.spacer--100 { height: 100px; }
.text--cols-3 { column-count: 3; column-gap: 40px; }
.text-left { text-align: left; }


/* ---------- Bausteine (vorher als style="…" direkt in den Seiten) ---------- */
.tile__text { padding: 24px 24px 0; }                 /* Kacheln „Einsatzbereiche“ auf der Startseite */
.icon--outline { border: 1px solid currentColor; }   /* Icon mit Rahmen in Schriftfarbe */
.iconbox > .icon.icon--outline { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; font-size: 28px; }   /* runder Rahmen, Symbol mittig (wie WordPress, Startseite „In wenigen Schritten“) */
.icon--filled { border: 1px solid transparent; }     /* Icon auf Farbfläche (Rahmen in Flächenfarbe) */
.bg-photo { background-position: 0 0; background-repeat: no-repeat; }  /* Foto als Hintergrund; das Bild selbst steht im HTML */
.bg-photo--center { background-position: 50% 50%; }
.bg-photo--team { background-color: var(--team-blue); }
.section.bg-grad-magenta-blue { background: linear-gradient(to right, var(--sym-magenta), var(--sym-blue)); }
.section.bg-grad-cyan-magenta { background: linear-gradient(to top right, var(--sym-cyan-light), var(--sym-magenta)); }
.bg-ocean-soft { background-color: rgba(33,158,188,.3); }
.grid__cell.grid__cell--intro { padding: 0 70px 0 30px; }
p.p-spaced, p.p-spaced:last-child { margin: 12pt 0; }
.stat__num--yellow { color: var(--tag-yellow-fg); }
.stat__num--green { color: var(--tag-green-fg); }
.c-warmgrey { color: #837f7d; }
.c-lightgrey { color: #afafaf; }
.map-embed { width: 100%; border: 0; }
/* Beschriftungen der Ecosystem-Canvas-Felder (Mobility Consulting Tools): Text in Dunkelgrau, die Feldfarbe steckt im Icon daneben.
   Vorher in den Grafikfarben, davon vier zu hell für Text (WCAG 1.4.3, Nov. 2026). */
.canvas-c1, .canvas-c2, .canvas-c3, .canvas-c4, .canvas-c5, .canvas-c6, .canvas-c7, .canvas-c8 { color: var(--grey-dark); }

/* Hinweis auf englischen Seiten, deren Unterlagen nur auf Deutsch vorliegen */
.note-lang { font-size: var(--fs-small); color: var(--muted); margin-top: 10px; }
@media (max-width: 767px) {
  .code .whitepaper-zitat, .code .partner-zitat { padding: 30px 10px 0 !important; }
  .code .whitepaper-zitat p, .code .partner-zitat p { font-size: 24px !important; }
  .code .quote-mark { display: none !important; }
}

/* ---------- Logo-Laufband (Startseite) ----------
   Die Logos stehen zweimal hintereinander im HTML; die zweite Reihe (aria-hidden) sorgt für den nahtlosen Übergang.
   Geschwindigkeit: --speed (Sekunden pro Durchlauf). Bei "Bewegung reduzieren" im System läuft nichts, die Reihe ist dann scrollbar. */
.logo-marquee { --speed: calc(var(--n, 20) * 3s); position: relative; overflow: hidden; margin-top: 30px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee__track { display: flex; align-items: center; width: max-content; animation: logo-marquee var(--speed) linear infinite; }
.logo-marquee:hover .logo-marquee__track, .logo-marquee:focus-within .logo-marquee__track, .logo-marquee.is-paused .logo-marquee__track { animation-play-state: paused; }
.logo-marquee .logos__item { flex: 0 0 auto; padding: 0 36px; }
.logo-marquee .logos__item img { height: 56px; width: auto; max-width: 180px; object-fit: contain; }
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow-x: auto; }
  .logo-marquee__track { animation: none; }
  .logo-marquee .logos__item[aria-hidden="true"] { display: none; }
  .marquee-controls { display: none; }   /* nichts läuft, also kein Pause-Button */
}
@media (max-width: 767px) {
  .logo-marquee .logos__item { padding: 0 22px; }
  .logo-marquee .logos__item img { height: 40px; max-width: 130px; }
}

/* ==========================================================================
   Seitenspezifische Styles (vorher als <style> in einzelnen Seiten).
   :where(.page-…) beschränkt sie auf die jeweilige Seite, ohne die Gewichtung zu ändern.
   ========================================================================== */

/* Seite(n): page-home, page-en */
:where(.page-home, .page-en) .ref-card-container {
      display: flex !important;
      gap: 1.5rem !important;
      justify-content: space-evenly !important;
      flex-wrap: wrap !important;
      align-items: stretch !important;
    }

    :where(.page-home, .page-en) .ref-card {
      width: 360px !important;
      max-width: 100% !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      background-color: #ffffff !important;
      box-shadow: 0 8px 24px rgba(0, 61, 126, 0.10) !important;
      display: flex !important;
      flex-direction: row !important;
    }

    /* Foto schmal links – über die volle Kartenhöhe */
    :where(.page-home, .page-en) .ref-card img {
    width: 120px !important;
    min-width: 120px !important;   /* verhindert das Schrumpfen */
    max-width: 120px !important;   /* fixiert die Breite hart */
    height: auto !important;
    align-self: stretch !important; /* volle Kartenhöhe */
    object-fit: cover !important;
    flex: 0 0 120px !important;
    }

    :where(.page-home, .page-en) .ref-card-content {
      flex-grow: 1 !important;
      padding: 1.4rem !important;
      display: flex !important;
      flex-direction: column !important;
    }

    /* Logo-Bereich (Text-Platzhalter; durch <img> ersetzbar) */
    :where(.page-home, .page-en) .ref-card-logo {
      font-size: 1.25rem !important;
      font-weight: 800 !important;
      color: var(--accent-blue-dark) !important;
      margin-bottom: 0.9rem !important;
    }
    :where(.page-home, .page-en) .ref-card-logo span { color: var(--accent-blue) !important; }
    :where(.page-home, .page-en) .ref-card-logo img { width: auto !important; height: 26px !important; object-fit: contain !important; flex: none !important; }

    :where(.page-home, .page-en) .ref-card-content h3 {
      margin-top: 0 !important;
      margin-bottom: 0.6rem !important;
      font-size: 1.1rem !important;
      line-height: 1.3 !important;
      color: #373737 !important;
    }

    :where(.page-home, .page-en) .ref-card-content p {
      margin: 0 0 1.1rem 0 !important;
      color: #686868 !important;
      font-size: 0.95rem !important;
      line-height: 1.55 !important;
    }

    :where(.page-home, .page-en) .ref-card-link {
      margin-top: auto !important;
      color: var(--accent-blue-dark) !important;
      font-weight: 700 !important;
      font-size: 0.95rem !important;
      text-decoration: none !important;
    }
    :where(.page-home, .page-en) .ref-card-link:hover { text-decoration: underline !important; }

   /* Am Handy: Foto bleibt seitlich (passt zu Hochformat 9:16) */
@media (max-width: 600px) {
  :where(.page-home, .page-en) .ref-card { flex-direction: row !important; }
  :where(.page-home, .page-en) .ref-card img {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: auto !important;
    align-self: stretch !important;   /* volle Kartenhöhe */
    object-fit: cover !important;     /* Hochformat sauber beschnitten, kein Weiß */
    flex: 0 0 110px !important;
  }
}

/* Seite(n): page-en-career, page-karriere */
:where(.page-en-career, .page-karriere) .karriere-wrapper {
      position: relative !important;
      max-width: 1200px !important;
      margin: 0 auto !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-section {
      display: none !important;
      grid-template-columns: 2fr 1fr !important;
      grid-template-rows: auto auto !important;
      gap: 1rem !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-section.active {
      display: grid !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-top {
      grid-column: 1 / 3 !important;
      background-color: #fafafa !important;
      padding: 48px !important;
      border-radius: 24px !important;
    }
    
    :where(.page-en-career, .page-karriere) .karriere-top > h3 {
        margin-bottom: 25px !important;
        color: #373737 !important;
    }
    
    :where(.page-en-career, .page-karriere) .karriere-bottom-left > h3 {
        color: #373737 !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-top > p {
        color: #686868 !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-bottom-left {
      background-color: #fafafa !important;
      padding: 48px !important;
      border-radius: 24px !important;
      min-height: 340px !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-bottom-right {
      padding: 48px !important;
      border-radius: 24px !important;
      background-size: cover !important;
      background-position: center !important;
    }
    
    :where(.page-en-career, .page-karriere) .karriere-bottom-right.img1 {
        background-image: url("/img/MichaelT_rec.png") !important;
        background-color: var(--karriere-green);
    }
    
    :where(.page-en-career, .page-karriere) .karriere-bottom-right.img2 {
        background-image: url("/img/Claudia_rec.png") !important;
        background-color: var(--panel-red);
    }
    
    :where(.page-en-career, .page-karriere) .karriere-bottom-right.img3 {
        background-image: url("/img/Nadine_rec.png") !important;
        background-color: var(--panel-yellow);
    }
    
    :where(.page-en-career, .page-karriere) .karriere-bottom-right.img4 {
        background-image: url("/img/MichaelK_rec-2.png") !important;
        background-color: var(--panel-blue);
    }

    :where(.page-en-career, .page-karriere) .karriere-zitat {
      font-style: italic !important;
      margin-top: 25px !important;
      margin-bottom: 25px !important;
      color: #686868 !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-button {
      display: inline-block !important;
      font-family: var(--font) !important;
      font-weight: 400 !important;
      line-height: normal !important;
      text-align: center !important;
      text-decoration: none !important;
      font-size: 16px !important;
      background-color: var(--black) !important;
      border-color: var(--black) !important;
      color: #ffffff !important;
      border-style: solid !important;
      border-width: 1px !important;
      border-radius: 100px !important;
      box-shadow: none !important;
      transition: all 0.4s ease-in-out !important;
      padding: 10px 15px !important;
    }

    :where(.page-en-career, .page-karriere) .karriere-button:hover {
      text-decoration: none !important;
      background-color: transparent !important;
      color: #000000 !important;
      border: 1px solid #000000 !important;
      cursor: pointer !important;
    }

    :where(.page-en-career, .page-karriere) .arrow-btn {
      position: absolute !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      background: var(--black) !important;
      color: white !important;
      border: none !important;
      border-radius: 50% !important;
      width: 40px !important;
      height: 40px !important;
      font-size: 20px !important;
      cursor: pointer !important;
      z-index: 10 !important;
    }

    :where(.page-en-career, .page-karriere) .arrow-left {
      left: -60px !important;
    }

    :where(.page-en-career, .page-karriere) .arrow-right {
      right: -60px !important;
    }

    :where(.page-en-career, .page-karriere) .dot-container {
      text-align: center !important;
      margin-top: 2rem !important;
    }

    /* Punkte als Buttons: Klickfläche 24 px (WCAG 2.5.8), sichtbarer Punkt 12 px wie bisher, inaktiv Mittelgrau statt #ccc (WCAG 1.4.11, Nov. 2026) */
    :where(.page-en-career, .page-karriere) .dot {
      position: relative !important;
      display: inline-block !important;
      width: 24px !important;
      height: 24px !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: none !important;
      vertical-align: middle !important;
      cursor: pointer !important;
    }

    :where(.page-en-career, .page-karriere) .dot::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: var(--grey-mid);
      transform: translate(-50%, -50%);
      transition: background-color 0.3s ease;
    }

    :where(.page-en-career, .page-karriere) .dot.active::before {
      background-color: var(--black);
    }

    @media (max-width: 1024px) {
  :where(.page-en-career, .page-karriere) .karriere-section {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  :where(.page-en-career, .page-karriere) .karriere-top, :where(.page-en-career, .page-karriere) .karriere-bottom-left, :where(.page-en-career, .page-karriere) .karriere-bottom-right {
    grid-column: auto !important;
    padding: 32px !important;
  }

  :where(.page-en-career, .page-karriere) .karriere-bottom-right {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-height: 250px !important;
    padding: 48px !important;
  }

  :where(.page-en-career, .page-karriere) .karriere-button {
    width: 100% !important;
    text-align: center !important;
  }

}

@media (max-width: 480px) {
  :where(.page-en-career, .page-karriere) .karriere-top > h3 {
    font-size: 1.25rem !important;
  }

  :where(.page-en-career, .page-karriere) .karriere-top > p, :where(.page-en-career, .page-karriere) .karriere-zitat {
    font-size: 0.95rem !important;
  }

  :where(.page-en-career, .page-karriere) .karriere-button {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }

  :where(.page-en-career, .page-karriere) .dot::before {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 1350px) {
    :where(.page-en-career, .page-karriere) .arrow-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem;
    margin-top: 2rem;
  }

  :where(.page-en-career, .page-karriere) .arrow-btn {
    position: static !important;
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
    border-radius: 50% !important;
    background-color: var(--black) !important;
    color: white !important;
    border: none !important;
    margin-top: 24px !important;
  }

  :where(.page-en-career, .page-karriere) .arrow-left, :where(.page-en-career, .page-karriere) .arrow-right {
    display: inline-block !important;
  }
}

/* Seite(n): page-mobilitaetsplattform-fuer-stadtwerke */
:where(.page-mobilitaetsplattform-fuer-stadtwerke) .whitepaper-zitat {
      display: flex !important;
      margin: 0;
      border-left: 0;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;

      padding-left: 60px;
    padding-right: 60px;
    padding-top: 60px;
    }

    :where(.page-mobilitaetsplattform-fuer-stadtwerke) .whitepaper-zitat p {
      text-align: center !important;
      color: var(--grey-mid) !important;
      font-style: italic !important;
      font-size: 40px !important;
      font-weight: lighter !important;
      position: relative !important;
      z-index: 2 !important;
      line-height: 1.1 !important;
    }

    :where(.page-mobilitaetsplattform-fuer-stadtwerke) .quote-mark {
      position: absolute !important;
      font-size: 150px !important;
      color: rgba(115, 115, 115, 0.2) !important;
      font-family: serif !important;
      z-index: 1 !important;
      line-height: 1 !important;
      pointer-events: none !important;
    }

    :where(.page-mobilitaetsplattform-fuer-stadtwerke) .quote-mark.left {
      top: 30px !important;
      left: calc(30% - 350px) !important;
    }

    :where(.page-mobilitaetsplattform-fuer-stadtwerke) .quote-mark.right {
      top: calc(65% + 30px) !important;
      right: calc(30% - 350px) !important;
    }

    :where(.page-mobilitaetsplattform-fuer-stadtwerke) .whitepaper-zitat-person {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    :where(.page-mobilitaetsplattform-fuer-stadtwerke) .whitepaper-zitat-person p span {
        font-weight: bold !important;
    }

    :where(.page-mobilitaetsplattform-fuer-stadtwerke) .whitepaper-zitat-person {
        font-size: 16px !important;
        color: #373737 !important;
    }

/* Seite(n): page-en-projects, page-referenzen */
:where(.page-en-projects, .page-referenzen) .referenzen-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      margin: 0 auto;
      justify-content: center;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-card {
      background: #fafafa;
      width: 100%;
      border-radius: 24px;
      padding: 48px;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-img {
        display: flex;
        justify-content: center;
        margin-bottom: 48px;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-img img {
        width: 150px;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-title h2 {
      letter-spacing: normal;
      font-size: 1.2em;
      font-weight: bold;
      border-radius: 6px;
      margin: 0;
      color: #373737 !important;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-subtitle p {
      margin-top: 10px;
      border-radius: 6px;
      font-size: 16px;
      line-height: 1.4;
      color: #686868;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-quick-facts {
      margin-top: 20px;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-quick-facts h3, :where(.page-en-projects, .page-referenzen) .referenzen-modules > h3 {
      font-size: 1em;
      margin-bottom: 8px;
      margin-top: 48px;
      color: #373737 !important;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-quick-facts ul {
      margin: 0;
      padding-left: 18px;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-quick-facts li {
      margin-bottom: 6px;
      font-size: 16px;
      color: #686868 !important;
    }
    

    :where(.page-en-projects, .page-referenzen) .referenzen-modules {
      margin-top: 15px;
    }

    :where(.page-en-projects, .page-referenzen) .referenzen-module-badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 20px;
      margin: 4px 4px 0 0;
      font-size: 14px;
      font-weight: bold;
    }

:where(.page-en-projects, .page-referenzen) .referenzen-modul {
  background-color: #ededed;
  color: #373737;
}

:where(.page-en-projects, .page-referenzen) .referenzen-modul-gruen {
  background-color: var(--tag-green-bg);
  color: var(--tag-green-fg);
}

:where(.page-en-projects, .page-referenzen) .referenzen-modul-blau {
  background-color: var(--tag-blue-bg);
  color: var(--tag-blue-fg);
}

:where(.page-en-projects, .page-referenzen) .referenzen-modul-gelb {
  background-color: var(--tag-yellow-bg);
  color: var(--tag-yellow-fg);
}

:where(.page-en-projects, .page-referenzen) .referenzen-modul-rot {
  background-color: var(--tag-red-bg);
  color: var(--tag-red-fg);
}

:where(.page-en-projects, .page-referenzen) .modules-columns {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 15px;
}

:where(.page-en-projects, .page-referenzen) .modules-column h4 {
  font-size: 16px !important;
  margin-bottom: 8px;
  margin-top: 0;
  font-weight: bold !important;
  color: #373737 !important;
}

@media (max-width: 1300px){
  :where(.page-en-projects, .page-referenzen) .referenzen-container {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 30px;
      margin: 0 auto;
      justify-content: center;
    }
}

/* ==========================================================================
   Lösungsseite /loesungen/ und /en/solutions/ (White-Label-Plattform, Nov. 2026)
   Aufbau nach dem Mockup, Gestaltung nach brand.md (Farben aus :root, Heebo).
   Alle Klassen beginnen mit lp- und kommen nur auf dieser Seite vor.
   ========================================================================== */
.lp-lead { font-size: var(--fs-h5); font-weight: 400; line-height: 1.55; margin: 24px 0 0; }
.lp-hero .btns { margin-top: 24px; gap: 16px; }
.lp-narrow { max-width: 760px; margin: 0 auto; }

/* Header-Grafik: Ihre App in der Mitte, Angebote auf zwei Kreisen, Gruppen rundherum */
.lp-hero__art { align-self: center; }
.lp-art { display: block; width: 100%; height: auto; }
.lp-art .a-ring { fill: none; stroke-width: 2; }
.lp-art .a-ring--own { stroke: var(--tag-blue-bg); }
.lp-art .a-ring--region { stroke: var(--tag-green-bg); stroke-dasharray: 8 8; }
.lp-art .a-bub__bg { stroke-width: 2; }
.lp-art .a-ic { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp-art .a-bub--own .a-bub__bg { fill: var(--panel-blue); stroke: var(--tag-blue-bg); }
.lp-art .a-bub--own .a-ic { stroke: var(--blue-text); }
.lp-art .a-bub--region .a-bub__bg { fill: var(--panel-green); stroke: var(--tag-green-bg); }
.lp-art .a-bub--region .a-ic { stroke: var(--green-text); }
.lp-art .a-bub--group .a-bub__bg { fill: var(--panel-yellow); stroke: var(--tag-yellow-bg); }
.lp-art .a-bub--group .a-ic { stroke: var(--yellow-text); }
.lp-art .a-lock { fill: var(--yellow-text); }
.lp-art .a-ic.a-ic--white, .lp-art .a-bub .a-ic.a-ic--white { stroke: var(--white); }
.lp-art .a-bub__label { font-family: var(--font); font-size: 24px; font-weight: 700; fill: var(--grey-dark); }
.lp-art .a-chip { fill: var(--blue-text); }
.lp-art .a-chip__label { font-family: var(--font); font-size: 24px; font-weight: 700; fill: var(--white); }
.lp-art .a-screen__title { font-family: var(--font); font-size: 54px; font-weight: 700; fill: var(--blue-text); }
.lp-art .a-screen__tile { fill: var(--white); stroke: var(--tag-blue-bg); stroke-width: 3; }

/* Schlüsselelemente */
.lp-key__icon { display: flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: 24px; border-radius: 50%; border: 1.5px solid var(--blue-text); background: var(--white); color: var(--blue-text); }
.lp-key__icon svg { width: 34px; height: 34px; }
.lp-key__title { margin-bottom: 8px; font-size: var(--fs-h4); color: var(--blue-text); }

/* Integrierte Angebote: drei Karten in den Farben aus brand.md 1.1 */
.lp-offer { display: flex; flex-direction: column; padding: 48px 32px; border-radius: var(--radius); }
.lp-offer h3 { margin: 24px 0 8px; }
.lp-offer > p { margin-top: 0; }
.lp-offer__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; }
.lp-offer__icon svg { width: 24px; height: 24px; }
.lp-offer .lp-offer__example { margin: auto 0 0; padding: 16px; border-radius: 12px; background: var(--white); font-size: var(--fs-small); line-height: 1.5; }
.lp-offer--blue { background: var(--panel-blue); color: var(--blue-text-secondary); }
.lp-offer--blue h3, .lp-offer--blue strong { color: var(--blue-text); }
.lp-offer--blue .lp-offer__icon { background: var(--tag-blue-bg); color: var(--blue-text); }
.lp-offer--green { background: var(--panel-green); color: var(--green-text-secondary); }
.lp-offer--green h3, .lp-offer--green strong { color: var(--green-text); }
.lp-offer--green .lp-offer__icon { background: var(--tag-green-bg); color: var(--green-text); }
.lp-offer--yellow { background: var(--panel-yellow); color: var(--yellow-text-secondary); }
.lp-offer--yellow h3, .lp-offer--yellow strong { color: var(--yellow-text); }
.lp-offer--yellow .lp-offer__icon { background: var(--tag-yellow-bg); color: var(--yellow-text); }

/* Managed Platform: vier Funktionen auf blauer Fläche */
.lp-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.lp-feature { margin: 0; padding: 32px; border-radius: 20px; background: var(--white); color: var(--blue-text-secondary); }
.lp-feature svg { width: 32px; height: 32px; color: var(--blue-text); }
.lp-feature h3 { margin: 16px 0 8px; color: var(--blue-text); }
.lp-feature p { margin: 0; }

/* White-Label-App: Startseite der App (nach dem echten Homescreen, Daten anonymisiert) und Begrüßungsbereich in weiteren Markenfarben */
.lp-app { display: flex; gap: 32px; align-items: flex-start; justify-content: center; }
.lp-phone { position: relative; flex: 0 0 290px; height: 600px; overflow: hidden; border: 8px solid var(--black); border-radius: var(--radius); background: var(--grey-soft); font-size: 12px; line-height: 1.3; color: var(--black); }
.lp-phone svg { display: block; flex: 0 0 auto; }
.lp-ph-head, .lp-brand { position: relative; color: var(--white); }
.lp-ph-head { display: block; padding: 32px 16px 16px; background: linear-gradient(135deg, var(--blue-text) 0%, var(--accent-blue) 100%); }
.lp-ph-hello, .lp-brand__hello { display: block; font-size: 12px; opacity: .9; }
.lp-ph-name, .lp-brand__name { display: block; margin-bottom: 16px; font-size: 22px; font-weight: 700; }
.lp-ph-search, .lp-brand__search { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: var(--white); color: var(--grey-mid); font-size: 12px; }
.lp-ph-search svg { width: 14px; height: 14px; }
.lp-brand__logo { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); color: var(--grey-dark); font-size: 12px; font-weight: 700; }
.lp-ph-body { display: block; padding: 0 12px 64px; }
.lp-ph-h { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--grey-dark); }
.lp-ph-card { display: block; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--grey-line); border-radius: 12px; background: var(--white); }
.lp-ph-card.lp-ph-row { display: flex; }
.lp-ph-date { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; padding: 2px 8px; border: 1px solid var(--grey-line); border-radius: 100px; font-size: 10px; color: var(--grey-dark); }
.lp-ph-date svg { width: 11px; height: 11px; }
.lp-ph-row { display: flex; align-items: center; gap: 8px; }
.lp-ph-row strong { display: block; font-size: 12px; }
.lp-ph-row small { display: block; font-size: 11px; color: var(--grey-mid); }
.lp-ph-ic { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; height: 32px; border-radius: 8px; background: var(--panel-blue); color: var(--blue-text); }
.lp-ph-ic svg { width: 18px; height: 18px; }
.lp-ph-ic--logo { border: 1px solid var(--grey-line); background: var(--white); }
.lp-ph-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lp-ph-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--grey-line); border-radius: 12px; background: var(--white); font-size: 11px; color: var(--grey-dark); }
.lp-ph-tile svg { width: 18px; height: 18px; color: var(--blue-text); }
.lp-ph-tile--accent { border-color: var(--tag-blue-bg); background: var(--panel-blue); color: var(--blue-text); }
.lp-ph-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 8px 0; border-top: 1px solid var(--grey-line); background: var(--white); font-size: 10px; color: var(--grey-mid); }
.lp-ph-nav > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lp-ph-nav svg { width: 18px; height: 18px; }
.lp-ph-nav .is-active { color: var(--blue-text); }
.lp-brands { display: flex; flex-direction: column; gap: 16px; width: 240px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-brand { margin: 0; padding: 16px; border-radius: 20px; overflow: hidden; line-height: 1.3; }
.lp-brand .lp-brand__name { margin-bottom: 8px; font-size: 18px; }
.lp-brand .lp-brand__search { padding: 4px 12px; font-size: 11px; }
.lp-brand--green { background: linear-gradient(135deg, var(--green-text) 0%, var(--green-text-secondary) 100%); }
.lp-brand--yellow { background: linear-gradient(135deg, var(--yellow-text) 0%, var(--yellow-text-secondary) 100%); }
.lp-brand--red { background: linear-gradient(135deg, var(--red-text) 0%, var(--red-text-secondary) 100%); }
.lp-brand--grey { background: linear-gradient(135deg, var(--grey-dark) 0%, var(--grey-mid) 100%); }
.lp-caption { font-size: var(--fs-small); color: var(--grey-mid); }

/* Zielgruppen: Gruppen-Kästen, Foto mit Situationen */
.lp-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.lp-group { margin: 0; padding: 16px 24px; border-radius: 12px; background: var(--white); }
.lp-group .lp-group__title { margin: 0 0 4px; font-size: var(--fs-h5); font-weight: 700; color: var(--grey-dark); }
.lp-group p:not(.lp-group__title) { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--grey-mid); }
.lp-collage { max-width: 540px; margin: 48px auto 0; }
.lp-scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 24px; margin: 0; padding: 0 0 80px; list-style: none; }
.lp-scene { position: relative; margin: 0; }
.lp-scene:nth-child(even) { transform: translateY(48px); }
.lp-scene img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: var(--grey-light); }
.lp-scene__card { position: absolute; left: 12px; right: -12px; bottom: -24px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--white); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); line-height: 1.3; }
.lp-scene__ic { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; height: 32px; border-radius: 8px; background: var(--panel-blue); color: var(--blue-text); }
.lp-scene__ic svg { width: 18px; height: 18px; }
.lp-scene__ctx { display: block; font-size: 12px; color: var(--grey-mid); }
.lp-scene__card strong { display: block; font-size: 14px; color: var(--black); }

/* Bausteine: oben die drei von Mobility as a Service, darunter die Module */
.lp-modgroup { margin: 0 0 16px; font-size: var(--fs-h5); font-weight: 700; line-height: 29.7px; letter-spacing: normal; color: var(--grey-dark); }   /* jetzt H3, Aussehen wie vorher */
.lp-maas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 48px; padding: 0; list-style: none; }
.lp-maas__item { margin: 0; padding: 32px; border-radius: 20px; background: var(--panel-blue); color: var(--blue-text-secondary); }
.lp-maas__item h4 { margin: 0 0 8px; font-size: var(--fs-h3); color: var(--blue-text); }   /* jetzt H4 unter der H3 „Mobility as a Service“, Größe wie vorher */
.lp-maas__item p { margin: 0; }
.lp-modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.lp-module { margin: 0; padding: 16px 24px; border: 1px solid var(--grey-line); border-radius: 12px; background: var(--grey-soft); }
.lp-module .lp-module__name { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 700; color: var(--grey-dark); }
.lp-module .lp-module__text { margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--grey-mid); }

/* Abschluss: Gespräch vereinbaren */
.lp-cta { display: flex; align-items: center; justify-content: center; gap: 48px; }
.lp-cta__icon { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; background: var(--white); color: var(--grey-dark); }
.lp-cta__icon svg { width: 72px; height: 72px; }
.lp-cta__text { max-width: 560px; }
.lp-cta .btns { flex: 0 0 auto; margin: 0; }

@media (max-width: 1200px) {
  .lp-app { flex-wrap: wrap; }
  .lp-brands { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 8px; margin-top: 0; }
  .lp-brand { flex: 1 1 140px; }
}
@media (max-width: 989px) {
  .lp-keys .col-1-4 { margin-bottom: 32px; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cta { flex-wrap: wrap; text-align: center; }
  .lp-hero .cols > .col-1-2 { width: 100%; margin-left: 0; }
  .lp-hero__art { max-width: 640px; margin: 48px auto 0; }
}
@media (max-width: 767px) {
  .lp-hero__art { display: none; }
  .lp-maas { grid-template-columns: 1fr; }
  .lp-phone { flex-basis: 100%; max-width: 290px; }
  .lp-groups { grid-template-columns: 1fr; }
  .lp-collage { margin-top: 32px; }
  .lp-scenes { gap: 56px 16px; }
  .lp-scene__card { left: 8px; right: -8px; padding: 8px; }
  .lp-scene__card strong { font-size: 13px; }
  .lp-offer { padding: 32px 24px; }
  .lp-feature { padding: 24px; }
  .lp-cta { flex-direction: column; gap: 24px; }
  .lp-cta__icon { width: 96px; height: 96px; }
  .lp-cta__icon svg { width: 48px; height: 48px; }
}
@media (max-width: 479px) {
  .lp-modules { grid-template-columns: 1fr; }
  .lp-scenes { grid-template-columns: 1fr; gap: 48px; padding-bottom: 48px; }
  .lp-scene:nth-child(even) { transform: none; }
}

/* White-Label-Vorschau (Lösungsseite, Nov. 2026): Besucher:innen wählen eine Beispielmarke,
   die App wechselt Farbe, Aufbau und Inhalte (Umschalten in site.js). Ohne JavaScript bleibt die erste Marke sichtbar. */
[data-wl] [hidden] { display: none !important; }
.wl-phone, .wl-mods { --wl-brand: var(--blue-text); --wl-tint: var(--panel-blue); --wl-tag: var(--tag-blue-bg); }
.wl [data-theme="green"] { --wl-brand: var(--green-text); --wl-tint: var(--panel-green); --wl-tag: var(--tag-green-bg); }
.wl [data-theme="red"] { --wl-brand: var(--red-text); --wl-tint: var(--panel-red); --wl-tag: var(--tag-red-bg); }
.wl [data-theme="grey"] { --wl-brand: var(--grey-dark); --wl-tint: var(--grey-light); --wl-tag: var(--grey-light); }
.wl-phone { position: relative; width: 300px; max-width: 100%; height: 620px; margin: 0 auto; overflow: hidden; border: 8px solid var(--black); border-radius: 40px; background: var(--grey-soft); font-size: 12px; line-height: 1.3; color: var(--black); box-shadow: 0 24px 48px rgba(0,0,0,.12); }
.wl-phone svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wl-phone .wl-qr { width: 36px; height: 36px; stroke-width: 1.5; }
.wl-head { position: relative; display: block; padding: 40px 16px 16px; background: var(--wl-brand); color: var(--white); }
.wl-logo { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--wl-brand); font-weight: 700; }
.wl-hello { display: block; }
.wl-app { display: block; margin-bottom: 16px; font-size: 22px; font-weight: 700; }
.wl-search { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; background: var(--white); color: var(--grey-mid); }
.wl-phone .wl-search svg { width: 14px; height: 14px; }
.wl-body { display: block; padding: 0 12px 72px; }
.wl-h { display: block; margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--grey-dark); }
.wl-card { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--grey-line); border-radius: 12px; background: var(--white); }
.wl-card + .wl-card { margin-top: 8px; }
.wl-card--tint { border-color: transparent; background: var(--wl-tint); color: var(--wl-brand); }
.wl-card--brand { justify-content: space-between; border-color: transparent; background: var(--wl-brand); color: var(--white); }
.wl-card--stack { flex-direction: column; align-items: stretch; }
.wl-txt { display: flex; flex-direction: column; gap: 2px; }
.wl-txt strong { font-size: 12px; }
.wl-txt small { font-size: 11px; color: var(--grey-mid); }
.wl-card--tint .wl-txt small, .wl-card--brand .wl-txt small { color: inherit; }
.wl-ic { display: flex; flex: 0 0 32px; align-items: center; justify-content: center; height: 32px; border-radius: 8px; background: var(--wl-tint); color: var(--wl-brand); }
.wl-card--tint .wl-ic { background: var(--white); }
.wl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.wl-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-tiles + .wl-card, .wl-card + .wl-tiles { margin-top: 8px; }
.wl-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--grey-line); border-radius: 12px; background: var(--white); color: var(--grey-dark); font-size: 11px; }
.wl-tiles--3 .wl-tile { align-items: center; padding: 12px 4px; font-size: 10px; text-align: center; }
.wl-tile svg { color: var(--wl-brand); }
.wl-pill { flex: 0 0 auto; align-self: center; padding: 6px 14px; border-radius: 100px; background: var(--wl-brand); color: var(--white); font-size: 11px; font-weight: 700; }
.wl-card--brand .wl-pill { background: var(--white); color: var(--wl-brand); }
.wl-pill--line { align-self: flex-start; border: 1px solid var(--wl-brand); background: transparent; color: var(--wl-brand); }
.wl-badge { padding: 2px 8px; border-radius: 8px; background: var(--white); font-size: 10px; font-weight: 700; }
.wl-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.wl-bar { display: block; height: 6px; border-radius: 6px; background: var(--wl-tint); }
.wl-card--tint .wl-bar { background: var(--white); }
.wl-bar > span { display: block; height: 6px; border-radius: 6px; background: var(--wl-brand); }
.wl-bar > .wl-fill-45 { width: 45%; } .wl-bar > .wl-fill-70 { width: 70%; } .wl-bar > .wl-fill-80 { width: 80%; } .wl-bar > .wl-fill-92 { width: 92%; }
.wl-nav { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 8px 0 12px; border-top: 1px solid var(--grey-line); background: var(--white); font-size: 10px; color: var(--grey-mid); }
.wl-nav > span { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.wl-nav .is-active { color: var(--wl-brand); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .wl-screen { animation: wl-in .35s ease-out; }
}
@keyframes wl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wl-intro { margin: 24px 0 0; font-size: var(--fs-body); font-weight: 400; color: var(--grey-dark); }
.wl-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.wl-picker > li { margin: 0; padding: 0; }
.wl-pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 16px; border: 2px solid var(--grey-line); border-radius: 12px; background: var(--white); font-family: var(--font); text-align: left; cursor: pointer; transition: border-color .2s; }
.wl-pick:hover { border-color: var(--grey-mid); }
.wl-pick[aria-pressed="true"] { border-color: var(--black); }
.wl-pick:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }
.wl-dot { flex: 0 0 24px; height: 24px; border-radius: 50%; }
.wl-dot--blue { background: var(--blue-text); } .wl-dot--green { background: var(--green-text); } .wl-dot--red { background: var(--red-text); } .wl-dot--grey { background: var(--grey-dark); }
.wl-pick__name { display: block; font-size: var(--fs-body); font-weight: 700; line-height: 1.3; color: var(--black); }
.wl-pick__group { display: block; font-size: var(--fs-small); line-height: 1.3; color: var(--grey-mid); }
.wl-mods { margin: 16px 0 0; padding: 16px 24px; border: 1px solid var(--grey-line); border-radius: 12px; background: var(--white); }
.wl-mods .wl-mods__title { margin: 0 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--grey-dark); }
.wl-mods__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wl-mods__list > li { margin: 0; padding: 4px 10px; border-radius: 20px; background: var(--wl-tag); color: var(--wl-brand); font-size: var(--fs-small); font-weight: 700; line-height: 1.4; }
@media (max-width: 479px) {
  .wl-picker { grid-template-columns: 1fr; }
}

/* Unterseiten-Header (Nov. 2026, brand.md 10): kompakt, linksbündig, Brotkrumen, Flächenfarbe je Bereich.
   Kein Pfeil-Button: Der nächste Abschnitt soll schon im ersten Bildschirm zu sehen sein. */
main > section.page-hero { padding: 32px 0 64px; margin-bottom: 0; }   /* unten 64 + 64 des nächsten Abschnitts = 128 px wie zwischen allen Abschnitten */
.ph-panel { --ph-bg: var(--panel-grey); --ph-head: var(--grey-dark); --ph-text: var(--grey-mid); --ph-tag: var(--tag-grey-bg);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: center; padding: 64px; border-radius: var(--radius); background: var(--ph-bg); color: var(--ph-text); }
.ph-panel--single { grid-template-columns: minmax(0, 1fr); }
.ph-panel--blue { --ph-bg: var(--panel-blue); --ph-head: var(--blue-text); --ph-text: var(--blue-text-secondary); --ph-tag: var(--tag-blue-bg); }
.ph-panel--yellow { --ph-bg: var(--panel-yellow); --ph-head: var(--yellow-text); --ph-text: var(--yellow-text-secondary); --ph-tag: var(--tag-yellow-bg); }
.ph-panel--green { --ph-bg: var(--panel-green); --ph-head: var(--green-text); --ph-text: var(--green-text-secondary); --ph-tag: var(--tag-green-bg); }
.ph-panel--red { --ph-bg: var(--panel-red); --ph-head: var(--red-text); --ph-text: var(--red-text-secondary); --ph-tag: var(--tag-red-bg); }
.ph-main { min-width: 0; }
.ph-crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); line-height: 1.4; }
.ph-crumbs__list > li { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.ph-crumbs__list > li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); }
.ph-crumbs a { color: var(--ph-text); }
.ph-crumbs a:hover { color: var(--ph-head); }
.ph-crumbs [aria-current] { font-weight: 700; color: var(--ph-head); }
.ph-panel h1 { margin: 24px 0 0; font-size: 56px; line-height: 1.1; color: var(--ph-head); }
.ph-lead { max-width: 680px; margin-top: 16px; }
.ph-lead p { margin: 0 0 8px; font-size: var(--fs-h5); line-height: 1.65; text-align: left; color: var(--ph-text); }
.ph-panel .ph-label { margin: 24px 0 8px; font-size: var(--fs-small); font-weight: 700; color: var(--ph-head); }
.ph-chips, .ph-jumps, .ph-stats { margin: 0; padding: 0; list-style: none; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ph-chips > li, .ph-jumps > li, .ph-stats > li { margin: 0; padding: 0; }
.ph-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--ph-tag); border-radius: 100px; background: var(--white); color: var(--ph-head); font-size: var(--fs-small); font-weight: 700; line-height: 1.3; transition: border-color .2s; }
.ph-chip:hover { border-color: var(--ph-head); color: var(--ph-head); text-decoration: none; }
.ph-jumps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ph-jump { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; min-height: 140px; padding: 16px; border: 2px solid var(--white); border-radius: 16px; background: var(--white); color: var(--black); transition: border-color .2s, transform .2s; }
.ph-jump:hover { border-color: var(--ph-head); color: var(--black); text-decoration: none; transform: translateY(-2px); }
.ph-jump__name { font-size: var(--fs-body); font-weight: 700; line-height: 1.3; }
.ph-jump__more { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: var(--fs-small); color: var(--blue-text); }
.ph-jump__more svg, .ph-feature__more svg { transition: transform .2s; }
.ph-jump:hover .ph-jump__more svg { transform: translateY(3px); }
.ph-btns { margin-top: 24px; gap: 16px; }
.ph-feature { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: 20px; background: var(--white); color: var(--grey-mid); box-shadow: 0 12px 32px rgba(0,0,0,.06); }
.ph-feature:hover { color: var(--grey-mid); text-decoration: none; }
.ph-feature .tag { align-self: flex-start; }
.ph-feature__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.15; color: var(--grey-dark); }
.ph-feature__text { font-size: var(--fs-body); line-height: 1.6; }
.ph-feature__more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--black); }
.ph-feature:hover .ph-feature__more svg { transform: translateX(4px); }
.ph-photo { margin: 0; }
.ph-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.ph-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ph-stats > li { display: flex; align-items: baseline; gap: 16px; padding: 24px 32px; border-radius: 20px; background: var(--white); font-size: var(--fs-body); line-height: 1.4; color: var(--grey-dark); }
.ph-stats strong { flex: 0 0 auto; font-size: 48px; line-height: 1; color: var(--ph-head); }
/* Hochformat oder freigestelltes Bild im Seitenkopf (Karriere, Stadtwerke, Mobility Consulting Tools): ganz sichtbar, nicht beschnitten */
.ph-photo--free { text-align: center; }
.ph-photo--free img { display: inline-block; width: auto; max-width: 100%; max-height: 480px; aspect-ratio: auto; object-fit: contain; }
/* Lösungsseite: eigener Kopf mit Grafik; Brotkrumen und H1 stehen auf derselben Höhe wie im Unterseiten-Header (96 px unter der Kopfzeile) */
main > section.lp-hero { padding: 96px 0 64px; }
.lp-hero { --ph-text: var(--grey-mid); --ph-head: var(--grey-dark); }
.lp-hero .ph-crumbs { margin-bottom: 24px; }
.lp-hero h1 { font-size: 56px; }
@media (max-width: 989px) {
  .ph-panel { grid-template-columns: minmax(0, 1fr); }
  .ph-jumps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  main > section.page-hero { padding-top: 16px; padding-bottom: 32px; }
  main > section.lp-hero { padding: 48px 0 32px; }
  .ph-panel { padding: 32px 22px; border-radius: 18px; }
  .ph-panel h1 { font-size: var(--fs-h1); }
}
@media (max-width: 479px) {
  .ph-jumps { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Layout wie WordPress (Schritt „Layout an WordPress angleichen“, Okt. 2026)
   ========================================================================== */

/* Abstände zwischen Abschnitten (Nov. 2026): auf allen Seiten gleich über --section-pad (128 px, Handy 64 px).
   Der frühere zusätzliche WordPress-Leerraum auf einzelnen Seiten entfällt. Die Symposium-Seiten (Archiv) behalten 50 px. */
body:where([class*="maas-"]) { --section-pad: 50px; }

/* Abstände innerhalb eines Abschnitts (Nov. 2026, brand.md 3): ersetzen die früheren leeren Abstandshalter aus WordPress.
   Überschrift → Text 16 px, Bild → Text 24 px, → Button 32 px, Text → Karten/Spalten und Karten → Weiteres 48 px.
   Die Symposium-Seiten (Archiv) behalten ihre Abstandshalter und sind ausgenommen. */
body:not([class*="maas-"]) main :is(.container, .panel, .col) > .heading + :is(.text, .subheading) { margin-top: 16px; }
body:not([class*="maas-"]) main :is(.container, .panel, .col) > .figure + :is(.heading, .text), body:not([class*="maas-"]) main .col > .fonticon + .heading { margin-top: 24px; }
body:not([class*="maas-"]) main :is(.container, .panel, .col) > :is(.heading, .text, .figure) + .btns { margin-top: 32px; }
body:not([class*="maas-"]) main :is(.container, .panel, .col) > :is(.heading, .text) + :is(.cols, .code, .steps, .faqs, .logo-marquee, .hgallery) { margin-top: 48px; }
body:not([class*="maas-"]) main :is(.container, .panel, .col) > .heading:has(> h3) + .cols { margin-top: 24px; }   /* Gruppenüberschrift direkt über ihren Karten (z. B. Team) */
body:not([class*="maas-"]) main :is(.container, .panel, .col) > :is(.cols, .code, .steps, .faqs, .hgallery) + :is(.btns, .heading, .text, .code) { margin-top: 48px; }
body:not([class*="maas-"]) main :is(.container, .panel, .col) > .text + .heading { margin-top: 48px; }
body:not([class*="maas-"]) main :not(.lp-maas) + .lp-modgroup { margin-top: 48px; }   /* Lösungsseite: Bausteine-Überschrift */
/* Foto „Wie alles begann“ (Über uns), vorher als Inline-Style in der Seite */
.bg-photo--qando { background-image: url("/img/Fluidtime_qando_2009.jpg"); }
/* Fotos der Bildergalerie auf Karriere / Career, vorher als Inline-Style in der Seite */
.bg-photo--ux-team { background-image: url("/img/UXTeam_edited.webp"); }
.bg-photo--xmas-2024 { background-image: url("/img/weihnachtsfeier_2024.webp"); }
.bg-photo--xmas-2023 { background-image: url("/img/weihnachtsfeier_2023-scaled.webp"); }
.bg-photo--team-2024 { background-image: url("/img/pacos_team_2024-scaled.webp"); }
.bg-photo--ft-xmas-2024 { background-image: url("/img/fluidtime_weihnachtsfeier_2024.webp"); }
.bg-photo--birthday-2024 { background-image: url("/img/fluidtime_geburtstag_2024.webp"); }
.bg-photo--xmas-2023-b { background-image: url("/img/weihnachtsfeier_2023_edited-scaled.webp"); }

/* Startseite: vier Vorteile mit schmalem Spaltenabstand wie WordPress */
:where(.page-home, .page-en) #benefits .col-1-4 { width: 23.5%; margin-left: 2%; }
:where(.page-home, .page-en) #benefits .col-1-4:first-child { margin-left: 0; }
/* Startseite: „In wenigen Schritten“ ebenso breite Spalten, damit der Text neben dem runden Icon nicht gestaucht wird */
@media (min-width: 990px) {
  :where(.page-home, .page-en) #steps .col-1-4 { width: 23.5%; margin-left: 2%; }
  :where(.page-home, .page-en) #steps .col-1-4:first-child { margin-left: 0; }
}

/* Startseite: Karten „Viele Einsatzbereiche“ – 5 gleich hohe Karten, Foto randlos oben */
:where(.page-home, .page-en) #use-cases .cols { align-items: stretch; justify-content: space-between; }
:where(.page-home, .page-en) #use-cases .col-1-5 { width: 18.43%; margin: 0; padding: 0; overflow: hidden; }
:where(.page-home, .page-en) #use-cases .col-1-5 .figure img { display: block; width: 100%; border-radius: 3px; }
@media (max-width: 767px) {
  :where(.page-home, .page-en) #use-cases .cols .col + .col { margin-top: 20px; }
}

/* ==========================================================================
   Überschriften-Ebene und Aussehen getrennt (Schritt 2 SEO, Okt. 2026)
   Jede Seite hat genau eine H1. Wo der Seitentitel bisher optisch eine H2/H3 war
   (oder eine zweite H1 optisch eine H1), bleibt das Aussehen mit diesen Klassen gleich.
   ========================================================================== */
h1:where(.look-h2) { font-size: var(--fs-h2); line-height: 1.15; }
h1:where(.look-h3) { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: normal; }
h2:where(.look-h1), .text h2:where(.look-h1) { font-size: var(--fs-h1); line-height: 1.1; margin: 0 0 .5em; }
@media (max-width: 767px) {
  .heading h1.look-h2 { font-size: var(--fs-h2) !important; }
  .heading h1.look-h3 { font-size: var(--fs-h3) !important; }
}

/* Medien: flaches Logo in einer Kachel gleicher Höhe wie die Nachbarkacheln (300 × 101), Logo mittig */
.media-logo { aspect-ratio: 300 / 101; height: auto; object-fit: contain; }

/* ==========================================================================
   Design-Feinschliff (Nov. 2026): Linien-Icons, Schritte als Zeitleiste, Bewegung
   Regeln dazu in brand.md (Abschnitte 8 und 9).
   ========================================================================== */

/* Linien-Icons (Set Lucide, ISC-Lizenz): eine Strichstärke, runde Enden, Farbe = Schriftfarbe */
.icon--line svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; overflow: visible; }
.iconbox > .icon.icon--line { line-height: 0; }

/* Schritte als Zeitleiste (Startseite „In wenigen Schritten …“).
   Die Linie füllt sich beim normalen Scrollen; nichts hält an, kein zusätzlicher Scrollweg.
   Browser ohne Scroll-Animation und „Bewegung reduzieren“: Linie gleich ganz gefüllt. */
.steps { --steps-dot: 64px; --steps-gap: 32px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--steps-gap); margin: 0; padding: 0; list-style: none; view-timeline-name: --steps; }
.steps::before, .steps::after { content: ""; position: absolute; z-index: 0; top: calc(var(--steps-dot) / 2 - 1px); left: calc((100% - 3 * var(--steps-gap)) / 8); right: calc((100% - 3 * var(--steps-gap)) / 8); height: 2px; border-radius: 2px; }
.steps::before { background: var(--tag-blue-bg); }
.steps::after { background: var(--blue-text); transform-origin: left center; }
.steps > .step { position: relative; z-index: 1; margin: 0; padding: 0; text-align: center; }   /* zentriert wie die Überschrift darüber */
.step__icon { display: flex; align-items: center; justify-content: center; width: var(--steps-dot); height: var(--steps-dot); margin: 0 auto 24px; border: 2px solid var(--blue-text); border-radius: 50%; background: var(--white); color: var(--blue-text); font-size: 28px; }
.step__num { display: block; margin: 0 0 4px; font-size: var(--fs-small); font-weight: 700; line-height: 1.4; color: var(--blue-text); }
.step__title { margin: 0 0 8px; color: var(--blue-text); }
.steps > .step p { margin: 0; color: var(--blue-text-secondary); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps::after { animation: steps-fill linear both; animation-timeline: --steps; animation-range: entry 60% cover 50%; }
  }
}
@keyframes steps-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 989px) {
  /* Tablet und Handy: Schritte untereinander, Linie senkrecht zwischen den Kreisen */
  .steps { grid-template-columns: 1fr; }
  .steps::before, .steps::after { display: none; }
  .steps > .step { display: grid; grid-template-columns: var(--steps-dot) minmax(0, 1fr); column-gap: 24px; text-align: left; }
  .step__icon { grid-row: 1 / span 3; margin: 0; }
  .steps > .step:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: calc(var(--steps-dot) / 2 - 1px); top: var(--steps-dot); bottom: calc(-1 * var(--steps-gap)); width: 2px; background: var(--blue-text); }
}

/* Hover nur an klickbaren Elementen: Pfeil im Button rückt nach rechts, Bild der Beitragskarte zoomt leicht */
.btn .icon--glyph { transition: transform .3s ease-in-out; }
.btn:hover .icon--glyph, .btn:focus-visible .icon--glyph { transform: translateX(4px); }
.card__img { overflow: hidden; }
.card__img img { transition: transform .4s ease-out; }
.card:hover .card__img img, .card:focus-within .card__img img { transform: scale(1.03); }

/* Kopfzeile: ab etwas Scrollen leicht durchscheinend mit Unschärfe, Logo etwas kleiner (ohne Layoutsprung; Klasse setzt site.js) */
.site-header { transition: background-color .3s, box-shadow .3s; }
.site-header.is-scrolled { background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 12px rgba(0,0,0,.06); }
.site-logo img { transition: transform .3s; transform-origin: left center; }
.site-header.is-scrolled .site-logo img { transform: scale(.85); }

/* FAQ: weiches Auf- und Zuklappen (Browser ohne diese Funktion klappen wie bisher sofort) */
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--black); }
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
    .faq[open]::details-content { block-size: auto; }
  }
}

/* Karten und Schritte blenden beim ersten Erscheinen einmal kurz ein (site.js setzt .js-reveal und data-reveal).
   Ohne JavaScript oder bei „Bewegung reduzieren“ ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .4s ease-out, transform .4s ease-out; }
  .js-reveal [data-reveal]:nth-child(2) { transition-delay: 60ms; }
  .js-reveal [data-reveal]:nth-child(3) { transition-delay: 120ms; }
  .js-reveal [data-reveal]:nth-child(4) { transition-delay: 180ms; }
  .js-reveal [data-reveal]:nth-child(n+5) { transition-delay: 240ms; }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}

/* Sanfter Übergang zwischen Unterseiten (Browser ohne diese Funktion wechseln wie bisher); Kopfzeile bleibt stehen */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
  .site-header { view-transition-name: site-header; }
}

/* ==========================================================================
   Barrierefreiheit (Schritt 4, Nov. 2026, WCAG 2.2 AA; Regeln in brand.md, Abschnitt 12)
   ========================================================================== */

/* Links im Fließtext unterstrichen, damit sie nicht nur an der Farbe erkennbar sind (WCAG 1.4.1).
   Nicht für Buttons, Karten, Menüs und Linklisten (.text--columns); Symposium-Seiten (Archiv) ausgenommen. */
body:not([class*="maas-"]) main :is(.text:not(.text--columns), .ph-lead, .faq__body) :is(p, li) a:not(.btn) { text-decoration: underline; text-underline-offset: .15em; }

/* Pause-Button für das Logo-Laufband (WCAG 2.2.2): dezenter grauer Icon-Button (Lucide) rechts unten in der Logo-Fläche.
   Icon Mittelgrau auf #FAFAFA = 5,3 : 1 (nötig 3 : 1), Klickfläche 32 px (nötig 24 px). */
.card-panel:has(> .marquee-controls) { position: relative; }
.marquee-controls { position: absolute; right: 24px; bottom: 24px; display: flex; }
.marquee-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--grey-mid); cursor: pointer; transition: background-color .3s, color .3s; }
.marquee-toggle:hover { background: var(--grey-light); color: var(--grey-dark); }
.marquee-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.marquee-toggle .marquee-toggle__play, .marquee-toggle.is-paused .marquee-toggle__pause { display: none; }
.marquee-toggle.is-paused .marquee-toggle__play { display: block; }

@media (max-width: 767px) {
  /* Handy: Silbentrennung in Überschriften, damit lange Wörter nicht aus der Fläche laufen (WCAG 1.4.10) */
  h1, h2, h3, h4 { -webkit-hyphens: auto; hyphens: auto; }
  /* Linklisten in drei Spalten (Wissenshub) am Handy zweispaltig */
  body:not([class*="maas-"]) .text--columns.text--cols-3 { column-count: 2; }
}
@media (max-width: 479px) {
  body:not([class*="maas-"]) .text--columns.text--cols-3 { column-count: 1; }
}

/* Text nur für Screenreader (z. B. „öffnet in neuem Fenster“, Ansagen beim Karriere-Slider) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Einheitlicher Fokusrahmen bei Tastaturbedienung: 2 px Blau mit 2 px Abstand. */
:focus-visible { outline: 2px solid var(--blue-text); outline-offset: 2px; }

/* „Bewegung reduzieren“: Kopfzeile und Logo ohne Übergang (sanftes Scrollen ist oben bei html geregelt) */
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-logo img { transition: none; }
}

/* Wenig Bildschirmhöhe (Handy quer, starker Zoom): Kopfzeile scrollt mit, statt Inhalt zu verdecken (WCAG 2.4.11) */
@media (max-height: 500px) {
  .site-header { position: relative; }
  html { scroll-padding-top: 0; }
}

/* Rechtstexte: Überschriften eine Ebene höher ausgezeichnet (H2/H3 statt H3/H4, Impressum H3 statt H4), Aussehen wie vorher */
:where(.page-agb, .page-datenschutz, .page-en-general-terms-and-conditions, .page-en-privacy-policy) .text h2 { font-size: var(--fs-h3); letter-spacing: normal; }
:where(.page-agb, .page-datenschutz, .page-en-general-terms-and-conditions, .page-en-privacy-policy, .page-impressum, .page-en-imprint) .text h3 { font-size: var(--fs-h4); }

/* Modul-Badges auf Referenzen als Listen (Nov. 2026), Aussehen wie vorher */
:where(.page-en-projects, .page-referenzen) .referenzen-badges { margin: 0; padding: 0; list-style: none; }