/* floriscapital.com — Stylesheet der Replik (September 2026, designernils).
   Werte stammen aus den Computed Styles der Vorlage (Canvas 7.0.5, Demo
   „Real Estate“) bei 1440 px; Hinweise zu Abweichungen stehen am Ort.
   Schriften: Roboto und Rubik als variable WOFF2 (Latin), selbst gehostet. */

@font-face { font-family: Roboto; font-style: normal; font-weight: 300 700; font-display: swap; src: url(schrift/roboto-var.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Rubik;  font-style: normal; font-weight: 300 900; font-display: swap; src: url(schrift/rubik-var.woff2)  format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --blau: #0A2A54;        /* Hauptfarbe: Fußzeile, feste Kopfzeile, Knöpfe */
  --schiefer: #2C3E50;    /* Kontaktkasten auf der Kontaktseite */
  --text: #212529;
  --hell: #F8F9FA;        /* graue Streifen, Akkordeon-Köpfe */
  --grau: #E5E5E5;        /* Adresskasten Startseite */
  --linie: #E9ECEF;
  --band: #343A40;        /* Kopfband der Unterseiten */
  --linkedin: #0E76A8;
  --xing: #126567;
  --container: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font: 400 16px/1.5 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: #fff; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
.knopf:hover, .knopf:focus-visible, .sozial a:hover, .beteiligung a:hover, .kopf__nav a:hover, .fuss__links a:hover { text-decoration: none; }
/* Links mitten im Fließtext bleiben unterstrichen, damit sie ohne Farbe erkennbar sind */
.recht p a, .recht li a, .zustimmung a, .karte__hinweis p a, .danke p a, .adresse p a, .kontaktkasten p a, .fakten a { text-decoration: underline; }
h1, h2, h3, h4, h5 { font-family: Rubik, Roboto, sans-serif; margin: 0; color: var(--text); }
p { margin: 0 0 30px; line-height: 1.65; }
ul { margin: 0; padding: 0; list-style: none; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--blau); outline-offset: 3px; }
.kopf:focus-visible, .kopf a:focus-visible, .fuss a:focus-visible { outline-color: #fff; }

/* Raster wie in der Vorlage (Bootstrap-Container, 24 px Spaltenabstand) */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 12px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.row > * { padding: 0 12px; width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Kopfzeile ─────────────────────────────────────────────────────── */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 50; background: var(--blau); transition: background .3s; }
.kopf__zeile { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.kopf__logo { display: block; }
.kopf__logo img { width: 127px; height: 64px; }
.kopf__logo .logo--dunkel { display: none; }
.kopf__knopf { background: none; border: 0; color: #fff; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.kopf__knopf svg { width: 24px; height: 24px; fill: currentColor; }
.kopf__nav { display: none; position: absolute; left: 0; right: 0; top: 64px; background: var(--blau); padding: 8px 0 12px; border-top: 1px solid rgba(255,255,255,.1); }
.kopf__nav.offen { display: block; }
.kopf__nav ul { padding: 0 12px; }
.kopf__nav a { display: block; padding: 12px; color: #F8F9FA; text-decoration: none; font: 400 14px/1.3 Rubik, sans-serif; text-transform: uppercase; }
.kopf__nav a[aria-current] { color: #DDD; }
@media (min-width: 992px) {
  .kopf { background: transparent; }
  .kopf.fest { background: var(--blau); box-shadow: 0 0 10px rgba(0,0,0,.1); }
  .kopf__zeile { height: 80px; }
  .kopf__logo img { width: 159px; height: 80px; }
  .kopf__knopf { display: none; }
  .kopf__nav { display: block; position: static; background: none; padding: 0; border: 0; }
  .kopf__nav ul { display: flex; padding: 0; }
  .kopf__nav a { padding: 29px 17px; font-size: 13px; line-height: 22px; }
  /* Startseite: der Kopf liegt auf dem hellen Löwenbild. In der Vorlage war die
     weiße Schrift dort unlesbar; deshalb dunkle Schrift und dunkles Logo,
     bis die Leiste beim Scrollen dunkelblau wird. */
  .kopf--hell:not(.fest) .kopf__nav a { color: var(--text); }
  .kopf--hell:not(.fest) .kopf__nav a[aria-current] { color: var(--blau); }
  .kopf--hell:not(.fest) .logo--hell { display: none; }
  .kopf--hell:not(.fest) .logo--dunkel { display: block; }
}

/* ── Startseite: Eröffnung ─────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 100px 0 80px; background: #fff url(bilder/loewe-1024.webp) right center / cover no-repeat; }
@media (min-width: 992px) { .hero { padding: 0; background-image: url(bilder/loewe-1920.webp); } }
.hero__text { width: 100%; }
@media (min-width: 768px) { .hero__text { width: 66.667%; } }
@media (min-width: 992px) { .hero__text { width: 58.333%; } }
.hero p.hero__label { font: 400 12px/1.5 Roboto, sans-serif; text-transform: uppercase; letter-spacing: 4px; opacity: .5; margin: 0 0 20px; }
.hero h1 { font-size: 36px; line-height: 1.2; font-weight: 700; margin: 0 0 24px; }
.hero p { font-size: 18px; line-height: 1.5; font-weight: 400; margin: 0 0 32px; text-wrap: pretty; }
@media (min-width: 768px) { .hero h1 { font-size: 56px; margin-bottom: 30px; } .hero p { font-size: 20px; margin-bottom: 48px; } }
.hero__pfeil { position: absolute; left: 50%; bottom: 20px; width: 32px; height: 32px; margin-left: -16px; color: var(--blau); animation: wippen 2s ease-in-out infinite; }
.hero__pfeil svg { width: 32px; height: 32px; fill: currentColor; }
@media (min-width: 992px) { .hero__pfeil { bottom: 20px; } }
@keyframes wippen { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .hero__pfeil { animation: none; } }

/* ── Startseite: Gemeinsam ─────────────────────────────────────────── */
.gemeinsam { padding-top: 48px; }
.gemeinsam h2 { margin-bottom: 50px; }
.gemeinsam__bild { margin-top: 40px; }
@media (min-width: 768px) {
  .gemeinsam__text { width: 41.667%; }
  .gemeinsam__bild { width: 50%; margin-left: 8.333%; margin-top: 0; padding-right: 24px; }
}
h2 { font-size: 28px; line-height: 1.2; font-weight: 700; text-wrap: balance; }
@media (min-width: 768px) { h2 { font-size: 34px; } }

/* Akkordeon als <details>: kein JavaScript, immer nur eins offen */
.akkordeon { margin-bottom: 20px; }
.akkordeon details { margin-bottom: 5px; }
.akkordeon summary { display: flex; align-items: center; gap: 0; background: var(--hell); border-radius: 2px; padding: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary svg { width: 16px; height: 16px; margin: 0 6px; flex: none; fill: currentColor; }
.akkordeon .i-offen { display: none; }
.akkordeon details[open] .i-offen { display: block; }
.akkordeon details[open] .i-zu { display: none; }
.akkordeon summary span { padding-left: 6px; }
.akkordeon .inhalt { padding: 12px; margin-top: 5px; line-height: 24px; }

/* ── Startseite: Kriterien ─────────────────────────────────────────── */
.streifen { background: var(--hell); padding: 64px 0; margin: 48px 0; }
@media (min-width: 768px) { .streifen { padding: 80px 0; margin: 64px 0; } }
.kriterien .container { padding-top: 48px; }
.kriterien__kopf { max-width: 660px; margin: 0 auto; text-align: center; }
.kriterien__kopf h2 { font-size: 34px; line-height: 1.2; }
@media (min-width: 768px) { .kriterien__kopf h2 { font-size: 40px; } }
.kriterien__kopf p { margin-bottom: 0; }
.kriterien__kopf::after, .ueberschrift::after { content: ""; display: block; width: 40px; border-top: 2px solid var(--text); margin-top: 30px; }
.kriterien__kopf::after { margin: 62px auto 0; }
.kriterien__kopf { margin-bottom: 55px; }
.merkmale { max-width: 1016px; margin: 0 auto 66px; }
.merkmal { text-align: center; margin-bottom: 40px; }
@media (min-width: 576px) { .merkmal { width: 50%; margin-bottom: 0; } }
.merkmal svg { width: 32px; height: 32px; fill: var(--blau); margin: 0 auto 24px; display: block; }
.merkmal h3 { font: 400 18px/1.5 Rubik, sans-serif; }
.merkmal h3 span { display: block; font: 300 18px/1.5 Roboto, sans-serif; margin-top: 5px; }
.kriterien__liste { max-width: 853px; margin: 0 auto; }
.kriterien__liste > p { text-align: center; }
.kriterien__liste ul { list-style: disc outside; padding-left: 20px; margin-bottom: 30px; }
@media (min-width: 992px) { .kriterien__liste ul { padding-left: 0; list-style-position: outside; margin-left: 16px; } }
.kriterien__liste li { line-height: 24px; }
.kriterien__liste > p { line-height: 26.4px; }

/* ── Startseite: Peter ─────────────────────────────────────────────── */
.abschnitt { padding-block: 64px; }
@media (min-width: 768px) { .abschnitt { padding-block: 80px; } }
.peter .row { align-items: center; }
.peter__bild { margin: 0 auto 32px; max-width: 416px; }
.peter__text p { font: 400 20px/1.45 Rubik, sans-serif; text-wrap: pretty; }
@media (min-width: 768px) { .peter__text p { font-size: 24px; } }
.peter__text p.peter__name { font: 500 16px/1.5 Roboto, sans-serif; margin-bottom: 40px; }
@media (min-width: 768px) {
  .peter__bild { width: 33.333%; margin: 0 0 0 8.333%; max-width: none; }
  .peter__text { width: 58.333%; padding: 32px; }
}
.knopf { display: inline-block; background: var(--blau); color: #fff; text-decoration: none; font-size: 20px; line-height: 30px; padding: 8px 24px; border-radius: 8px; text-align: center; min-width: 280px; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
.knopf:hover, .knopf:focus-visible { background: #12376b; }

/* ── Karte und Adresse ─────────────────────────────────────────────── */
.kontaktzeile { display: flex; flex-wrap: wrap; }
.kontaktzeile .karte { display: none; }
.adresse { background: var(--grau); padding: 40px 24px; width: 100%; }
.adresse h4 { font-size: 18px; font-weight: 700; letter-spacing: 1px; margin-bottom: 30px; }
.adresse p { line-height: 24px; }
.kontaktkasten p { font-size: 15px; line-height: 1.7; }
@media (min-width: 768px) {
  .kontaktzeile .karte { display: block; width: 66.667%; min-height: 394px; }
  .adresse { width: 33.333%; padding: 40px 40px 40px 52px; }
}
.sozial { display: flex; gap: 5px; }
.sozial a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.sozial a svg { width: 14px; height: 14px; fill: currentColor; }
.sozial .linkedin { background: var(--linkedin); }
.sozial .xing { background: var(--xing); }
/* helle Variante (Zusammenarbeit): graue Kreise, dunkles Zeichen, Markenfarbe erst beim Zeigen.
   Selektoren mit zwei Klassen, damit sie die Markenfarben oben überstimmen. */
.sozial--hell .linkedin, .sozial--hell .xing { background: var(--linie); color: var(--text); }
.sozial--hell .linkedin:hover, .sozial--hell .linkedin:focus-visible { background: var(--linkedin); color: #fff; }
.sozial--hell .xing:hover, .sozial--hell .xing:focus-visible { background: var(--xing); color: #fff; }

/* Karte: Vorschaubild vom eigenen Server; die Live-Karte (Leaflet +
   OpenStreetMap) lädt erst nach dem Klick — dann, und erst dann, gehen
   Daten an OpenStreetMap. Kein Cookie, kein Banner. */
.karte { position: relative; background: #e9e6e0 url(karte/vorschau.webp) center / cover no-repeat; min-height: 300px; }
.karte__hinweis { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; background: rgba(255,255,255,.55); backdrop-filter: blur(1.5px); }
.karte__hinweis p { max-width: 460px; font-size: 14px; line-height: 1.5; margin: 0 0 16px; color: var(--text); }
.karte__hinweis .knopf { min-width: 0; font-size: 16px; line-height: 24px; padding: 8px 20px; }
.karte__hinweis a { font-size: 14px; margin-top: 14px; color: var(--blau); }
.karte__leaflet { position: absolute; inset: 0; }
.karte__quelle { position: absolute; right: 6px; bottom: 4px; font-size: 11px; color: #555; background: rgba(255,255,255,.7); padding: 1px 5px; border-radius: 2px; }
.karte__quelle a { color: inherit; }
.leaflet-container { font: inherit; }
.leaflet-tile-pane { filter: grayscale(.35) saturate(.65) brightness(1.04) contrast(.95); }

/* ── Fußzeile ──────────────────────────────────────────────────────── */
.fuss { background: var(--blau); color: #E9ECEF; border-top: 5px solid rgba(255,255,255,.06); }
.fuss__innen { padding-block: 64px; }
@media (min-width: 768px) { .fuss__innen { padding-block: 80px; } }
.fuss__marke { order: 2; margin-top: 40px; }
.fuss__marke img { width: 159px; height: 80px; margin: 0 0 20px -10px; }
.fuss__marke p { line-height: 1.7; }
.fuss__marke .linie { border-top: 1px solid rgba(255,255,255,.1); margin: 30px 0; }
.fuss__marke .klein { font-size: 13px; font-weight: 300; line-height: 1.7; margin: 0 0 30px; }
.fuss a { color: rgba(255,255,255,.75); text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { color: #fff; }
.fuss h2 { font: 400 18px/1.5 Rubik, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #F8F9FA; margin-bottom: 30px; }
.fuss__spalte { margin-bottom: 40px; }
.fuss__links li { padding: 4px 0 4px 16px; position: relative; line-height: 24px; }
.fuss__links li a { font-size: 14.4px; }
.fuss__links li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border: solid rgba(255,255,255,.75); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.fuss__links a { padding-left: 8px; }
@media (min-width: 768px) { .fuss__spalte { width: 50%; margin-bottom: 0; } }
@media (min-width: 992px) {
  .fuss__marke { width: 41.667%; order: 0; margin-top: 0; }
  .fuss__rest { width: 58.333%; display: flex; }
  .fuss__spalte { width: 50%; }
}

/* Nach-oben-Knopf */
.hoch { position: fixed; right: 30px; bottom: 50px; width: 40px; height: 40px; border-radius: 50%; background: var(--blau); color: #fff; border: 0; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 40; }
.hoch svg { width: 18px; height: 18px; fill: currentColor; }
.hoch.sichtbar { display: flex; }

/* ── Unterseiten: Kopfband ─────────────────────────────────────────── */
/* Kopfband: Blatt-Grafik unter einer Grauschicht (rgba .6), wie die Vorlage
   sie durch das Parallax-Plugin zeigt; Ausschnitt oben links, 125 % Breite. */
.band { background: linear-gradient(rgba(52,58,64,.6), rgba(52,58,64,.6)), var(--band) url(bilder/seitentitel.webp) 40% 30% / 125% auto no-repeat; color: #F8F9FA; text-align: center; padding: 286px 0 110px; }
@media (max-width: 767px) { .band { background-size: 200% auto; background-position: 20% 40%; } }
@media (min-width: 992px) { .band { min-height: 420px; display: flex; align-items: center; padding: 66px 0 0; } .band--hoch { min-height: 495px; } }
.band .container { width: 100%; }
.band h1 { font: 400 32px/1 Rubik, sans-serif; color: #F8F9FA; }
@media (min-width: 768px) { .band h1 { font-size: 46.4px; } }
.band .band__unter { font: 400 22px/1.5 Rubik, sans-serif; color: #F8F9FA; margin-top: 6px; }
@media (min-width: 768px) { .band .band__unter { font-size: 30px; } }

/* ── Portfolio ─────────────────────────────────────────────────────── */
.portfolio { padding-top: 120px; }
@media (min-width: 992px) { .portfolio { padding-top: 160px; padding-bottom: 64px; } }
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin: 0 0 60px; padding: 6px 12px; }
@media (min-width: 992px) { .filter { margin-bottom: 76px; } }
.filter button { font: 400 15px/22.5px Roboto, sans-serif; color: #6C757D; background: none; border: 0; border-radius: 22px; padding: 9px 20px; cursor: pointer; }
.filter button[aria-pressed="true"] { background: var(--blau); color: #fff; }
.filter button:hover:not([aria-pressed="true"]) { color: var(--text); }
.raster { display: grid; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 576px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .raster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 992px) { .raster { grid-template-columns: repeat(4, 1fr); } }
.beteiligung { position: relative; overflow: hidden; }
.beteiligung[hidden] { display: none; }
.beteiligung img { width: 100%; aspect-ratio: 600 / 513; }
.beteiligung a, .beteiligung .ohne-link { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; text-decoration: none; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .35s; }
.beteiligung a:hover, .beteiligung a:focus-visible, .beteiligung .ohne-link:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .beteiligung a, .beteiligung .ohne-link { transition: none; } }
.beteiligung h3 { font: 400 20px/1.5 Rubik, sans-serif; color: #F8F9FA; }
.beteiligung span { color: #CED4DA; }

/* ── Zusammenarbeit ────────────────────────────────────────────────── */
.investor__bild { min-height: 675px; background: url(bilder/odeonsplatz-600.webp) 25% 50% / cover no-repeat; margin: 0 -12px 32px; width: calc(100% + 24px); }
.investor__text { padding: 0; }
.ueberschrift { margin-bottom: 50px; }
.ueberschrift .vor { display: block; color: #2C3E50; margin-bottom: 8px; }
.ueberschrift h2 { font-size: 30px; line-height: 1.2; font-weight: 700; }
.finden .ueberschrift h2, .schreiben .ueberschrift h2 { font-size: 34px; }
.investor__text p { line-height: 26.4px; }
@media (min-width: 768px) {
  .investor__bild { width: 41.667%; min-height: 675px; margin: 0; background-image: url(bilder/odeonsplatz.webp); background-position: center; }
  .investor__text { width: 58.333%; padding: 32px; }
  .investor__text .ueberschrift { margin-bottom: 57px; }
}
.streifen--eng { padding-block: 64px; margin: 0; }
.basis { max-width: 880px; padding: 0 20px; }
@media (min-width: 768px) { .basis { padding: 32px; } }
.basis h2 { font-size: 30px; line-height: 1.2; font-weight: 700; margin-bottom: 24px; }
.basis p { line-height: 24px; }

/* ── Kontakt ───────────────────────────────────────────────────────── */
.kontaktbuehne { position: relative; }
.kontaktbuehne__bild { box-shadow: 0 0 40px rgba(0,0,0,.3); }
.kontaktkasten { background: var(--schiefer); color: #E9ECEF; padding: 24px; line-height: 24px; }
.kontaktkasten strong { color: #E9ECEF; }
.kontaktkasten a { color: #fff; }
.kontaktkasten .sozial { margin-top: 15px; }
@media (min-width: 992px) {
  .kontaktbuehne { padding-top: 30px; min-height: 548px; }
  .kontaktbuehne__bild { position: relative; width: 60%; z-index: 2; }
  .kontaktkasten { position: absolute; top: 0; right: 0; width: 50%; padding: 60px 60px 60px 180px; z-index: 1; }
}
.finden { margin-top: 80px; }
@media (min-width: 992px) { .finden { margin-top: 129px; } }
.finden .karte { margin-top: 16px; }
.karte--gross { min-height: 450px; box-shadow: 0 0 40px rgba(0,0,0,.06); }

/* Formular: gehärtet ohne Dritte (senden.php), Optik in der Sprache der Seite */
.schreiben { margin-top: 80px; }
.formular__stand, .formular .fehler, .formular label { line-height: 1.5; }
.formular { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .formular { grid-template-columns: 1fr 1fr; } .formular .breit { grid-column: 1 / -1; } }
.formular label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.formular input, .formular textarea { width: 100%; font: inherit; color: var(--text); background: #fff; border: 1px solid #ced4da; border-radius: 4px; padding: 10px 12px; }
.formular input:focus, .formular textarea:focus { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
.formular textarea { min-height: 160px; resize: vertical; }
.formular .zustimmung { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; }
.formular .zustimmung input { width: auto; margin-top: 3px; }
.formular .fehler { color: #a3202f; font-size: 14px; margin-top: 6px; display: none; }
.formular [aria-invalid="true"] { border-color: #a3202f; }
.formular [aria-invalid="true"] + .fehler { display: block; }
.formular .honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__stand { margin-top: 16px; min-height: 24px; }

/* ── Fallbeispiel ──────────────────────────────────────────────────── */
.fall__bilder img { width: 100%; border-radius: 8px; margin-bottom: 10px; }
.fall__text h2 { font: 400 24px/1.25 Rubik, sans-serif; text-wrap: balance; margin-bottom: 30px; }
.fall__text .kurz { line-height: 26.4px; opacity: .7; }
.fall__text .linie { border-top: 1px solid rgba(0,0,0,.1); margin: 48px 0; }
.fall__text h3 { font: 700 18px/1.5 Rubik, sans-serif; margin-bottom: 30px; }
.fall__text ul { margin-bottom: 30px; }
.fall__text li { position: relative; padding: 4px 0 4px 16px; line-height: 24px; }
.fall__text li::before { content: ""; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border: solid var(--text); border-width: 2px 2px 0 0; transform: rotate(45deg); }
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.fakten h4 { font: 700 14px/1.5 Rubik, sans-serif; margin-bottom: 8px; }
.fakten p { font-size: 18px; line-height: 1.65; opacity: .8; margin: 0; }
.fakten .klein { font-size: 16px; opacity: 1; }
@media (min-width: 992px) {
  .fall .row { margin: 0 -25px; }
  .fall__bilder { width: 58.333%; padding: 0 25px; }
  .fall__text { width: 41.667%; padding: 0 25px; }
}

/* ── Rechtstexte ───────────────────────────────────────────────────── */
.recht { max-width: 880px; }
.recht h1 { font-size: 34px; margin-bottom: 30px; }
.recht h2 { font-size: 28px; margin: 40px 0 20px; }
.recht h3 { font-size: 22px; margin: 30px 0 16px; }
.recht h4 { font-size: 18px; margin: 24px 0 12px; }
.recht p, .recht li { line-height: 26px; }
.recht ul { list-style: disc; padding-left: 22px; margin-bottom: 30px; }
.recht a { word-break: break-word; }

/* Danke-Seite */
.danke { max-width: 660px; }
.danke h1 { font-size: 34px; margin-bottom: 30px; }

/* ── Mikro-Animationen ─────────────────────────────────────────────────
   Dezent: nur Deckkraft und 14 px Versatz, einmalig, wenn ein Element ins
   Bild kommt. Greift nur mit JavaScript (html.js), sonst ist alles sofort
   da. Große Überschriften (H1 der Eröffnung, Kopfband) bleiben unbewegt,
   damit der erste sichtbare Inhalt nicht verzögert wird. */
.js [data-auf] { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
.js [data-auf].da { opacity: 1; transform: none; will-change: auto; }
.js [data-auf="links"] { transform: translateX(-14px); }
.js [data-auf="rechts"] { transform: translateX(14px); }
.js [data-auf="leise"] { transform: none; }
/* "rutsch": nur Versatz, keine Deckkraft — für die größten Textblöcke der Eröffnung, damit der erste Anstrich nicht wartet */
.js [data-auf="rutsch"] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .js [data-auf] { opacity: 1; transform: none; transition: none; }
}
/* Zeiger-Reaktionen */
.knopf { transition: background .2s, transform .2s, box-shadow .2s; }
.knopf:hover, .knopf:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(10,42,84,.22); }
.knopf:active { transform: scale(.96); box-shadow: none; }
.sozial a { transition: transform .2s, background .2s, color .2s; }
.sozial a:hover, .sozial a:focus-visible { transform: scale(1.08); }
.kopf__nav a { transition: opacity .2s; }
.kopf__nav a:hover { opacity: .75; }
.akkordeon summary { transition: background .2s; }
.akkordeon summary:hover { background: #eef0f2; }
@keyframes einblenden { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.akkordeon details[open] .inhalt { animation: einblenden .3s ease-out; }
.filter button { transition: background .2s, color .2s; }
.fuss__links a { transition: color .2s, padding-left .2s; }
.fuss__links a:hover { padding-left: 12px; }
@media (prefers-reduced-motion: reduce) {
  .knopf, .sozial a, .kopf__nav a, .akkordeon summary, .filter button, .fuss__links a { transition: none; }
  .akkordeon details[open] .inhalt { animation: none; }
  .knopf:hover, .sozial a:hover { transform: none; }
}

/* Aufwertung 25.09.2026 (Nils): Bilder mit gleicher Rundung wie in den
   Fallbeispielen und einer hauchfeinen Kontur, damit sie sich vom Weiß lösen. */
.gemeinsam__bild img, .peter__bild img, .kontaktbuehne__bild { border-radius: 8px; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; }
@media (min-width: 768px) { .investor__bild { border-radius: 8px; outline: 1px solid rgba(0,0,0,.1); outline-offset: -1px; } }

/* Logo-Wand optisch angeglichen: Faktor je Logo aus der gemessenen Fläche
   (Ziel 37.000 px², Faktor 0,8 bis 1,45), damit alle gleich schwer wirken.
   Vorher belegte Ungerer 14.000 px², Autarkize 65.000 px². */
.beteiligung img[src$="beteiligung-autarkize.webp"] { transform: scale(0.80); }  /* 477×137 */
.beteiligung img[src$="beteiligung-bintec.webp"] { transform: scale(0.89); }  /* 375×125 */
.beteiligung img[src$="beteiligung-chorus.webp"] { transform: scale(1.13); }  /* 369×78 */
.beteiligung img[src$="beteiligung-cryptovision.webp"] { transform: scale(1.15); }  /* 376×75 */
.beteiligung img[src$="beteiligung-dialog-semiconductor.webp"] { transform: scale(0.93); }  /* 376×113 */
.beteiligung img[src$="beteiligung-ecronova-polymer.webp"] { transform: scale(1.05); }  /* 354×94 */
.beteiligung img[src$="beteiligung-hilotherm.webp"] { transform: scale(1.27); }  /* 354×65 */
.beteiligung img[src$="beteiligung-hls-engineering-group.webp"] { transform: scale(0.86); }  /* 375×132 */
.beteiligung img[src$="beteiligung-occyo.webp"] { transform: scale(1.09); }  /* 329×94 */
.beteiligung img[src$="beteiligung-ricion.webp"] { transform: scale(0.86); }  /* 376×134 */
.beteiligung img[src$="beteiligung-simply.webp"] { transform: scale(1.17); }  /* 375×72 */
.beteiligung img[src$="beteiligung-suse.webp"] { transform: scale(0.80); }  /* 259×224 */
.beteiligung img[src$="beteiligung-sybilion.webp"] { transform: scale(0.85); }  /* 506×102 */
.beteiligung img[src$="beteiligung-time-matters.webp"] { transform: scale(1.40); }  /* 378×50 */
.beteiligung img[src$="beteiligung-ungerer.webp"] { transform: scale(1.45); }  /* 325×44 */