@charset "UTF-8";
/* Grafik-Motive: dekoratives KI-Bild G6 (Closer); Hero-Fallback je Thema per CSS, kein Markup, kein Text. Mobil kleiner; je Gerätedichte lädt image-set die 1x- oder 2x-Datei. */
.home .closer{position:relative;overflow:hidden}
.home .closer > .wrap{position:relative;z-index:1}
.home .closer::before{content:"";position:absolute;pointer-events:none;z-index:0;aspect-ratio:4/3;background-size:cover;background-repeat:no-repeat;top:0;right:-6%;width:min(70vw,340px);opacity:.55;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);background-image:url(grafik/G6-1x.webp);background-image:image-set(url(grafik/G6-1x.webp) 1x,url(grafik/G6-2x.webp) 2x)}
@media (min-width:900px){.home .closer::before{width:min(40vw,560px);right:2%;opacity:.9}}
@media (prefers-reduced-motion:no-preference){.home .closer::before{transition:opacity .6s}}
/* Hero-Motive je Seite: SVG als CSS-Hintergrund (Animation im SVG). prefers-reduced-motion wirkt in einem SVG-Hintergrundbild nicht, deshalb schaltet die Seite auf *-still.svg um. */
.home .hero-c .wrap::after { background-image: url(motiv-puls-still-v2.svg); } /* statisch: läuft nach WebGL-Abschaltung/vor mobiler Eingabe nicht weiter */
body.dm-page-ki .hero-c .wrap::after { background-image: url(motiv-ki.svg); }
body.dm-page-reporting .hero-c .wrap::after { background-image: url(motiv-reporting.svg); }
body.dm-page-datenmigration .hero-c .wrap::after { background-image: url(motiv-datenmigration.svg); }
body.dm-page-umsetzung .hero-c .wrap::after { background-image: url(motiv-umsetzung-v2.svg); }
body.dm-page-projektleitung .hero-c .wrap::after { background-image: url(motiv-projektleitung.svg); }
body.dm-page-kontakt .hero-c .wrap::after { background-image: url(motiv-kontakt.svg); }
@media (prefers-reduced-motion: reduce) {
  body.dm-page-ki .hero-c .wrap::after { background-image: url(motiv-ki-still.svg); }
  body.dm-page-reporting .hero-c .wrap::after { background-image: url(motiv-reporting-still.svg); }
  body.dm-page-datenmigration .hero-c .wrap::after { background-image: url(motiv-datenmigration-still.svg); }
  body.dm-page-umsetzung .hero-c .wrap::after { background-image: url(motiv-umsetzung-still-v2.svg); }
  body.dm-page-projektleitung .hero-c .wrap::after { background-image: url(motiv-projektleitung-still.svg); }
  body.dm-page-kontakt .hero-c .wrap::after { background-image: url(motiv-kontakt-still.svg); }
}
@media (max-width: 833px) {
  body.dm-page-ki .hero-c .wrap::after,
  body.dm-page-umsetzung .hero-c .wrap::after,
  .home .hero-c .wrap::after { height: 240px; background-size: auto 460px; background-position: center; }
  body.dm-page-ki .hero-c .wrap::after { height: 310px; background-size: auto 434px; } /* Motiv-Inhalt y 110..590 von 700: ganz sichtbar */
  body.dm-page-umsetzung .hero-c .wrap::after { background-position: center -127px; } /* Inhalt y 215..537: Mitte statt Bildmitte */
  .home .hero-c .wrap::after { background-size: auto 399px; background-position: center -100px; } /* Inhalt y 184..589 von 700 */
  body.dm-page-kontakt .hero-c .wrap::after { height: 320px; background-size: contain; background-position: center; } /* Motiv 560x700: ungekürzt zeigen */
  .home .fx-hero { height: 240px; } /* 3D-Bühne nach der ersten Eingabe gleich hoch wie der Fallback, kein Sprung */
}
/* Desktop ab 1200 px (Hero-Spalte feste Breite): Motivbox bündig an den Spaltenrand (right 22px -> 0), damit die Textspalte (max-width 66 %) die Motivbox nicht überlappt */
@media (min-width:1200px){.hero-c .wrap::after,.fx-hero{right:0}}
/* Tablet 834-1199 px: gleiche Korrektur (Spalte ist dort Viewportbreite, Motivbox endet am Viewportrand; Motivinhalt hat im Bild eigenen Rand) */
@media (min-width:834px) and (max-width:1199px){.hero-c .wrap::after,.fx-hero{right:0}}
/* Zeichen als ASCII-Escape: robust gegen falsch erkannte CSS-Kodierung (Mojibake) */
.btn-ghost::after{content:"\203A"}
/* Makro-Fotos M1-M4 (dekorativ, kein Text): Kartenkopf oben in der Antwortkarte (#leistungen), CSS-Pseudoelement ohne Markup. Mobil: 16:9 oben im dunklen Block (nur 1x). Ab 834 px: Streifen ueber die volle Kartenbreite (dl::before), die helle Spalte behaelt ihre natuerliche Hoehe. Band 21:9 vor dem Closer auf /ki/ und /umsetzung/ (Markup per the_content-Filter im Theme, lazy, aria-hidden). */
.home #leistungen .case dl > div:nth-child(2)::before{content:"";display:block;aspect-ratio:16/9;margin:-24px -22px 8px;pointer-events:none;background:#091A2C center/cover no-repeat}
.home #leistungen #reporting dl > div:nth-child(2)::before{background-image:url(img/foto/M1-kopf-1x.webp)}
.home #leistungen #ki dl > div:nth-child(2)::before{background-image:url(img/foto/M3-kopf-1x.webp)}
.home #leistungen #pm dl > div:nth-child(2)::before{background-image:url(img/foto/M4-kopf-1x.webp)}
@media (min-width:834px){
.home #leistungen .case dl > div:nth-child(2)::before{content:none}
.home #leistungen .case dl::before{content:"";grid-column:1/-1;grid-row:1;aspect-ratio:3.4/1;pointer-events:none;background:#091A2C center/cover no-repeat}
.home #leistungen article.case dl > div:nth-child(1){grid-column:1;grid-row:2/4}
.home #leistungen article.case dl > div:nth-child(2){grid-column:2;grid-row:2}
.home #leistungen article.case dl > div:nth-child(3){grid-row:3}
.home #leistungen #reporting dl::before{background-image:image-set(url(img/foto/M1-kopf-1x.webp) 1x,url(img/foto/M1-kopf-2x.webp) 2x)}
.home #leistungen #ki dl::before{background-image:image-set(url(img/foto/M3-kopf-1x.webp) 1x,url(img/foto/M3-kopf-2x.webp) 2x)}
.home #leistungen #pm dl::before{background-image:image-set(url(img/foto/M4-kopf-1x.webp) 1x,url(img/foto/M4-kopf-2x.webp) 2x);background-position:center top}
}
/* Kein content-visibility:auto auf den Karten: der Hoehenschaetzwert weicht je Breite von der echten Hoehe ab (390 px: 1211 statt 1129/1178), die Seite schrumpft beim Scrollen und Smooth-Scroll-Anker (#haltung, #projekte, #ulm) landen 40 bis 350 px daneben (gemessen 390 bis 1440 px, HF-PRUEFUNG-KORREKTUR.md). Die Kartenkoepfe laden dafuer sofort. */
.foto-band{margin:0 0 56px;padding:0;line-height:0;background:#F5F2EB}
.foto-band img{display:block;width:100%;height:20vh;object-fit:cover;pointer-events:none}
@media (min-width:834px){.foto-band img{height:auto;aspect-ratio:1440/618}}
@media (max-width:833px){.foto-band{margin-bottom:36px;overflow:hidden}
/* M2: Die LED waere bei voller Breite ca. 6 px gross; mobil auf die LED-Seite vergroessern (nur transform, kein Layout) */
body.dm-page-umsetzung .foto-band img{transform:scale(2.2);transform-origin:90% 82%}}
/* grafik8: Abschnittskoepfe der Startseite. v2-start.css (laedt nach grafik.css) setzt .headline auf clamp(36px,4.4vw,62px) und h2 auf Spalte 1/8; deshalb h2.headline (hoehere Spezifitaet). */
.home .sec-head h2.headline{font-size:clamp(32px,3.2vw,46px);text-wrap:balance;hyphens:manual}
@media (min-width:1024px){.home .sec-head h2.headline{grid-column:1/11}}
/* Mobil: balance teilt zweizeilige Titel mitten im Kompositum ("KI-" / "Projekte"); greedy plus Breitenbegrenzung des ersten Titels (9,4em: "Woran Daten- & KI-" = 9,53em passt nicht mehr, "KI-Projekte" bleibt zusammen). Ein Umbruch nach Bindestrich ist per CSS sonst nicht zu verhindern. */
@media (max-width:833px){.home .sec-head h2.headline{text-wrap:wrap}}
@media (max-width:480px){.home #leistungen .sec-head h2.headline{max-width:9.4em}}
/* grafik8: Stimmen unserer Partner (#referenzen): H2 in Groesse der uebrigen Ueberschriften (grafik19), weisse Karten, Grotesk (Poppins) statt Serif-Token. */
.home #referenzen h2.headline{margin:0}
.home #referenzen .quotes{gap:24px;margin-top:40px}
/* grafik19: drei Stimmen; ab 1024 px drei Spalten, darunter (bis 833 px einspaltig) die dritte Karte ueber beide Spalten */
@media (min-width:1024px){.home #referenzen .quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:834px) and (max-width:1023px){.home #referenzen .quotes figure:nth-child(3){grid-column:1/-1}}
.home #referenzen .quotes figure{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:36px 32px;display:grid;gap:24px;align-content:start}
.home #referenzen .quotes blockquote{font:400 17px/1.6 var(--serif);letter-spacing:0;color:var(--ink);margin:0}
.home #referenzen .quotes cite{font-size:15px;color:var(--muted);margin:0;padding:0}
.home #referenzen .quotes cite b{display:block;font-weight:600;font-size:16px;color:var(--ink);margin-bottom:2px}
@media (max-width:833px){.home #referenzen .quotes{grid-template-columns:minmax(0,1fr);gap:20px}.home #referenzen .quotes figure{padding:28px 24px}}
/* grafik8: Zitat von Susann Moeller in #ulm (nach dem Lead). .home .place figure (Spalte 1/6) wuerde sonst auch dieses figure erfassen; Selektor nur fuer .ulm-zitat. */
.home #ulm .ulm-zitat{grid-column:auto;position:static;margin:clamp(24px,3vw,32px) 0;padding:0}
.home #ulm .ulm-zitat blockquote{margin:0;max-width:22em;font:400 clamp(24px,2.2vw,28px)/1.25 var(--serif);letter-spacing:-.01em;color:var(--on-night)}
.home #ulm .ulm-zitat figcaption{margin-top:12px;padding:0;font-size:15px;color:var(--sand)}