html, body { height: 100%; }
:root { --insp-sap-navy: #0a1930; --insp-sap-blue: #0070f2; --insp-text-gray: #6a6d70; }
/* Sentiment-Icons (Pro/Contra/Neutral) */
.inspSentiment {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
}
.inspSentiment.pro {
color: #107e3e;
background-color: rgba(16, 126, 62, 0.1);
border-left: 3px solid #107e3e;
}
.inspSentiment.pro::before {
content: "✓";
font-weight: bold;
font-size: 1.1rem;
}
.inspSentiment.contra {
color: #e81828;
background-color: rgba(232, 24, 40, 0.1);
border-left: 3px solid #e81828;
}
.inspSentiment.contra::before {
content: "✕";
font-weight: bold;
font-size: 1.1rem;
}
.inspSentiment.neutral {
color: #666;
background-color: rgba(102, 102, 102, 0.1);
border-left: 3px solid #999;
}
.inspSentiment.neutral::before {
content: "−";
font-weight: bold;
font-size: 1.1rem;
}
/* Sentiment-List (für Lage-Seite) */
.inspSentimentList {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 1rem 0;
}
/* Sticky Navigation Bar (.snav) */
.inspStickyNav {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid #e0e0e0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.inspStickyNavBar {
height: 50px;
padding: 0 1rem;
gap: 0.5rem;
overflow-x: auto;
overflow-y: hidden;
}
.inspStickyNavTabs {
flex-wrap: nowrap;
gap: 0.25rem;
flex: 1;
min-width: 0;
}
.inspStickyNavTab {
white-space: nowrap;
padding: 0 0.75rem !important;
height: 50px !important;
line-height: 50px !important;
border-radius: 0 !important;
color: #666 !important;
font-size: 0.875rem;
border-bottom: 2px solid transparent;
transition: all 0.2s ease;
}
.inspStickyNavTab:hover {
color: #333 !important;
background: rgba(0, 0, 0, 0.03);
}
.inspStickyNavTab.active {
color: #0066cc !important;
border-bottom-color: #0066cc !important;
font-weight: 500;
}
.inspStickyNavRight {
gap: 0.5rem;
flex-shrink: 0;
}
.inspLogo .sapMTitle { font-weight: 700; letter-spacing: .02em; }
.inspCrumb { opacity: .75; }
.inspPartner {
border: 1px solid rgba(255,255,255,.25);
border-radius: 6px; padding: 2px 8px; margin: 0 6px; font-size: .75rem;
}
.inspMuted { opacity: .6; font-size: .8rem; }
/* Baustein 5 (17.07., Ladeflow-Audit): Quelle-Text einer Risiko-Kachel bei echtem Live-Fehler
("...-Dienst gerade nicht erreichbar") sichtbar von "hier nicht zutreffend" (normale .inspMuted,
grau, kein Fehler) unterscheiden, statt beides gleich unauffällig grau zu zeigen. */
.inspMutedWarning { opacity: .9; font-size: .8rem; color: #c98a12; font-weight: 600; }
/* Rechenweg-Wertspalte (14.07., Bugfix "Preis ist abgeschnitten") — feste Spaltenbreite (siehe
VerfahrenDetail.view.xml) reicht allein oft nicht, wenn der Browser die Zelle trotzdem umbrechen
lässt; white-space:nowrap erzwingt eine Zeile, tabular-nums sorgt für gleich breite Ziffern und
damit sauber untereinanderstehende Werte (einheitliches Format, wie gewünscht). */
/* Etwas Abstand zum rechten Zellenrand (14.07., Nutzerfeedback "noch etwas weiter von der rechten
Rand weg zur Mitte") — rechtsbündig lag der Text sonst direkt an der Spaltengrenze zur
Quelle-Spalte an. */
.inspRechenwegWert.sapMText { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; padding-right: 1.25rem; box-sizing: border-box; display: inline-block; }
/* Ertragswert-/Sachwert-/Bodenwert-/Vergleichswert-Rechenweg (19.07., Nutzerfeedback "schlichtweg
nicht lesbar"): Wert.view.xml#/rechenschritte nutzte bisher ein nacktes ObjectNumber OHNE die
obige inspRechenwegWert-Klasse (nur der separate Erbbaurechtswert-Block hatte sie) — kleinere
Schrift, kein garantierter Abstand zum Kartenrand, kein tabular-nums. ObjectNumber rendert anders
als Text (äußeres div.sapMObjectNumber, innerer span.sapMObjectNumberText), daher eigener Selektor
statt der bestehenden Text-spezifischen Regel oben. */
.inspRechenwegWert.sapMObjectNumber .sapMObjectNumberText { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; padding-right: 1.25rem; box-sizing: border-box; }
/* Footer-Schnellzugriff: 5 meistgenutzte Module, ergänzt die Sidebar */
.inspQuickNav.sapMBar {
border-top: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
background: var(--sapObjectHeader_Background, #fff);
padding: .25rem 0;
}
.inspQuickNavBtn.sapMBtn { margin: 0 .2rem; }
/* Konstanter Fuß auf allen Seiten */
.inspFooter.sapMBar {
border-top: 1px solid var(--sapGroup_ContentBorderColor, #d9d9d9);
background: var(--sapObjectHeader_Background, #fff);
font-size: .75rem;
}
.inspFooter .sapMText { opacity: .7; }
/* Entry-Kacheln */
.inspEntryPage.sapMPageBgStandard { background: var(--sapBackgroundColor); }
.inspTile { margin: .35rem; cursor: pointer; }
/* Landing — 1:1-Nachbau des sap.com/germany-Stils (04.07., Screenshots als Vorlage): komplett heller
Header+Hero (SAP hat NIE einen dunklen Hero), fette fast-schwarze Headlines, SAP-Blau nur für Buttons/Links,
Sektionen trennen sich nur durch Hintergrundwechsel Weiß/Hellgrau, keine Schatten/Verläufe/Glow. */
.inspLandingPage.sapMPageBgStandard { background: #fff; }
.inspLandingHeader { background: #fff; border-bottom: 1px solid #e5e5e5; }
.inspLandingAuthLinks { box-sizing: border-box; padding: 1rem 2rem; }
.inspLandingLink { color: #1a1a1a !important; font-weight: 500; }
.inspAuthPanel { position: relative; z-index: 10; margin-top: .5rem; }
.inspLandingCard { box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.inspHero { padding: 3.5rem 2rem 3.5rem; max-width: 46rem; margin: 0 auto; position: relative; }
/* Dezente animierte Verlaufsform hinter der Hero-Headline (Vorbild: sap.com "Autonomous Enterprise"-Hero) —
reines CSS radial-gradient + Rotation/Skalierung, kein SVG/WebGL, läuft auf jedem Gerät flüssig. */
.inspHeroBlob {
position: absolute; top: 0; left: 50%; width: 46rem; height: 30rem;
transform: translateX(-50%); z-index: 0; pointer-events: none;
background:
radial-gradient(circle at 30% 35%, rgba(0,112,242,.4), transparent 55%),
radial-gradient(circle at 68% 55%, rgba(124,77,255,.34), transparent 55%),
radial-gradient(circle at 50% 75%, rgba(0,180,216,.3), transparent 55%);
filter: blur(24px);
animation: inspHeroBlobMove 14s ease-in-out infinite alternate;
}
@keyframes inspHeroBlobMove {
0% { transform: translateX(-50%) rotate(0deg) scale(1); }
100% { transform: translateX(-50%) rotate(8deg) scale(1.08); }
}
.inspHeroPersona { color: #0070f2 !important; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* SAP-Stil: große, fette, fast-schwarze Headline auf weißem Grund (Vorbild: sap.com Sektionstitel) */
.inspHeroTitle { color: #1a1a1a !important; font-size: 3.2rem !important; line-height: 1.1 !important; letter-spacing: -.02em; font-weight: 700 !important; }
.inspHeroSub { color: #4a4a4a !important; max-width: 32rem; font-size: 1.1rem; }
.inspHeroSearch { max-width: 34rem; }
.inspHeroSearch .sapMInputBaseInner { font-size: 1rem; }
.inspHero .sapMLnk { color: #0070f2 !important; }
.inspHeroFinePrint { color: #6a6d70 !important; font-size: .75rem; display: block; }
.inspHeroDemoLink.sapMLnk { color: #0070f2 !important; font-weight: 600; }
.inspHeroVisual { width: 100%; max-width: 640px; }
.inspHeroVisual .inspBrowserFrame { box-shadow: none; border: 1px solid #e5e5e5; }
/* SAP-Karten-Muster: Overline-Label (blau, klein, Großbuchstaben) über der Kachel-Headline —
wiederkehrendes Element auf sap.com in jeder 3-Spalten-Kartenreihe. */
.inspCardOverline { color: #0070f2; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; display: block; margin-bottom: .3rem; }
.inspArrowLink.sapMLnk { color: #0070f2 !important; font-weight: 600; display: block; }
/* Helle Full-Width-CTA-Banner-Karte (Vorbild: "Starten Sie in der Entwicklung durch" auf sap.com) */
.inspCtaBanner {
background: linear-gradient(90deg, #eaf2fe 0%, #eaf2fe 45%, transparent 100%), url('/media/salon-wintergarten.webp');
background-size: cover; background-position: right center;
border-radius: 12px; padding: 3rem 2.5rem; margin: 0 1rem; overflow: hidden; min-height: 16rem;
box-sizing: border-box; position: relative;
}
.inspCtaBannerText { max-width: 26rem; position: relative; z-index: 1; }
.inspCtaBannerPhoto { flex: 1 1 20rem; min-height: 1px; }
@media (max-width: 900px) {
.inspCtaBanner { background-image: linear-gradient(180deg, #eaf2fe 0%, #eaf2fe 60%, transparent 100%), url('/media/salon-wintergarten.webp'); background-position: bottom center; }
}
/* 6-Infos-Slider: dunkle Foto-Karte mit Text-Overlay (Vorbild: sap.com Kundenbericht-Karussell mit Bosch/PwC-Logos) —
echte Objekt-/Umfeld-Fotos statt Kundenfotos, da wir keine haben. */
.inspInfoSliderSection { padding: 0 1rem; width: 100%; box-sizing: border-box; }
.inspInfoCarousel { max-width: 60rem; margin: 0 auto; }
.inspInfoSlide {
height: 100%; box-sizing: border-box; padding: 2.5rem; border-radius: 8px; position: relative; overflow: hidden;
background-size: cover; background-position: center;
}
.inspInfoSlide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,15,25,.88) 0%, rgba(10,15,25,.55) 55%, rgba(10,15,25,.35) 100%); }
.inspInfoSlide > * { position: relative; z-index: 1; }
.inspInfoSlideOverline { color: #7fb3ff !important; }
.inspInfoSlideHeadline.sapMTitle { color: #fff !important; font-size: 1.6rem !important; margin-bottom: .6rem; }
.inspInfoSlideText.sapMText { color: rgba(255,255,255,.85) !important; max-width: 34rem; margin-bottom: .8rem; }
.inspInfoSlideSource.sapMText { color: rgba(255,255,255,.55) !important; font-size: .75rem; font-family: monospace; }
.inspInfoSlide1 { background-image: linear-gradient(rgba(10,15,25,.3), rgba(10,15,25,.3)), url('/media/aussen-strasse.webp'); }
.inspInfoSlide2 { background-image: linear-gradient(rgba(10,15,25,.3), rgba(10,15,25,.3)), url('/media/treppenhaus.jpg'); }
.inspInfoSlide3 { background-image: linear-gradient(rgba(10,15,25,.3), rgba(10,15,25,.3)), url('/media/hauseingang.jpg'); }
.inspInfoSlide4 { background-image: linear-gradient(rgba(10,15,25,.3), rgba(10,15,25,.3)), url('/media/salon-uebersicht.webp'); }
.inspInfoSlide5 { background-image: linear-gradient(rgba(10,15,25,.3), rgba(10,15,25,.3)), url('/media/flur-uebersicht.webp'); }
.inspInfoSlide6 { background-image: linear-gradient(rgba(10,15,25,.3), rgba(10,15,25,.3)), url('/media/eingangstuer.webp'); }
.inspInfoCarousel .sapMCrslInactiveArrow, .inspInfoCarousel .sapMCrslActiveArrow { display: none; }
/* Split-Feature-Sektion (Vorbild: sap.com "Lernen Sie Joule kennen") — Headline mit farbig hervorgehobenem
Wort, rechts helles Verlaufs-Panel mit echtem KI-Bounding-Box-Foto statt Produkt-Video. */
.inspFeatureSplitSection { padding: 1rem 2rem; gap: 3rem; }
.inspFeatureSplitText { max-width: 24rem; min-width: 280px; flex: 1 1 320px; }
.inspFeatureSplitHeadline { font-size: 2.6rem; font-weight: 700; color: #1a1a1a; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
.inspHighlight { color: #7c4dff; }
.inspFeatureSplitVisual { flex: 1 1 420px; min-width: 300px; max-width: 34rem; height: 22rem; position: relative; }
.inspFeatureSplitVisual > div { width: 100%; height: 100%; }
#featureSplitInner {
border-radius: 12px; overflow: hidden;
background: linear-gradient(135deg, #eef1ff 0%, #e6ecff 100%);
}
.inspFeatureSplitPause.sapMBtn {
position: absolute; bottom: .75rem; left: .75rem; background: rgba(0,0,0,.5) !important;
border-radius: 50%; width: 2.2rem; height: 2.2rem;
}
.inspFeatureSplitPause.sapMBtn .sapMBtnIcon { color: #fff !important; }
/* SAP-Footer: 5-spaltig, schlicht, kleine Links, kein Rahmen außer der oberen Trennlinie */
.inspLandingFooter { background: #fff; border-top: 1px solid #e5e5e5; padding: 3rem 2rem 1.5rem; }
.inspLandingFooter .sapMTitle { font-size: .85rem; font-weight: 700; color: #1a1a1a; margin-bottom: .6rem; }
.inspLandingFooter .sapMLnk { color: #4a4a4a !important; font-size: .82rem; display: block; margin-bottom: .5rem; }
.inspFooterBottom { border-top: 1px solid #e5e5e5; padding: 1.2rem 2rem; }
.inspFooterBottom .sapMText { color: #6a6d70; font-size: .78rem; }
.inspFooterSocial { color: #1a1a1a; font-size: 1.1rem; }
/* Dezenter, loopender Bounding-Box-Reveal auf dem Hero-Foto — Ersatz für die verworfene 3D/SVG-Animation */
@keyframes inspBboxReveal {
0%, 100% { opacity: 0; }
8%, 70% { opacity: 1; }
85% { opacity: 0; }
}
.inspBboxReveal { opacity: 0; animation: inspBboxReveal 6.6s ease-in-out infinite; }
/* Original-vs-KI Vergleichsblock */
.inspCompareSection { padding: 3rem 1.5rem; }
.inspCompareGrid { width: 100%; }
.inspTrustRow { padding: 0 1rem; }
.inspTrustLabel { color: #6a6d70; font-size: .85rem; align-self: center; }
.inspFeatureGrid { padding: 0 2rem; }
.inspFeatureCard { padding: 1.5rem 1rem !important; text-align: center; }
.inspFeatureIcon { color: #0070f2; }
.inspPersonaSection { padding: 0 1rem; }
.inspPersonaCard { padding: 1.25rem 1.1rem !important; }
.inspMethodSection { padding: 0 1rem; }
.inspMethodCard { padding: 1.5rem 1.1rem !important; text-align: center; }
.inspMethodStep {
display: inline-flex; align-items: center; justify-content: center;
width: 2rem; height: 2rem; border-radius: 50%;
background: #0070f2; color: #fff; font-weight: 700; font-size: 1rem;
}
/* SAP-Stil-Pass: dünne 1px-Kanten statt weicher Schatten/großer Radien auf allen Landing-Kacheln (Vorbild sap.com) */
.inspLandingPage .inspCard, .inspSetupPage .inspCard {
border-radius: 8px; box-shadow: none; border: 1px solid var(--sapList_BorderColor, #d9d9d9);
}
.inspLandingPage .inspStorySection, .inspLandingPage .inspTourSection { border-radius: 8px; }
.inspLandingPage .inspMuted { color: #6a6d70; }
.inspSourcesSection { padding: 0 1rem; }
.inspSourceCard { padding: 1.1rem 1.2rem !important; }
.inspIntroSection { padding: 0 2rem; }
.inspIntroLead { font-size: 1.1rem; font-weight: 600; max-width: 38rem; }
.inspStorySection { padding: 2.5rem 1.5rem; background: var(--sapPageFooter_Background, #f5f7fa); border-radius: 16px; margin: 0 1rem 2rem; }
.inspStoryLead { max-width: 46rem; margin: 0 auto; font-size: 1rem; line-height: 1.55; }
.inspStoryCard { padding: 1.4rem 1.3rem !important; }
.inspSourceDetail { color: #6a6d70; font-size: .78rem; line-height: 1.4; }
/* Große Kennzahlen-Kacheln */
.inspStatRow { padding: 0 1rem; gap: 0; }
.inspStatTile { padding: 1rem 1.75rem; }
.inspStatNumber { font-size: 2.6rem; font-weight: 800; color: #0070f2; line-height: 1; }
.inspStatLabel { color: #6a6d70; font-size: .8rem; margin-top: .3rem; }
/* Produkt-Tour: Vorschau im echten App-Look (ToolHeader-Leiste + Quick-Nav-Buttons wie App.view.xml), kein Browser-Chrome-Mockup mehr (Schritt 1 der Stil-Angleichung Landing↔App) */
.inspTourSection { padding: 2.5rem 1.5rem; background: var(--sapPageFooter_Background, #f5f7fa); border-radius: 16px; margin: 0 1rem 2rem; }
.inspTourTabs .sapMBtn.inspQuickNavBtn { margin: 0 .2rem; }
.inspBrowserFrame {
width: 100%; max-width: 780px; background: #fff; border-radius: 12px; overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,.08); border: 1px solid var(--sapTile_BorderColor, #e5e5e5);
}
.inspBrowserFrameBar { background: #0a1930; padding: .55rem .9rem; gap: .5rem; }
.inspBrowserFrameLogo { color: #fff; font-weight: 700; letter-spacing: .05em; font-size: .8rem; }
.inspBrowserFrameUrl { color: #a9b4c4; font-size: .78rem; }
.inspModulesSection { padding: 0 1rem; }
.inspQuestionsSection { padding: 0 2rem; }
/* SAP-Kartengitter (Vorbild: sap.com "Autonome Funktionen"-Sektion) — große fette Sektions-Headline
+ hellgraue Karten statt Rahmen/Schatten. ui-ux-pro-max-Skill: 4/8dp-Rhythmus, Kontrast ≥4.5:1. */
.inspSectionHeadline { font-size: 2.6rem; font-weight: 700; color: #1a1a1a; line-height: 1.15; margin: 0 0 .75rem; text-align: center; letter-spacing: -.01em; }
.inspSectionIntro.sapMText { display: block; text-align: center; max-width: 40rem; margin: 0 auto 1.5rem; color: #4a4a4a; font-size: 1.05rem; }
.inspQuestionCard.sapMPanel {
margin: .5rem 1rem 1.5rem !important; border-radius: 8px; background: #f5f5f5 !important; border: none !important;
}
.inspQuestionCard .sapMPanelWrappingDiv { padding: 1.5rem 1.5rem 0; align-items: flex-start; }
.inspQuestionCard .sapMPanelWrappingDiv .sapUiIcon { display: none; }
.inspQuestionCard .sapMPanelHdr { font-weight: 700; font-size: 1.15rem; background: transparent; border: none; padding: 0; white-space: normal; }
.inspQuestionCard .sapMPanelContent { padding: .5rem 1.5rem 1rem; }
.inspQuestionCard .inspQuestionMoreLink { color: #0070f2; font-weight: 600; font-size: .85rem; display: block; margin: .8rem 1.5rem 1.5rem; }
.inspFaqSection { padding: 0 1rem; }
.inspFaqList { width: 100%; max-width: 44rem; }
.inspFaqPanel.sapMPanel { margin-bottom: .6rem; border-radius: 10px; }
.inspContactSection { padding: 0 1rem; }
.inspContactLink.sapMLnk { font-size: 1.1rem; font-weight: 600; }
/* Setup-Seite (Schritt 3: Anmeldemethode + Plan-Wahl) — eigener heller Hintergrund, kein Landing-Verlauf */
.inspSetupPage.sapMPageBgStandard { background: #f5f7fa; }
.inspSetupWrap { padding: 2rem 1rem; box-sizing: border-box; min-height: 100%; }
.inspSetupCard { padding: 2rem !important; }
.inspSetupLogo { color: #0a1930 !important; letter-spacing: .05em; }
.inspDividerLine { flex: 1; height: 1px; background: #d8dee6; }
.inspSetupPlanWrap { margin-top: 2.5rem; padding: 0 1rem 3rem; }
.inspPlanGrid { gap: 1.25rem; align-items: stretch; }
.inspPlanCard {
width: 17rem; min-height: 26rem; padding: 2rem 1.75rem !important; background: #fff;
border-radius: 8px; position: relative; box-shadow: none; border: 1px solid var(--sapList_BorderColor, #d9d9d9);
display: flex; flex-direction: column;
}
.inspPlanCardHighlight { border: 2px solid #0070f2 !important; box-shadow: none; }
.inspPlanBadge {
position: absolute; top: -.8rem; left: 50%; transform: translateX(-50%);
background: #0070f2; color: #fff; font-size: .7rem; font-weight: 700;
letter-spacing: .04em; text-transform: uppercase; padding: .3rem .9rem; border-radius: 4px;
}
.inspPlanName { font-size: 1rem; font-weight: 700; color: #6a6d70; text-transform: uppercase; letter-spacing: .04em; }
.inspPlanPrice { font-size: 2.4rem; font-weight: 800; color: #0a1930; line-height: 1; white-space: nowrap; }
.inspPlanPrice.inspPlanPriceSmall { white-space: normal; }
.inspPlanPriceSmall { font-size: 1.6rem; }
.inspPlanPeriod { color: #6a6d70; font-size: .9rem; }
.inspPlanTagline { color: #6a6d70; font-size: .85rem; display: block; margin-top: .3rem; }
/* Einführungspreis-Hinweis (06.07.) — kleiner Inline-Hinweis am Einmal-Check-Preis, bewusst NICHT der
absolut positionierte .inspPlanBadge (der ist für die rollenbasierte "Empfohlen für dich"-Auszeichnung
reserviert und würde sich sonst mit diesem überlappen). */
.inspPlanIntroBadge {
display: inline-block; margin-top: .2rem; color: #c9691a; font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
}
.inspPlanFeatures { gap: .55rem; margin-top: .5rem; flex: 1; }
.inspPlanFeatureRow { gap: .5rem; align-items: center; }
.inspPlanFeatureIcon { color: #2b7d46; font-size: .85rem; flex-shrink: 0; }
.inspPlanFeatureRow .sapMText { font-size: .88rem; color: #1a1a1a; }
.inspPlanCompareWrap { width: 100%; max-width: 46rem; overflow-x: auto; }
.inspPlanCompareTable { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(10,25,48,.06); }
.inspPlanCompareTable th, .inspPlanCompareTable td { padding: .7rem 1rem; text-align: center; font-size: .85rem; border-bottom: 1px solid #eef0f3; }
.inspPlanCompareTable thead th { background: #f5f7fa; font-weight: 700; color: #0a1930; }
.inspPlanCompareTable tbody th { text-align: left; font-weight: 500; color: #1a1a1a; }
.inspPlanCompareTable tbody tr:last-child th, .inspPlanCompareTable tbody tr:last-child td { border-bottom: none; }
.inspPlanCompareTable .insp-yes { color: #2b7d46; font-weight: 700; }
.inspPlanCompareTable .insp-no { color: #b0b4ba; }
@media (max-width: 900px) {
.inspHero { flex-wrap: wrap; }
.inspHeroPhotoGrid { max-width: 100%; height: 200px; }
}
/* Native Content-Karten */
.inspCard {
background: var(--sapTile_Background, #fff);
border: 1px solid var(--sapTile_BorderColor, #e5e5e5);
border-radius: 12px; padding: 1rem 1.15rem; margin: .35rem;
}
.inspCard .sapMTitle { margin-bottom: .1rem; }
.inspHighlightSection { transition: box-shadow .3s ease, border-color .3s ease; box-shadow: 0 0 0 2px var(--sapContent_FocusColor, #0854a0); border-color: var(--sapContent_FocusColor, #0854a0) !important; }
.inspSub { color: var(--sapContent_LabelColor, #6a6d70); font-size: .8rem; }
/* Vergleichsobjekte-Kachelraster (13.07.) — ersetzt die alte einzeilige Liste, damit jedes Vergleichsobjekt
sein Exposé-Titelfoto zeigt statt nur Fließtext ("zeige die Vergleichsobjekte mit Bild für den ersten Eindruck"). */
.inspVglCard {
background: var(--sapTile_Background, #fff); border: 1px solid var(--sapTile_BorderColor, #e5e5e5);
border-radius: 12px; margin: .35rem; width: 19rem; overflow: hidden;
}
.inspVglCardImgBox { position: relative; height: 10rem; background: #eef1f3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.inspVglCardImg { width: 100%; height: 100%; object-fit: cover; }
.inspVglCardImgFallback { opacity: .4; }
.inspMedienThumb { object-fit: cover; border-radius: 6px; border: 1px solid var(--sapTile_BorderColor, #e5e5e5); margin-bottom: .2rem; }
.inspEinrichtungName { font-weight: 600; }
.inspWarnText { color: var(--sapNegativeColor, #c0392b); }
/* Bewertungsrelevante-Felder-Rahmen (06.07.) — hebt Abschnitte, die direkt in eine Berechnung
einfließen (z.B. Objektdaten "Zustand & Ausstattung"), optisch vom normalen Eckdaten-Grid ab. */
.inspWertHinweisBox {
background: #eef4ff; border: 1px solid #c7dcfb; border-radius: 12px; padding: .9rem 1rem;
}
.inspWertHinweisBox .inspCard { background: #fff; }
.inspThumb img, .inspThumb { border-radius: 8px; object-fit: cover; background: #eef0f2; }
.inspGalleryThumb.sapMImg, .inspGalleryThumb img {
width: 150px !important; height: 112px !important; object-fit: cover; border-radius: 8px;
background: #eef0f2; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.inspGalleryThumb.sapMImg:hover, .inspGalleryThumb img:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.inspRiskCard { width: 260px; }
/* Wertindikation: Verfahren-Auswahlkacheln (06.07.) — dieselbe List-auf-Grid-Technik wie
.krasseTilesList (Landing.view.xml): display:grid muss auf .sapMListItems, nicht auf den
List-Wrapper selbst, sonst bleibt es eine einspaltige Liste. */
.inspVerfahrenList.sapMList > .sapMListItems {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem;
}
.inspVerfahrenList .sapMLIB { border: none; padding: 0; }
.inspVerfahrenTile {
border: 1px solid var(--sapTile_BorderColor, #e5e5e5); border-radius: 12px; padding: .9rem 1rem;
background: #fff; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; height: 100%;
}
.inspVerfahrenTile:hover { border-color: var(--brut-blue, #2f5fe0); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
/* Additional refinements */
.sapUiSmallMargin { margin: 0.5rem !important; }
.sapUiMediumMargin { margin: 1rem !important; }
.sapUiSmallMarginBottom { margin-bottom: 0.5rem !important; }
.sapUiSmallMarginTop { margin-top: 0.5rem !important; }
.sapUiSmallMarginEnd { margin-right: 0.5rem !important; }
.sapUiSmallMarginBegin { margin-left: 0.5rem !important; }
.sapUiMediumMarginTop { margin-top: 1rem !important; }
/* Better Card Spacing */
.inspCard {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease;
}
.inspCard:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
/* Button Styling */
.sapMBtn {
border-radius: 6px;
transition: all 0.2s ease;
}
.sapMBtn:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* Typography Improvements */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
letter-spacing: -0.3px;
}
h1, h2, h3, h4, h5, h6 {
letter-spacing: -0.5px;
font-weight: 600;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.sapUiSmallMargin { margin: 0.25rem !important; }
.inspCard { padding: 0.75rem !important; }
.inspCard .sapMTitle { font-size: 1rem; }
}
/* Color Consistency */
.sapMObjectNumber { font-weight: 600; }
.sapMMessageText { line-height: 1.6; }
/* Page-Hero (Fragment/PageHero.fragment.xml): 2-spaltig, links Text/Hook, rechts Bild.
Eigener Klassenname .pageHero* — .inspHero* ist bereits von der Landing-Page belegt (Zeile 139). */
.pageHero { gap: 1.25rem; flex-wrap: nowrap; }
.pageHeroText { min-width: 0; max-width: 58%; flex: 1 1 auto; }
.pageHeroHook { font-size: 1.05rem; line-height: 1.4; margin-bottom: .25rem; }
.pageHeroImgBox { position: relative; flex: 0 0 340px; width: 340px; height: 190px; border-radius: 10px; overflow: hidden; background: #0d1420; box-shadow: 0 4px 16px rgba(10,25,48,.18); }
.pageHeroImgBox .sapMImg, .pageHeroImgBox img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Gradient-Scrim (19.07.) — nur sichtbar, wenn eine Seite ein Badge setzt (siehe .pageHeroBadge),
damit der Text auf hellen Fotos lesbar bleibt, ohne bildlose/kachelfreie Hero-Bilder abzudunkeln. */
.pageHeroImgBox:has(.pageHeroBadge)::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(10,20,32,.82) 0%, rgba(10,20,32,.35) 38%, rgba(10,20,32,0) 65%);
pointer-events: none;
}
/* Severity-Badge direkt im Hero-Bild (Zustand.controller.js#_onRouteMatched) — zeigt das Foto des
schwerwiegendsten Befunds statt eines beliebigen ersten Fotos, das Badge macht den Bezug sofort klar. */
.pageHeroBadge {
position: absolute; left: 10px; bottom: 10px; right: 10px; z-index: 1;
display: flex; align-items: center; gap: .4rem;
font-family: inherit; font-size: .78rem; font-weight: 600; color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.pageHeroBadge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: #6a6d70; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.pageHeroBadge.sev-kritisch::before { background: #e81828; }
.pageHeroBadge.sev-hoch::before { background: #df6e0c; }
.pageHeroBadge.sev-mittel::before { background: #107e3e; }
@media (max-width: 900px) {
.pageHero { flex-wrap: wrap; }
.pageHeroText { max-width: 100%; }
.pageHeroImgBox { flex: 1 1 100%; width: 100%; max-width: 100%; height: 150px; }
}
/* FlowFooter (Fragment/FlowFooter.fragment.xml, Objektakte-Flow v2, 18.07.): feste "Zurück/Weiter"-
Leiste am Ende jeder Kernseite, führt Schritt für Schritt durch die rollen-gefilterte Kette. */
.flowFooter { border-top: 1px solid var(--sapList_BorderColor, #e5e5e5); padding-top: .75rem; }
.flowFooterInner { gap: .75rem; }
.flowFooterSchritt { white-space: nowrap; }
@media (max-width: 700px) {
.flowFooterInner { flex-direction: column; align-items: stretch !important; }
.flowFooterSchritt { text-align: center; order: -1; margin-bottom: .25rem; }
}
/* ===== Storytelling (Icon-Schritt-Liste, ersetzt die Fließtext-Version) ===== */
.inspSectionTitle { font-size: 2.4rem; font-weight: 700; color: #1a1a1a; line-height: 1.2; max-width: 44rem; }
.inspStorySection { padding: 100px 10% !important; max-width: 1000px; margin: 0 auto; background: none; border-radius: 0; }
.inspStoryTellingBox { background: #f8f9fa; padding: 40px !important; border-radius: 12px; border-left: 5px solid var(--insp-sap-navy); width: 100%; box-sizing: border-box; }
.storyStep { margin-bottom: 25px !important; align-items: center; }
.storyStep:last-child { margin-bottom: 0 !important; }
.storyIcon { font-size: 1.5rem !important; margin-right: 20px; color: var(--insp-sap-navy); }
.storyStep.highlight { background: rgba(198, 40, 40, 0.05); padding: 10px; border-radius: 4px; }
.storyIcon.red { color: #c62828 !important; }
.storyStep .sapMText { font-size: 1.2rem !important; color: #32363a !important; }
/* ===== Bento-Grid: unterschiedlich große Kacheln statt gleichförmiger Reihe ===== */
.inspBentoSection { padding: 0 2rem; width: 100%; box-sizing: border-box; }
.inspBentoGrid {
display: grid; width: 100%; max-width: 64rem; margin-top: 1.5rem;
grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 12rem); gap: 1rem;
}
.inspBentoCard {
background: #f5f5f5; border-radius: 12px; padding: 1.75rem; position: relative; overflow: hidden;
justify-content: flex-end; box-sizing: border-box;
}
.bentoLarge { grid-column: span 2; grid-row: span 2; }
.bentoMedium { grid-column: span 2; grid-row: span 1; }
.bentoSmall { grid-column: span 1; grid-row: span 1; }
.bentoIconBottom { font-size: 4rem !important; color: var(--insp-sap-blue) !important; opacity: 0.1; position: absolute; bottom: 10px; right: 10px; }
@media (max-width: 900px) {
.inspBentoGrid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
.bentoLarge, .bentoMedium, .bentoSmall { grid-column: span 2; grid-row: span 1; min-height: 10rem; }
}
/* ===== Finale Frage (dunkle Vollbild-CTA-Sektion) ===== */
.inspFinalQuestion { background: var(--insp-sap-navy) !important; padding: 120px 10% !important; color: white !important; text-align: center; }
.inspWhiteTitle.sapMTitle { color: white !important; font-size: 2.5rem !important; font-weight: 700 !important; }
.inspWhiteText.sapMText { color: rgba(255,255,255,0.8) !important; font-size: 1.3rem !important; }
/* ===== Nav-Button (Outline, für neuen vereinfachten Header) ===== */
.inspNavBtn { background-color: transparent !important; border: 1px solid white !important; }
.inspNavBtn .sapMBtnInner { color: white !important; text-shadow: none !important; }
/* ===== KI-Analyse-Sektion: Scan-Effekt auf echtem Objektfoto + echte Befund-Werte ===== */
.inspAiSection { padding: 0 2rem; width: 100%; box-sizing: border-box; }
.inspAiContainer { max-width: 1100px; padding: 40px 5%; align-items: center; }
.inspAiPhotoBox { position: relative; width: 500px; max-width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.15); }
.inspBaseImage.sapMImg img, .inspBaseImage.sapMImg { display: block; filter: saturate(0.85); }
.inspScannerLine {
position: absolute; top: 0; left: 0; width: 100%; height: 4px;
background: var(--insp-sap-blue); box-shadow: 0 0 15px var(--insp-sap-blue);
z-index: 10; animation: scanMove 4s infinite linear;
}
@keyframes scanMove {
0% { top: 0; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.inspAiResultsBox { width: 400px; max-width: 100%; }
.aiTag { background: #ffffff; border-bottom: 1px solid #eee; padding: 15px 0 !important; }
.aiTagLabel.sapMText { font-weight: 700 !important; color: var(--insp-sap-navy) !important; font-size: 0.9rem !important; }
.aiTagValue.sapMText { color: var(--insp-text-gray) !important; font-size: 0.85rem !important; }
.aiProgress { height: 4px; background: #eee; margin-top: 10px; border-radius: 2px; }
.aiProgressBar { height: 100%; background: var(--insp-sap-blue); border-radius: 2px; }
.aiInferenceText.sapMText { font-style: italic; color: var(--insp-text-gray) !important; line-height: 1.6; display: block; }
/* ==========================================================================
NEO-BRUTALISM LANDING (04.07.2026) — kompletter Stil-/Struktur-Ersatz nach
Vorbild-Screenshots (page-builder-pro-31.preview.emergentagent.com), auf
Wunsch 1:1 übernommen. Ersetzt den bisherigen SAP.com-Stil auf der Landing-
Page vollständig. Setup-Seite bleibt unverändert im SAP-Stil.
06.08.2026: Farb-Pivot Runde 2 (neuer Codex-Entwurf) — NUR die --brut-*-Werte
auf die bereits vorhandene re-theme.css-Palette umgestellt (Variablennamen
unverändert, damit die 271 bestehenden var(--brut-*)-Stellen unangetastet
bleiben). Pastell-Akzente ohne direktes Grün-Äquivalent (früher lila/gelb/
rosa) werden per color-mix() aus den echten re-theme-Tokens abgeleitet,
statt neue Farben zu erfinden. */
.inspBrutal {
--brut-bg: var(--re-paper);
--brut-ink: var(--re-ink);
--brut-green: color-mix(in srgb, var(--re-green) 18%, white);
--brut-purple: color-mix(in srgb, var(--re-ink) 10%, var(--re-paper));
--brut-yellow: color-mix(in srgb, var(--re-amber) 22%, white);
--brut-pink: color-mix(in srgb, var(--re-red) 15%, white);
--brut-blue: var(--re-green); /* NICHT re-lime: --brut-blue wird auch als TEXTfarbe (Overlines, Links) verwendet — Lime wäre dort auf hellem Grund kaum lesbar. Re-green funktioniert als Text und als Button-Hintergrund mit weißer Schrift gleichermaßen. */
--brut-gray: var(--re-muted);
--brut-pad-x: 2.5rem; /* einheitlicher Seitenrand für ALLE Vollbreite-Sektionen (Header, Hero, Sections, Footer) */
--brut-pad-y: 4rem; /* einheitlicher vertikaler Innenabstand für Inhalts-Sektionen */
background: var(--brut-bg) !important;
font-family: 'Space Grotesk', 'Arial Narrow', sans-serif;
color: var(--brut-ink);
}
.inspBrutal .sapMText, .inspBrutal .sapMTitle, .inspBrutal .sapMLnk, .inspBrutal .sapMBtn, .inspBrutal .sapMInputBaseInner {
font-family: 'Space Grotesk', 'Arial Narrow', sans-serif;
color: var(--brut-ink);
}
.inspBrutal .brutMono { font-family: 'JetBrains Mono', monospace; }
/* SmartGlass-Warteliste-Ankündigung (07.07.) */
.brutAnnounce { background: var(--brut-yellow); border-bottom: 3px solid var(--brut-ink); padding: .55rem var(--brut-pad-x); }
.brutAnnounceText.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; color: var(--brut-ink); }
.brutAnnounceLink.sapMLnk { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-decoration: underline !important; color: var(--brut-ink) !important; }
.brutAnnounceClose.sapMBtn { width: 1.8rem; height: 1.8rem; min-width: 1.8rem; }
/* Käpsele-Banner (09.07.) — eigener Akzent (grün statt gelb), damit er sich von der SmartGlass-Leiste
optisch unterscheidet, falls beide gleichzeitig sichtbar sind. */
.brutAnnounce.cKaepsele { background: var(--brut-green); }
/* Header */
.brutHeader { background: var(--brut-bg); border-bottom: 3px solid var(--brut-ink); padding: 1rem var(--brut-pad-x); }
.brutLogoImg { object-fit: contain; flex-shrink: 0; }
.brutLogoText.sapMTitle { font-weight: 700; letter-spacing: .02em; font-size: 1.3rem; }
.brutNavLink.sapMLnk { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brut-ink) !important; text-decoration: none !important; }
.brutNavLink.sapMLnk:hover { text-decoration: underline !important; }
/* Ressourcen-MenuButton in der Kopfzeile (28.07.2026): rendert als sapMBtn und saehe
ohne diese Regeln wie ein Horizon-Button aus — er muss aber wie die Nav-Links daneben
wirken. ACHTUNG: die Klasse landet auf dem AEUSSEREN div.sapMMenuBtn, nicht auf dem
inneren button.sapMBtn — ein Selektor .brutNavMenuBtn.sapMBtn trifft daher nichts
(am 28.07. so passiert). Der Text sitzt ganz innen in einem , deshalb muss die
Schrift bis dorthin durchgereicht werden. */
.brutNavMenuBtn.sapMMenuBtn .sapMBtn,
.brutNavMenuBtn .sapMBtnInner { background: transparent !important; border: none !important;
box-shadow: none !important; }
.brutNavMenuBtn .sapMBtnContent,
.brutNavMenuBtn .sapMBtnContent bdi { font-family: 'JetBrains Mono', monospace !important;
font-size: .78rem !important; font-weight: 700 !important; text-transform: uppercase;
letter-spacing: .03em; color: var(--brut-ink) !important; }
.brutNavMenuBtn:hover .sapMBtnContent { text-decoration: underline; }
.brutNavMenuBtn .sapMBtnIcon { color: var(--brut-ink) !important; }
.brutBtnPrimary.sapMBtn { background: var(--re-lime) !important; border: 3px solid var(--brut-ink) !important; border-radius: 4px !important; box-shadow: 4px 4px 0 var(--brut-ink); font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; transition: transform .1s, box-shadow .1s; }
.brutBtnPrimary.sapMBtn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--brut-ink); }
/* Bugfix 05.07.: sap_horizon's .sapMBtnInner-Span hat einen eigenen weißen Standard-Hintergrund,
der über dem farbigen Button-Hintergrund liegt — Text war dadurch weiß-auf-weiß und nur beim
Hover (andere Theme-Farbe) lesbar. Alle Nachfahren-Elemente müssen transparent sein.
06.08.2026: primäre CTA-Buttons (brutBtnPrimary/brutBtnCheck) bekommen bewusst re-lime statt
dem generischen --brut-blue-Akzent (jetzt re-green) — genau wie im neuen Codex-Entwurf, wo
ALLE "Jetzt kostenlos prüfen"-Buttons hell-limonengrün mit dunkler Schrift sind. Lime als
TEXTfarbe (Overlines etc.) bleibt vermieden (siehe --brut-blue-Kommentar), hier ist Lime aber
der Button-HINTERGRUND mit dunkler Schrift — unproblematisch. */
.brutBtnPrimary, .brutBtnPrimary * { color: var(--brut-ink) !important; background: transparent !important; }
.brutBtnCheck, .brutBtnCheck * { color: var(--brut-ink) !important; background: transparent !important; }
/* Hero — Bugfix 04.07.: zu viel Leerraum zwischen Text/Bild + Bild zu hoch/portrait-artig.
Jetzt: beide Spalten füllen die Breite über flex-grow aus, festes Landscape-Seitenverhältnis
fürs Foto (16:10, Bild wird oben angeschnitten dargestellt statt in voller Höhe). */
.brutHero { padding: 3rem var(--brut-pad-x); display: flex; gap: 3rem; }
.brutHeroText { flex: 1 1 26rem; max-width: 32rem; }
.brutBadge { display: inline-flex; align-items: center; gap: .4rem; border: 2px solid var(--brut-ink); border-radius: 4px; padding: .35rem .9rem; font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #fff; }
.brutH1.sapMTitle { font-size: 3.4rem; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; }
.brutHighlight { background: var(--brut-blue); color: #fff; padding: 0 .3rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* Kontrast-Fix (08.07.): als sap.m.Text-Control (statt rohem HTML-) bekommt brutHighlight
zusätzlich die Klasse "sapMText" — ".inspBrutal .sapMText{color:var(--brut-ink)}" hat höhere
Spezifität (2 Klassen) als ".brutHighlight" allein (1 Klasse) und gewann, dunkler Text auf blauem
Grund landete bei nur 3,3:1 Kontrast statt der beabsichtigten weißen Schrift. Gilt unverändert
für re-green (06.08.2026). */
.brutHighlight.sapMText { color: #fff !important; }
/* Vollbreit + fett statt schmal/grau (11.07., Nutzerwunsch "jede Sektion gleich aufbauen ... fetter
überall") — vorher auf 32rem gedeckelt und grau (für einen kurzen Lead-Satz gedacht), jetzt dieselbe
Behandlung wie .brutSectionLead/.krasseGesamtText: volle Breite, kräftigerer Text. */
.brutLead.sapMText { font-size: 1.05rem; font-weight: 600; color: var(--brut-ink); }
.brutInput.sapMInputBase { border: 3px solid var(--brut-ink) !important; border-radius: 4px !important; box-shadow: none !important; background: #fff !important; }
/* Preis-Kontrast im Hero (14.07., Nutzerwunsch "99€ statt 1.500-4.500€ groß auffällig") — eigener
Callout statt heroTag1-3 (die sind an die Live-Bbox-Demo gebunden, siehe Kommentar in
Landing.view.xml) oder .brutHighlight (nur für einzelne Wörter im Fließtext gedacht). Kräftiger
Rahmen + Akzentfläche, damit die Zahl sofort auffällt, ohne wie eine weitere Badge zu wirken. */
.brutPriceHook { border: 3px solid var(--brut-ink); border-radius: 8px; background: var(--brut-yellow); padding: .9rem 1.1rem; }
.brutPriceHookNum.sapMText { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--brut-ink); }
/* Endpreis vs. Vergleichswert (28.07.2026): Die 99 € sind der Betrag, den der private
Kaeufer zahlt — er dominiert. Der Gutachterausschuss-Wert daneben ordnet nur ein.
Vorher war beides gleich gross, wodurch der Vergleich genauso laut war wie das Angebot. */
.brutPriceHookEnd.sapMText { font-family: 'Space Grotesk', sans-serif; font-weight: 800;
font-size: 2.2rem; line-height: 1.15; color: var(--brut-ink); }
.brutPriceHookVergleich.sapMText { font-family: 'Space Grotesk', sans-serif; font-weight: 600;
font-size: 1.05rem; color: var(--brut-ink); opacity: .7; }
/* UI5 legt um JEDES Kind einer FlexBox einen eigenen Wrapper (.sapMFlexItem) — DIESER ist
das Flex-Element, nicht der Text selbst. Eine Regel auf .brutPriceHookEnd greift deshalb
ins Leere: der Wrapper bleibt display:block und nimmt die volle Zeilenbreite, beide Texte
landen untereinander. Derselbe Fehlertyp wie beim MenuButton (Klasse auf dem aeusseren
div.sapMMenuBtn statt auf button.sapMBtn). Deshalb den Wrapper adressieren. */
.brutPriceHook .sapMHBox { width: 100%; }
.brutPriceHook .sapMHBox > .sapMFlexItem { flex: 0 0 auto; width: auto; }
.brutPriceHookText.sapMText { font-size: .92rem; font-weight: 600; color: var(--brut-ink); margin-top: .15rem; }
.brutDark .brutPriceHook { border-color: #fff; }
.brutDark .brutPriceHook .sapMText { color: var(--brut-ink) !important; }
/* 5. Kartenfarbe für die neue "Warum kein klassisches Gutachten"-Sektion (14.07.) — bisher nur 4
Pastellfarben (cGreen/cPurple/cYellow/cPink), ein 5-Karten-Grid braucht eine fünfte. Passend zur
bestehenden Palette, blasses Blau abgeleitet aus --brut-blue. */
.brutCard.cBlue { background: color-mix(in srgb, var(--re-green) 14%, white); }
.brutDark .brutCard.cBlue { color: var(--brut-ink); }
.brutDark .brutCard.cBlue .sapMText, .brutDark .brutCard.cBlue .sapMTitle { color: var(--brut-ink) !important; }
/* Bugfix (11.07., Nutzerfeedback "Button ist nicht lesbar"): ".brutBtnCheck.sapMBtn" (beide Klassen
am SELBEN Element) traf nur echte sap.m.Button-Controls direkt. Der Foto-Upload-Button ist aber ein
sap.ui.unified.FileUploader (buttonOnly), der intern einen sap.m.Button als NACHFAHRE rendert —
".sapMBtn" landet dort nie am selben Element wie ".brutBtnCheck". Ergebnis: nur die "Text weiß"-Regel
oben griff, der blaue Hintergrund fehlte → weißer Text auf weißem Grund. Deshalb zusätzlich als
Nachfahren-Selektor. */
.brutBtnCheck.sapMBtn, .brutBtnCheck .sapMBtn { background: var(--re-lime) !important; border: 3px solid var(--brut-ink) !important; border-radius: 4px !important; box-shadow: 4px 4px 0 var(--brut-ink); font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; opacity: 1 !important; }
/* Weiterer Nachzug (11.07., Button war weiterhin blass/kaum lesbar) — die bekannten inneren UI5-
Elemente (Button-Innen-Span, Icon-Span, Text-Span) explizit statt nur über den "*"-Nachfahren-
Wildcard neutralisieren; manche dieser Elemente setzen ihre eigene Deckkraft/Hintergrundfarbe mit
einer Spezifität, die der Wildcard-Regel entgehen kann. */
.brutBtnCheck .sapMBtnInner, .brutBtnCheck .sapMBtnContent, .brutBtnCheck .sapMBtnDefault,
.brutBtnCheck .sapMBtnText, .brutBtnCheck .sapMBtnIcon, .brutBtnCheck .sapUiFupBtn {
background: transparent !important; color: var(--brut-ink) !important; opacity: 1 !important;
}
/* Sekundär-Button (11.07.) — für CTAs, die als echter Button statt reiner Link erscheinen sollen
(z.B. "Beispielobjekt ansehen"), aber optisch zurückhaltender als der blaue Primär-Button. */
.brutBtnSecondary.sapMBtn { background: #fff !important; border: 3px solid var(--brut-ink) !important; border-radius: 4px !important; box-shadow: 4px 4px 0 var(--brut-ink); font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; }
.brutBtnSecondary, .brutBtnSecondary * { color: var(--brut-ink) !important; background: transparent !important; }
.brutFinePrint.sapMLnk, .brutFinePrint.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--brut-ink) !important; }
.brutHeroVisual { flex: 2 1 28rem; width: auto; max-width: 54rem; border: 3px solid var(--brut-ink); border-radius: 8px; overflow: hidden; background: #fff; }
.brutHeroVisualBar { background: #fff; border-bottom: 3px solid var(--brut-ink); padding: .5rem .9rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.brutHeroPhotoFrame { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #000; }
/* Bugfix (05.07.): ":not(.krasseDemoPlaceholder)" ergänzt — diese Regel positioniert direkte Kind-Divs
absolut bei top:-14% (gedacht, um ein echtes Foto im 16:10-Rahmen neu zu zentrieren/croppen). Der
Platzhalter-Zustand (Icon+Text+Schritte, mehrere direkte Kind-Divs) wurde davon mitgetroffen — alle
Textblöcke landeten übereinandergestapelt bei -14% und damit abgeschnitten/überlappend. */
.brutHeroPhotoFrame:not(.krasseDemoPlaceholder) > div { position: absolute; top: -14%; left: 0; width: 100%; }
@media (max-width: 900px) { .brutHero { gap: 1.5rem; } .brutHeroText, .brutHeroVisual { flex: 1 1 100%; max-width: 100%; } }
/* Sichtbare Trennung links/rechts im "Testen Sie selbst"-Block (11.07., Nutzerfeedback "trenne links
und rechts sichtbarer") — eigene Klassen statt die globalen .brutHeroText/.brutHeroVisual-Regeln
anzufassen (die auch im Hero oben ohne Trennlinie verwendet werden). Trennlinie nur ab der Breite, bei
der beide Spalten wirklich nebeneinander stehen — darunter (Wrap) wäre eine mittig hängende Linie nur
Lärm. */
.kiTestSplit { gap: 3rem; }
@media (min-width: 901px) {
.kiTestLeftCol { border-right: 3px solid var(--brut-ink); padding-right: 2.5rem; }
}
.brutDark .kiTestLeftCol { border-right-color: #fff; }
.brutLiveDot { width: 8px; height: 8px; border-radius: 50%; background: #2b7d46; display: inline-block; }
.brutHeroTagRow { border-top: 3px solid var(--brut-ink); }
.brutHeroTag { flex: 1; padding: .6rem .8rem; border-right: 3px solid var(--brut-ink); }
.brutHeroTag:last-child { border-right: none; }
.brutHeroTag.cGreen { background: var(--brut-green); }
.brutHeroTag.cPink { background: var(--brut-pink); }
.brutHeroTag.cYellow { background: var(--brut-yellow); }
.brutHeroTagLabel.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--brut-ink) !important; }
.brutHeroTagValue.sapMText { font-weight: 700; font-size: .95rem; color: var(--brut-ink) !important; }
/* Sections + Headlines */
/* Dezente Trennlinie zwischen Sektionen (11.07., Nutzerwunsch "voneinander sichtbar trennen wie
dezent möglich") — dünne 1px-Linie in gedämpftem Ink-Ton statt der fetten 3px-Rahmen, die sonst auf
der Seite für Karten/Buttons stehen; das soll ruhig im Hintergrund bleiben, nicht wie ein weiteres
brutalistisches Gestaltungselement wirken. */
.brutSection { padding: var(--brut-pad-y) var(--brut-pad-x); border-top: 1px solid rgba(20, 22, 26, .12); }
.brutOverline.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brut-blue) !important; }
.brutH2.sapMTitle { font-size: 2.4rem; font-weight: 700; text-transform: uppercase; line-height: 1.08; letter-spacing: -.01em; }
/* Referenz-Banner (06.08.2026) — analog zum .legalBanner-Muster der 6 Rechtsseiten: warnt sichtbar,
dass Inhalt ein ungeprüfter Platzhalter ist, statt stillschweigend erfundene Kundenstimmen zu
zeigen. Amber-Ton (--re-amber) statt der sonst genutzten Grün/Lime-Akzente, damit der
Warn-Charakter optisch erkennbar bleibt. */
.brutRefBanner { background: color-mix(in srgb, var(--re-amber) 15%, white); border: 2px solid var(--re-amber); border-radius: 6px; padding: .9rem 1.2rem; margin-bottom: 1.5rem; }
.brutRefBanner .brutRefBannerTitle.sapMText { display: block; color: var(--re-amber) !important; text-transform: uppercase; font-size: .78rem; font-weight: 700; letter-spacing: .03em; margin-bottom: .3rem; }
.brutRefBanner .brutRefBannerText.sapMText { font-size: .85rem; line-height: 1.5; color: var(--brut-ink) !important; }
/* Testimonial-Karten (06.08.2026, neuer Codex-Entwurf) — schlichte Zitat-Karten, kein neues
Karten-Grid-System nötig, .brutCard-Basis reicht mit eigenem Innenlayout. */
.brutQuoteCard { border: 3px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; flex: 1 1 20rem; }
.brutQuoteStars.sapMText { color: var(--re-amber) !important; font-size: .95rem; letter-spacing: .1em; }
.brutQuoteText.sapMText { font-size: 1rem; font-style: italic; line-height: 1.5; }
.brutQuoteAuthorRow { display: flex; align-items: center; gap: .6rem; margin-top: auto; }
.brutQuoteAvatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--brut-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .82rem; flex-shrink: 0; }
.brutQuoteAuthorName.sapMText { font-weight: 700; font-size: .85rem; display: block; }
.brutQuoteAuthorRole.sapMText { font-size: .75rem; color: var(--brut-gray); display: block; }
/* Certified-Makler-Sektion (06.08.2026) — reiner Text/Design-Block, bewusst OHNE Backend
(Nutzerentscheidung): CTA ist ein mailto-Link, keine neue DB-Tabelle/API. */
.brutMaklerCard { border: 3px solid var(--brut-ink); border-radius: 8px; background: color-mix(in srgb, var(--re-green) 8%, white); padding: 2rem; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
/* Vollbreit + fett statt schmal/grau (11.07., Nutzerwunsch "jede Sektion gleich aufbauen ... fetter
überall") — vereinheitlicht mit .krasseGesamtText, das dieselbe Behandlung schon früher diese
Session bekam ("fullsize über die ganze Breite, fetter"). Betrifft automatisch alle ~11 Sektionen,
die diese Klasse nutzen, statt jede Stelle einzeln umzustellen. */
.brutSectionLead.sapMText { font-size: 1rem; font-weight: 600; color: var(--brut-ink); margin-top: .5rem; }
/* Cards + Grids */
/* Bugfix 04.07.: "1fr" allein clamped nicht auf den verfügbaren Platz — lange Wörter ohne
Leerzeichen (z. B. "AUTO-ZUSAMMENFÜHRUNG") sprengen die Spalte über den Seitenrand hinaus.
minmax(0,1fr) erzwingt, dass Spalten nie breiter als ihr Anteil werden; Titel brechen dafür um. */
.brutGrid { display: grid; gap: 1.25rem; width: 100%; box-sizing: border-box; min-width: 0; }
.brutGrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brutGrid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brutGrid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 5. Feature-Karte "Risikoscore" (17.07.) — 3 statt 4 Spalten, damit 5 Karten sauber 3+2 statt 4+1
umbrechen; nutzt dieselben Breakpoints wie die anderen Grids. */
.brutGrid5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brutGrid .brutCard { min-width: 0; overflow-wrap: break-word; }
.brutCardTitle.sapMTitle { overflow-wrap: break-word; white-space: normal; }
@media (max-width: 900px) { .brutGrid2, .brutGrid3, .brutGrid4, .brutGrid5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .brutGrid2, .brutGrid3, .brutGrid4, .brutGrid5 { grid-template-columns: minmax(0, 1fr); } }
.brutCard { border: 3px solid var(--brut-ink); border-radius: 6px; padding: 1.5rem; background: #fff; }
.brutCard.cGreen { background: var(--brut-green); }
.brutCard.cPurple { background: var(--brut-purple); }
.brutCard.cYellow { background: var(--brut-yellow); }
.brutCard.cPink { background: var(--brut-pink); }
.brutIconBox { width: 2.6rem; height: 2.6rem; border: 2px solid var(--brut-ink); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.brutCardTitle.sapMTitle { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; }
.brutCardTitle.brutSmallTag.sapMText { font-size: .8rem; font-weight: 700; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }
.brutCardText.sapMText { font-size: .9rem; margin-top: .3rem; }
/* Personas als kompakte 1-Zeilen-Liste (11.07., Nutzerfeedback "kürzer, eine Zeile sollte reichen")
statt 6 großer Karten mit Icon-Box+Titel+Fließtext — Rollenname+Nutzen-Satz in einer Zeile,
Trennlinie zwischen den Zeilen statt Kartenrahmen je Rolle. */
.brutPersonaList { border-top: 2px solid var(--brut-ink); }
.brutPersonaRow { padding: .85rem 0; border-bottom: 2px solid var(--brut-ink); flex-wrap: wrap; gap: .1rem .7rem; }
.brutPersonaIcon.sapUiIcon { font-size: 1.1rem; color: var(--brut-ink); flex-shrink: 0; }
.brutPersonaName.sapMText { font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .02em; min-width: 7rem; flex-shrink: 0; }
.brutPersonaText.sapMText { font-size: .9rem; color: var(--brut-gray); flex: 1 1 20rem; }
/* Störquellen / Checklisten-Sektion */
.brutSectionPurple { background: var(--brut-purple); padding: var(--brut-pad-y) var(--brut-pad-x); }
.brutCheckItem { border: 3px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: .9rem 1.1rem; }
.brutCheckIcon { width: 1.4rem; height: 1.4rem; border-radius: 3px; background: var(--brut-green); border: 2px solid var(--brut-ink); display: inline-flex; align-items: center; justify-content: center; }
/* Nicht verfügbar für das aktuell gezeigte Objekt (08.07.) — gleiche Form, gedeckte Farbe statt Grün,
damit die "Automatisch geprüft"-Sektion ehrlich zeigt, was für DIESES Objekt (nicht generell) live ist. */
.brutCheckIcon.cMuted { background: #e4e1d6; }
.brutCheckItem .sapMText { font-weight: 700; text-transform: uppercase; font-size: .9rem; }
/* Dunkle Sektionen */
.brutDark { background: var(--brut-ink); padding: var(--brut-pad-y) var(--brut-pad-x); }
/* Vor-Ort-Erfassung-Sektion (08.07.): mehr Luft zwischen Text- und Phone-Spalte als der normale
.brutGrid-Standardabstand (1.25rem) — Nutzerfeedback "zu nah aneinandergeklatscht" — plus vertikale
Zentrierung, damit beide Spaltenhälften optisch mittig im gleich hohen Feld sitzen. */
.brutDark.brutGrid2 { gap: 3.5rem; align-items: center; }
@media (max-width: 900px) { .brutDark.brutGrid2 { gap: 1.5rem; } }
.brutDark .brutH2.sapMTitle, .brutDark .sapMTitle { color: #fff; }
.brutDark .brutOverline.sapMText { color: var(--brut-green) !important; }
/* Kontrast-Nachzug (11.07.): Subline ist jetzt fett statt normal-gewichtet (siehe .brutSectionLead
oben) — auf Dunkel etwas heller als vorher (#cfd3da → #eef0f5), damit der kräftigere Text weiterhin
gut lesbar bleibt statt zu stark mit dem dunklen Hintergrund zu verschmelzen. */
.brutDark .brutSectionLead.sapMText, .brutDark .sapMText { color: #eef0f5; }
/* Bugfix (06.07.): .brutFinePrint erzwingt sonst dunkle Schrift (var(--brut-ink)) mit !important —
auf .brutDark-Hintergrund (derselbe dunkle Ton) war das Bildunterschrift-Element dadurch praktisch
unsichtbar (dunkle Schrift auf dunklem Grund), z.B. "INSPECTIUS CAPTURE · LIVE-DEMO-VIDEO" unter dem
Vor-Ort-Erfassung-Video. */
.brutDark .brutFinePrint.sapMText, .brutDark .brutFinePrint.sapMLnk { color: #cfd3da !important; }
/* Kontrast-Fix (08.07., Nutzerfeedback "Headline schlecht lesbar"): dieselbe Ursache wie oben — die
".brutDark .sapMText"-Regel griff auch auf den TEXT innerhalb von .brutBadge durch, obwohl die
Badge-Box selbst ein WEISSER Chip bleibt (siehe .brutBadge#background:#fff). Ergebnis war heller
Text auf hellem Grund (Kontrast 1,5:1, WCAG-Minimum 4,5:1) — direkt über der Sektions-Überschrift,
dadurch wirkte der ganze Headline-Bereich unleserlich. Badge-Text bleibt jetzt immer dunkel. */
.brutDark .brutBadge .sapMText { color: var(--brut-ink) !important; }
.brutDark .brutCard { border-color: #fff; }
/* Karten mit heller Flächenfarbe (cGreen/cPurple/cYellow/cPink) behalten dunkle Schrift für Kontrast,
auch wenn sie in einer dunklen Sektion liegen (Bugfix 04.07.: Text war sonst hellgrau auf hellgrün/-gelb kaum lesbar). */
.brutDark .brutCard.cGreen, .brutDark .brutCard.cPurple, .brutDark .brutCard.cYellow, .brutDark .brutCard.cPink {
border-color: var(--brut-ink);
}
.brutDark .brutCard.cGreen .sapMText, .brutDark .brutCard.cGreen .sapMTitle,
.brutDark .brutCard.cPurple .sapMText, .brutDark .brutCard.cPurple .sapMTitle,
.brutDark .brutCard.cYellow .sapMText, .brutDark .brutCard.cYellow .sapMTitle,
.brutDark .brutCard.cPink .sapMText, .brutDark .brutCard.cPink .sapMTitle {
color: var(--brut-ink) !important;
}
.brutStepNum.sapMTitle { font-size: 2.2rem; font-weight: 700; color: var(--brut-ink) !important; }
.brutStepCard .brutStepNum.sapMTitle { color: var(--brut-ink) !important; }
.brutStepCard .sapMText, .brutStepCard .sapMTitle:not(.brutStepNum) { color: var(--brut-ink) !important; }
/* Krasse Erkenntnisse — Statement-Karten (05.07.): O-Ton der KI-Reasoning-Texte statt Bildergalerie
(die gibt es schon in der Bildanalyse-Sektion), daher großzügiges Zitat-Layout statt Foto-Rahmen. */
.krasseStatementCard { min-height: 11rem; justify-content: space-between; }
.krasseStatementText.sapMText { font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
/* Krasse Erkenntnisse / Demo-Test — Karussell statt gestapelter Karten (05.07.): Bild+Bbox+Text als
ein vorgebautes HTML-Fragment je Seite (siehe krasseCarouselImgBox/krasseCarouselCaption unten,
Klassen werden im JS-String verwendet). */
.krasseCarousel { border: none; }
.krasseCarouselCard { padding: 0; overflow: hidden; height: 100%; }
.krasseCarouselImgBox { position: relative; height: 15rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f2f2f2; border-bottom: 3px solid var(--brut-ink); }
.krasseCarouselImgBox > div { position: relative; display: inline-block; max-width: 100%; max-height: 100%; }
.krasseCarouselImgBox img { display: block; max-width: 100%; max-height: 15rem; }
.krasseCarouselCaption { padding: 1rem 1.2rem; }
.krasseCarouselCaption p { margin: 0 0 .5rem; }
/* Eigene Textklasse statt .brutLead (10.07., Nutzerfeedback "über die ganze Breite, fetter") —
.brutLead deckelt auf max-width:32rem und ist grau/normal-gewichtet (für einen kurzen Lead-Satz
gedacht), hier soll der volle, mehrsätzige KI-Text die ganze Kartenbreite nutzen und kräftiger wirken. */
.krasseGesamtText.sapMText { font-size: 1.05rem; font-weight: 600; color: var(--brut-ink); line-height: 1.55; }
/* Kachel-Ansicht (05.07., nach Layout-Bug überarbeitet): eigene .krasseTileImgBox statt der
inline-block-geschrumpften .krasseCarouselImgBox — Bug war, dass sich die Bild-Box bei einem
Hochformat-Foto auf die (schmale) skalierte Bildbreite schrumpfte und Badges dadurch aus der
Kachel herausquetschten. Popup/Dialog nutzt weiterhin die pixelgenaue .krasseCarouselImgBox. */
/* Bugfix 12.07. (Bbox-Position falsch): die vorherige feste height:8rem + object-fit:cover zeigte bei
Hochformat-Fotos nur einen schmalen mittleren Ausschnitt des Bildes — die Bbox-Überlagerung wird aber
als Prozent-Position relativ zum GESAMTEN Originalbild berechnet (siehe _buildKrasseCardHtml), lag bei
gecropptem Bild also an der falschen Stelle. Jetzt wie bei den Hero-Kacheln (_renderKernstueckFotos)
volle Breite ohne Crop/festen Höhen-Deckel — Container-Prozent entspricht dann wieder exakt der
Bild-Prozent-Position, Bbox sitzt pixelgenau. Kachelhöhe variiert dadurch leicht je Bildformat.
height:100% h. object-fit:cover ENTFERNT statt Klasse gelöscht, für den Fall, dass ein künftiger
Anzeigekontext das Verhalten wieder braucht (z.B. eine feste Wandhöhen-Vorschau). */
.krasseTilesList.sapMList > .sapMListItems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .krasseTilesList.sapMList > .sapMListItems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .krasseTilesList.sapMList > .sapMListItems { grid-template-columns: minmax(0, 1fr); } }
.krasseTilesList .sapMLIB { border: none; padding: 0; }
.krasseTileCard { cursor: pointer; }
/* Wieder länglicher Crop statt voller Bildhöhe (12.07., Nutzerfeedback "wie vorher, füllend, dadurch
Kachel niedriger") — aspect-ratio statt fester height:8rem, damit es unabhängig vom Grid-Spalten-
Breite immer im selben Seitenverhältnis croppt. Nimmt den Bbox-Präzisions-Tradeoff aus dem Fix vom
12.07. bewusst wieder in Kauf (Bbox-Prozent ist relativ zum UNGECROPPTEN Originalbild, sitzt bei
object-fit:cover leicht daneben) — für diese kleinen Vorschau-Kacheln unkritisch, die pixelgenaue
Ansicht bleibt in der Popup/Dialog-.krasseCarouselImgBox erhalten. */
.krasseTileImgBox { position: relative; overflow: hidden; background: #f2f2f2; border-bottom: 3px solid var(--brut-ink); aspect-ratio: 16 / 7; width: 100%; }
.krasseTileImgBox img { display: block; width: 100%; height: 100%; object-fit: cover; }
.krasseTileCard .krasseCarouselCaption { padding: .7rem .9rem; }
.krasseTileCard .krasseCarouselCaption p { font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.krasseTileCard .krasseCarouselCaption div { font-size: .7rem; }
.krasseDialogBody .krasseCarouselImgBox { height: 22rem; }
.krasseDialogBody .krasseCarouselImgBox img { max-height: 22rem; }
/* "Jetzt selbst testen" — Platzhalter im Foto-Rahmen vor dem ersten Upload (05.07.). */
/* Bugfix (05.07.): .brutHeroPhotoFrame hat background:#000 fest codiert (als Letterbox-Hintergrund
HINTER einem echten Foto gedacht) — der Platzhalter-Zustand (kein Bild, nur Icon+Text) zeigte dieses
Schwarz einfach voll durch. Eigene Hintergrundfarbe für die Kombination override't das. */
.brutHeroPhotoFrame.krasseDemoPlaceholder { background: #f2f2f2; aspect-ratio: auto; }
.krasseDemoPlaceholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; min-height: 15rem; color: var(--brut-gray); font-family: 'JetBrains Mono', monospace; font-size: .85rem; padding: 2rem 1.5rem 1.5rem; text-align: center; }
.krasseDemoPlaceholderIcon { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--brut-blue); color: #fff; border: 3px solid var(--brut-ink); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.krasseDemoPlaceholderHeadline { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--brut-ink); }
.krasseDemoPlaceholderSchritte { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; font-size: .8rem; }
/* Lade-Overlay direkt auf dem Foto beim Selbsttest (11.07., Nutzerfeedback "hier sollte der Fortschritt
gezeigt werden, nicht dort wo es jetzt pulsiert") — löst den vorherigen BusyIndicator neben dem
Upload-Button ab, siehe Landing.controller.js#_zeigeDemoUploadBusy. */
.dqAnalyseOverlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.dqAnalyseSpinner { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: dqAnalyseSpin 0.8s linear infinite; }
@keyframes dqAnalyseSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.dqAnalyseSpinner { animation: none; border-top-color: rgba(255,255,255,.35); }
}
/* Testen-Sie-selbst-Flow: Adress-Kacheln in der rechten Bildbox (11.07.) — dieselbe Box, die sonst das
Foto zeigt, wandert durch Platzhalter → Lade-Zustand → 6-Kacheln-Ergebnis → Foto-Analyse. */
.dqTestBusyBox { min-height: 15rem; background: var(--brut-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.dqTestErgebnis { padding: 1.2rem 1.5rem 1.5rem; }
.dqTestAdresse { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .8rem; color: var(--brut-ink); margin-bottom: .9rem; }
.dqTestKachelnGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.dqTestKachel { border: 2px solid var(--brut-ink); border-radius: 6px; padding: .6rem .7rem; background: #fff; }
.dqTestKachelLabel { font-family: 'JetBrains Mono', monospace; font-size: .66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--brut-gray); margin-bottom: .2rem; }
.dqTestKachelWert { font-weight: 700; font-size: .82rem; color: var(--brut-ink); }
.dqTestKachelLink { display: block; margin-top: .4rem; font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; color: var(--brut-blue); text-decoration: none; }
.dqTestKachelLink:hover { text-decoration: underline; }
/* 3D-Gebäudemodell-Container (11.07.) — sap.m.VBox unterstützt kein rohes style-Attribut (führt zu
"unknown setting 'style'" und die Regel wird ignoriert), deshalb eigene Klasse statt Inline-Style
für position:relative (Tooltip-Positionierung) + feste Höhe. */
/* 11.07. ins rechte Fenster (.kiTestRightCol) verschoben statt eigener voller Breite unter der
Zweispalten-Aufteilung — der umgebende Container ist jetzt NICHT mehr leer (enthält bereits
Kacheln/Foto/Tags mit echter Breite), deshalb funktioniert width:100% hier zuverlässig, anders als
zuvor als leerer Geschwister-Block direkt unter der Sektion (siehe Lod2Viewer.js für dieselbe
Größen-Vorsicht auf JS-Seite). */
.lod2ViewerFrame { position: relative; width: 100%; height: 420px; overflow: hidden; }
.lod2ViewerFrame canvas { display: block; }
.lod2ViewerCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 2D-Kataster/3D-Split in Vorschau3D (23.07., deukos-artige Split-Ansicht). Beide Spalten flexen
gleich breit und rutschen auf schmalen Screens (HBox wrap) untereinander. min-width verhindert, dass
Karte/Canvas zu schmal für die 420px-Höhe werden. */
.inspSplitCol { flex: 1 1 340px; min-width: 300px; }
.katasterMapFrame { position: relative; width: 100%; height: 420px; border-radius: 8px; overflow: hidden; }
@media (max-width: 480px) { .dqTestKachelnGrid { grid-template-columns: 1fr; } }
/* KI-Vergleich */
/* Bugfix 04.07.: Original + KI-Markierung sind jetzt zwei GETRENNTE Boxen nebeneinander (vorher
beide in einer zu schmalen 460px-Box gequetscht, dadurch vertikal statt horizontal gestapelt). */
.brutCompareRow { gap: 1.5rem; align-items: flex-start; }
.brutCompareBox { border: 3px solid var(--brut-ink); border-radius: 6px; overflow: hidden; background: #fff; flex: 1 1 22rem; max-width: 26rem; }
.brutCompareBar { padding: .5rem .9rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; border-bottom: 3px solid var(--brut-ink); }
.brutCompareBar.cPink { background: var(--brut-pink); display: flex; justify-content: space-between; }
/* cYellow/cGreen ergänzt (12.07.) — waren in Landing.view.xml bereits als Klasse vergeben (Nachbarschaft
und Umfeld, neu: Entscheidung), hatten aber keine passende Regel und blieben farblos. */
.brutCompareBar.cYellow { background: var(--brut-yellow); display: flex; justify-content: space-between; }
.brutCompareBar.cGreen { background: var(--brut-green); display: flex; justify-content: space-between; }
/* Report-Screenshots (05.07.): breiter als brutCompareBox, da Objektdashboard/Entscheidung-Screenshots
klein bedruckten Text enthalten, der bei 26rem max-width unleserlich würde. */
.brutReportBox { border: 3px solid var(--brut-ink); border-radius: 6px; overflow: hidden; background: #fff; flex: 1 1 32rem; max-width: 42rem; }
.brutReportBox img { width: 100%; display: block; }
/* Objektakte-Report-Akkordeon (12.07.) — "Expanding Panels": eine Zeile, ein Panel offen (volle
Breite + Bild), die übrigen 4 als schmale farbige Streifen mit vertikalem Label. Ersetzt die
vorherigen 5 offenen brutReportBox-Screenshots (zu viel vertikaler Platz). Bewusst anders als
.brutFaqList (dort: vertikale Liste/Grid) — hier volle Breite, eine feste Zeilenhöhe, Klick auf
einen Streifen expandiert ihn per CSS-Transition statt Höhen-Sprung. */
/* Breiten-Bugfix (12.07.) — die umgebende VBox der Sektion hat alignItems="Center", wodurch Kinder
ohne eigene stabile Breitenquelle auf ihre Content-Breite schrumpfen statt zu strecken. Ein reiner
CSS-Fix (align-self:stretch auf .brutAccordionList) griff NICHT, weil UI5 jedes VBox-Kind zusätzlich
in einen eigenen ".sapMFlexItemAlignAuto"-Wrapper-Div packt, der selbst der eigentliche Flex-Item
ist — der eigentliche Fix sitzt daher in Landing.view.xml: die List steckt jetzt (wie der
Header-Textblock direkt darüber) in einer eigenen , das gleiche, bereits
bewährte Muster. */
.brutAccordionList .sapMListUl { display: flex; flex-direction: row; gap: .85rem; list-style: none; padding: 0; margin: 0; height: 30rem; width: 100%; }
/* NUR padding/height hier (12.07., Spezifitäts-Bugfix) — border/background bewusst NICHT auf dieser
2-Klassen-Regel (".brutAccordionList .sapMLIB"), da sie sonst .brutAccordionItem (nur 1 Klasse)
und dessen Farbvarianten unabhängig von der Deklarationsreihenfolge übersticht (höhere
CSS-Spezifität gewinnt immer) — dadurch waren die weißen Panels (Risiko, Wertindikation)
unsichtbar: randlos und transparent statt weiß mit Rahmen. Live im Browser reproduziert. */
.brutAccordionList .sapMLIB { padding: 0; height: 100%; }
/* .sapMLIBContent (12.07., eigentlicher Bugfix-Ort) — UI5s eigener Inhalts-Wrapper zwischen li und
meiner VBox hat von Haus aus height:auto und bricht damit die height:100%-Vererbungskette: die li
selbst hat eine definite Höhe (aus flex-basis), aber der Wrapper sizet sich auf seinen Content statt
diese Höhe zu übernehmen, wodurch meine VBox (.brutAccordionInner) auf ihre NATÜRLICHE Content-Höhe
statt die kollabierte Item-Höhe wuchs — das vertikale Label landete dadurch weit außerhalb des
sichtbaren Streifens. Live im Browser über den DOM-Baum diagnostiziert (h=0/w=0 auf dem Wrapper,
während li bereits korrekt 54px hoch war). Ein vorheriger Versuch mit position:absolute+inset:0
auf .brutAccordionInner umging das zwar, entzog dem li aber jeglichen intrinsischen Inhalt und ließ
die gesamte Breiten-Kette bis zur List selbst auf 0 kollabieren (List sitzt in einer
alignItems="Center"-VBox, deren width:100%-Auflösung auf konkreten Kindinhalt angewiesen ist) —
diese gezielte Wrapper-Fixierung ist der robustere Fix. */
.brutAccordionItem .sapMLIBContent { height: 100%; }
.brutAccordionItem { flex: 0 0 4.5rem; height: 100%; border: 3px solid var(--brut-ink); border-radius: 10px; overflow: hidden; background: #fff; position: relative; cursor: pointer; transition: flex-basis .55s cubic-bezier(.19,1,.22,1); }
.brutAccordionItem:hover { box-shadow: 4px 4px 0 var(--brut-ink); }
/* flex-basis:0 statt auto (12.07., Bugfix) — mit "auto" bemisst sich die Breite des aktiven Panels
am Content, der durch den neuen position:absolute-Bildbereich (Scroll-Fix) keine intrinsische
Breite mehr beisteuert; das Panel kollabierte dadurch fast auf 0. flex-basis:0 + flex-grow:1
entkoppelt die Breite komplett vom Kindinhalt. */
.brutAccordionItem.active { flex: 1 1 0; min-width: 0; }
.brutAccordionItem.cPink { background: var(--brut-pink); }
.brutAccordionItem.cYellow { background: var(--brut-yellow); }
.brutAccordionItem.cGreen { background: var(--brut-green); }
.brutAccordionItem.active { background: #fff; }
.brutAccordionInner { height: 100%; position: relative; }
.brutAccordionBar { height: 2.6rem; padding: 0 1rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; border-bottom: 3px solid var(--brut-ink); background: #fff; opacity: 0; transition: opacity .2s; position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.brutAccordionItem.active .brutAccordionBar { opacity: 1; }
/* UI5 verpackt jedes direkte VBox-Kind in einen eigenen ".sapMFlexItemAlignAuto"-Wrapper-Div, der
selbst position:relative trägt (Kern-CSS, für Flex-Alignment) — das machte diesen kleinen,
content-großen Wrapper statt der großen .brutAccordionInner zum "nearest positioned ancestor" der
Vertikal-Label-Positionierung (position:absolute;top:50%), wodurch das Label praktisch an seiner
normalen Fluss-Position hängen blieb statt zentriert zu werden. Nur innerhalb des Akkordeons
deaktiviert, um UI5s FlexBox-Layout anderswo nicht zu beeinflussen. Live im Browser über
offsetParent diagnostiziert. */
.brutAccordionInner > .sapMFlexItemAlignAuto { position: static; }
.brutAccordionIcon { display: none; }
/* Scroll-Fix (12.07.): der Bild-Wrapper (2. VBox-Kind = die Image-Zelle) bekommt eine feste Höhe +
overflow-y:auto, das Bild selbst volle natürliche Höhe (kein object-fit:cover mehr) — vorher wurde
der Screenshot hart auf die Panel-Höhe zugeschnitten und der Rest war unerreichbar, weil
.brutAccordionItem overflow:hidden hat. Jetzt scrollt nur dieser Bildbereich, Rahmen/Randleiste
bleiben fix stehen. */
.brutAccordionInner > .sapMFlexItemAlignAuto:nth-child(2) { position: absolute; top: 2.6rem; left: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* pointer-events:none (12.07., Klick-Bug-Fix) — das Bild lag als transparente Vollflächen-Ebene über
dem gesamten Panel und fing Klicks auf kollabierten Streifen ab, bevor sie das CustomListItem als
"press" erreichten (live im Browser reproduziert: echte Mausklicks/computer-use-Klicks lösten
onSelectReportPanel nie aus, nur ein manuell gefeuertes firePress() funktionierte). */
.brutAccordionImg { width: 100%; height: auto; display: block; opacity: 0; transition: opacity .3s .12s; pointer-events: none; }
.brutAccordionItem.active .brutAccordionImg { opacity: 1; pointer-events: auto; }
.brutAccordionVerticalLabel.sapMText { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg); writing-mode: vertical-rl; font-family: 'JetBrains Mono', monospace; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; color: var(--brut-ink) !important; opacity: 1; transition: opacity .15s; }
.brutAccordionItem.active .brutAccordionVerticalLabel { opacity: 0; pointer-events: none; }
@media (max-width: 900px) {
.brutAccordionList .sapMListUl { flex-direction: column; height: auto; width: 100%; }
.brutAccordionItem { flex: 0 0 3.4rem; width: 100%; }
.brutAccordionItem.active { flex: 0 0 20rem; }
.brutAccordionVerticalLabel.sapMText { writing-mode: horizontal-tb; transform: translate(-50%, -50%); }
.brutAccordionImg { height: calc(100% - 2.6rem); }
}
/* Flow-Visual "Erst am PC erfasst. Dann vor Ort geprüft. Dann Ihre Objektakte." (08.07., Reihenfolge
korrigiert — vorher stand das Ergebnis vor dem Schritt, der es erzeugt). Echte 1→2→3-Sequenz, jeder
Schritt gleich schwer als eigene Karte mit Farbbalken + nummeriertem Badge. */
.brutFlowGrid { display: flex; align-items: stretch; justify-content: center; gap: 1.5rem; width: 100%; flex-wrap: wrap; }
.brutFlowStepWrap { position: relative; flex: 1 1 18rem; max-width: 22rem; }
.brutFlowStepBadge {
position: absolute; top: -.9rem; left: -.9rem; width: 2rem; height: 2rem; border-radius: 50%;
background: var(--brut-blue); border: 3px solid var(--brut-ink); color: #fff; font-family: 'JetBrains Mono', monospace;
font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center; z-index: 2;
}
.brutFlowInputsCard { height: 100%; border: 3px solid var(--brut-ink); border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.brutFlowInputsBar { padding: .5rem .9rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; border-bottom: 3px solid var(--brut-ink); background: var(--brut-green); }
.brutFlowInputsBody { padding: .85rem .9rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.brutFlowMiniRow { display: flex; align-items: flex-start; gap: .6rem; }
.brutFlowMiniRow.muted { opacity: .55; }
.brutFlowMiniIcon { width: 1.7rem; height: 1.7rem; border: 2px solid var(--brut-ink); border-radius: 5px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; }
.brutFlowMiniTitle { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: .74rem; text-transform: uppercase; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.brutFlowMiniText { font-size: .7rem; color: var(--brut-gray); margin-top: .15rem; line-height: 1.35; }
.brutFlowMiniActive { font-size: .58rem; background: var(--brut-green); border: 1px solid var(--brut-ink); border-radius: 3px; padding: .05rem .35rem; }
.brutFlowMiniSoon { font-size: .58rem; background: #fff; border: 1px solid var(--brut-gray); color: var(--brut-gray); border-radius: 3px; padding: .05rem .35rem; }
.brutFlowArrowWrap { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 8rem; }
.brutFlowArrowTrack { position: relative; width: 100%; height: 3px; background: var(--brut-ink); }
.brutFlowArrowTrack::after {
content: ''; position: absolute; right: -2px; top: 50%; transform: translateY(-50%);
border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--brut-ink);
}
.brutFlowDot {
position: absolute; top: 50%; left: 0; width: 10px; height: 10px; border-radius: 50%;
background: var(--brut-blue); transform: translate(-50%, -50%); opacity: 0;
animation: brutFlowMove 2.4s linear infinite;
}
@keyframes brutFlowMove {
0% { left: 0%; opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.brutFlowDot { animation: none; opacity: .7; left: 50%; }
}
/* Objektakte (05.07.: jetzt in der Mitte, gespeist von Eingabe links UND App-Erfassung rechts —
vorher stand sie ganz rechts als reines Endergebnis, was den eigentlichen Kern des Produkts (die
Objektakte selbst) visuell unterordnete statt hervorzuheben). */
.brutFlowTarget { height: 100%; border: 3px solid var(--brut-ink); border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.brutFlowTargetBar { padding: .5rem .9rem; font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; border-bottom: 3px solid var(--brut-ink); background: var(--brut-blue); color: #fff; }
.brutFlowTargetImg { width: 100%; display: block; }
/* App-Erfassung (05.07.: jetzt rechts, gleich groß wie die Eingabe-Karten links — vorher sprengte
der Hochformat-Screenshot in voller Breite/nativer Höhe komplett das Layout, besonders auf
schmalen Viewports (Bug: "druckt/skaliert nicht"-Bugreport bezog sich u.a. hierauf). Jetzt per
object-fit auf eine feste Höhe gedeckelt, Info als Badge über dem Bild statt eigener Textblock. */
.brutFlowMid { height: 100%; border: 3px solid var(--brut-ink); border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.brutFlowMidBar { padding: .5rem .9rem; font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; text-transform: uppercase; border-bottom: 3px solid var(--brut-ink); background: var(--brut-yellow); }
/* 13.07.: vorher max-height-Deckel auf dem Bildbereich — sobald die Karte (height:100%) höher als
der Deckel wurde, blieb darunter eine leere weiße Fläche, und die absolut positionierte Badge lag
mitten auf dem Screenshot-Inhalt. Jetzt: vorgeschnittener Ausschnitt (bereich-waehlen-ausschnitt.png,
ohne App-Kopfzeile, endet sauber nach der dritten Kachel-Reihe), Bild füllt die Karte komplett,
Caption als feste Leiste UNTER dem Bild statt Overlay. */
.brutFlowMidImgWrap { flex: 1 1 0; min-height: 16rem; overflow: hidden; background: #0a0d14; }
.brutFlowMidImg { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.brutFlowMidCaption {
border-top: 3px solid var(--brut-ink); background: var(--brut-ink); color: #fff;
font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700;
padding: .45rem .9rem; line-height: 1.3;
}
@media (max-width: 1100px) {
.brutFlowArrowWrap { width: 8rem; height: 3.5rem; transform: rotate(90deg); }
}
/* Quellen-Boxen */
.brutSourceBox { border: 3px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: 1rem 1.3rem; }
.brutSourceDot { width: .6rem; height: .6rem; border-radius: 50%; background: #2b7d46; display: inline-block; }
.brutSourceName.sapMText { font-weight: 700; text-transform: uppercase; font-size: 1rem; }
/* Zweigeteilte Bundesländer-Karte (11.07., Nutzerfeedback "muss zweigeteilt sein: links Karte, rechts
Infos") — ersetzt die cursor-folgende Tooltip nur auf der Landingpage (siehe
DatenquellenView.js#renderBundeslaenderKarte, zweiter Parameter). Eigener, engerer Gap als der
Standard-.brutGrid-Abstand, da Karte und Panel enger zusammengehören als z.B. die zwei Spalten der
Vor-Ort-Erfassung-Sektion. */
.dqKarteSplit.brutGrid2 { gap: 2rem; align-items: stretch; }
@media (max-width: 900px) { .dqKarteSplit.brutGrid2 { gap: 1.25rem; } }
.dqKartePanel { border: 2px solid var(--brut-ink); border-radius: 4px; background: #f7f5ee; padding: 1.1rem 1.3rem; display: flex; align-items: center; }
.dqKartePanel .dqKartePanelInner { width: 100%; }
.dqKartePanelHint { display: inline-block; margin-top: .7rem; font-family: 'JetBrains Mono', monospace; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--brut-gray); }
/* Plakative Kopfzeile im Karten-Panel (11.07., Nutzerfeedback "zu wenige Infos, zeig alle Kategorien,
plakativ gestalten") — großer Bundesland-Name + große Stat-Zahl als Blickfang, statt eines kleinen
Fließtext-Satzes. Darunter ALLE Kategorien als Chips statt nur der nackten Zahl. */
.dqKartePanelName { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brut-gray); }
.dqKartePanelStat { font-size: 2.6rem; font-weight: 700; line-height: 1.05; margin-top: .1rem; }
.dqKartePanelStatOf { font-size: 1.3rem; font-weight: 700; color: var(--brut-gray); }
.dqKartePanelStatLabel { font-size: .78rem; color: var(--brut-gray); margin-bottom: .7rem; }
.dqKartePanelChips { display: flex; flex-wrap: wrap; gap: .35rem; }
.dqKarteChip { display: inline-block; padding: .2rem .55rem; border-radius: 3px; font-size: .68rem; font-weight: 700; border: 1.5px solid var(--brut-ink); }
.dqKarteChip.cVerfuegbar { background: var(--brut-green); color: var(--brut-ink); }
.dqKarteChip.cFehlt { background: transparent; color: var(--brut-gray); border-color: #d5d2c8; text-decoration: line-through; }
/* Klick-Detailbereich unter der Karte (11.07., Nutzerfeedback "brauchen wir die Kacheln noch, dafür
Info bei Klick erweitern" → dann "aus-/einklappbar, nur auf Bitte hin zeigen, besser gestalten") —
Auf-/Zuklapp-Schalter (Standard: eingeklappt) + kompakte Zeilen-Liste statt Karten-Grid, reines HTML
(kein sap.ui.core.Icon, daher farbiger Punkt statt Icon-Font). */
/* Schalter als echter Button statt reinem Text (11.07., Nutzerfeedback "geht sicherlich besser") —
gleiche Optik wie .brutBtnSecondary (weiß, dicker Rand, Schlagschatten), plus sanfter Auf-/Zuklapp-
Übergang: .dqDetailBody nutzt max-height+opacity-Transition statt hartem display:none/block (per
Klasse "dqOpen" umgeschaltet, siehe DatenquellenView.js), Icon rotiert statt Zeichen-Tausch. */
.dqDetailToggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; cursor: pointer; padding: .75rem 1.1rem; margin-top: 1rem; border: 3px solid var(--brut-ink); border-radius: 4px; background: #fff; box-shadow: 4px 4px 0 var(--brut-ink); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; transition: transform .1s, box-shadow .1s, background .15s; }
.dqDetailToggle:hover { background: var(--brut-green); }
.dqDetailToggle:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--brut-ink); }
.dqDetailToggleIcon { font-size: .75rem; display: inline-block; transition: transform .25s ease; }
.dqDetailToggleIcon.dqOpen { transform: rotate(180deg); }
.dqDetailBody { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .25s ease; }
.dqDetailBody.dqOpen { max-height: 4000px; opacity: 1; padding-top: .5rem; }
@media (prefers-reduced-motion: reduce) {
.dqDetailToggleIcon, .dqDetailBody { transition: none; }
}
.dqDetailGroupTitle { font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .02em; color: var(--brut-gray); margin: 1.1rem 0 .3rem; }
.dqDetailGroupTitle:first-child { margin-top: 0; }
.dqDetailList { border-top: 1px solid #e2ded2; }
.dqDetailRow { padding: .55rem 0; border-bottom: 1px solid #e2ded2; }
.dqDetailRowMain { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .5rem; }
.dqDetailRowName { font-weight: 700; font-size: .85rem; }
.dqDetailRowStatus { font-size: .78rem; color: var(--brut-gray); margin-left: auto; }
.dqDetailRowHinweis { font-size: .8rem; color: var(--brut-gray); margin-top: .2rem; }
.dqDetailDot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; }
.dqDetailDot.cVerfuegbar { background: #2b7d46; }
/* Preise */
.brutPlanCard { border: 3px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: 1.75rem; display: flex; flex-direction: column; }
.brutPlanCard.cHighlight { background: var(--brut-blue); }
.brutPlanCard.cHighlight .sapMText, .brutPlanCard.cHighlight .sapMTitle { color: #fff !important; }
.brutPlanBadge { display: inline-flex; border: 2px solid var(--brut-ink); border-radius: 3px; padding: .2rem .6rem; font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; text-transform: uppercase; background: var(--brut-yellow); align-self: flex-start; }
.brutPlanCard.cHighlight .brutPlanBadge { background: #fff; }
.brutPlanCard.cHighlight .brutPlanBadge .sapMText { color: var(--brut-ink) !important; }
.brutPlanPrice.sapMTitle { font-size: 2.6rem; font-weight: 700; }
.brutPlanFeature.sapMText { font-size: .85rem; }
/* Bugfix 04.07.: Plan-Buttons hatten transparenten Hintergrund + blaue SAP-Standardschrift — auf der
blauen Highlight-Karte (Professional) dadurch blauer Text auf blauem Grund, nur im Hover sichtbar. */
.brutPlanBtn.sapMBtn { background: var(--brut-ink) !important; border: 3px solid var(--brut-ink) !important; border-radius: 4px !important; font-family: 'JetBrains Mono', monospace; font-weight: 700; text-transform: uppercase; font-size: .78rem; }
.brutPlanBtn, .brutPlanBtn * { color: #fff !important; background: transparent !important; }
.brutPlanCard.cHighlight .brutPlanBtn.sapMBtn { background: #fff !important; border-color: #fff !important; }
.brutPlanCard.cHighlight .brutPlanBtn, .brutPlanCard.cHighlight .brutPlanBtn * { color: var(--brut-ink) !important; background: transparent !important; }
/* ERP-Karte Akzent (20.07.) — bisher reiner Ink-Rahmen wie jede andere Karte, wirkte neben der
farbig gefüllten Privat-Karte (cHighlight/blau) wie eine Nebensache. Eigene Akzentfarbe (lila,
drittes Brand-Pastell nach Blau/Grün) statt Vollfläche — Enterprise-Karte bleibt hell/seriös,
bekommt aber sichtbares Gewicht durch die dicke obere Kante + eingefärbtes Badge. */
.brutPlanCard.cEnterprise { border-top: 8px solid var(--brut-purple); background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%); }
.brutPlanCard.cEnterprise .brutPlanBadge { background: var(--brut-purple); }
/* Kachel-Layout (20.07., 3.–4. Iteration) — jeder Preis-/Struktur-Block der ERP-Karte bekommt einen
eigenen Rahmen (.brutTile), damit die Karte in klar abgegrenzte Einheiten zerfällt statt als
Fließtext-Wand zu wirken. cCallout (Beispielrechnung) bekommt eine gestrichelte Linie statt
durchgezogener — signalisiert "Rechenbeispiel", nicht "harte Zusage" wie die Fakten-Kacheln.
Preis-Zahlen (4. Iteration) vergrößert — sollen als Kalkulationsgrundlage für Vertrieb/Marketing
auf einen Blick lesbar sein, 1.6rem/1.4rem gingen neben den übrigen fetten Preisen der Seite unter. */
.brutTile { border: 2px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: 1.1rem 1.25rem; min-width: 0; }
.brutTile .brutPlanPrice.sapMTitle { font-size: 2.4rem; }
.brutTile.cCallout { border-style: dashed; border-color: var(--brut-purple); background: #f4f1ff; }
/* Preisvergleich (20.07.) — dunkler Kontrastmoment für die Einordnungs-Kachel, angelehnt an die
"Proof"-Sektion im Investor-Memo (dunkler Hintergrund, grüner Akzent für die Kernzahl). */
.brutTile.cCompare { background: var(--brut-ink); border-color: var(--brut-ink); }
.brutTile.cCompare .brutOverline.sapMText { color: var(--brut-green) !important; }
.brutTile.cCompare .brutPlanFeature.sapMText,
.brutTile.cCompare .brutAddonDesc.sapMText { color: #fff; }
.brutTile.cCompare .brutFinePrint.sapMLnk { color: #9aa0ab !important; }
/* Preiszeilen (20.07., 5. Iteration) — zwei separate, gleich hoch gestreckte Kacheln erzeugten viel
Leerraum, weil ihr Inhalt die Höhe nicht ausfüllte. Jetzt 3 dichte Zeilen in EINER Kachel, Preis
rechtsbündig und groß, Label links — Informationsdichte statt Kacheln, die nur Weißraum zeigen. */
.brutErpPriceRow { padding: .5rem 0; border-bottom: 1px solid rgba(20,22,26,.14); }
.brutErpPriceRow.brutErpPriceRowLast { border-bottom: none; padding-bottom: 0; }
.brutErpPriceRow:first-child { padding-top: 0; }
/* Add-on-Box (20.07.) — Preise-Sektion Reihe 1 rechts: 6 Zusatzleistungen als kompakte Liste in
einer Karte statt 6 Einzelkarten, damit sie optisch neben der Privat-Preiskarte gleich hoch
wirkt. Jede Zeile Titel+Preis in einer HBox, Beschreibung darunter, Trennlinie zwischen Zeilen. */
.brutAddonBox { border: 3px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: 1.5rem 1.75rem; }
.brutAddonRow { padding: .7rem 0; border-bottom: 1px solid rgba(20,22,26,.14); }
.brutAddonRow:last-child { border-bottom: none; padding-bottom: 0; }
.brutAddonRow:first-child { padding-top: 0; }
.brutAddonTitle.sapMText { font-weight: 700; font-size: .92rem; }
.brutAddonPreis.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .78rem; font-weight: 700; color: var(--brut-blue); white-space: nowrap; }
.brutAddonDesc.sapMText { font-size: .8rem; color: #6a6d70; margin-top: .15rem; }
/* FAQ */
/* Eigenes FAQ-Akkordeon (05.07.) — ersetzt sap.m.Panel (Standard-Pfeil-Icon/Header-Chrome wirkte
altbacken). Karte statt Panel-Leiste, "+"/"–"-Icon in eigener Box statt UI5-Default-Pfeil. */
.brutFaqCard { border: 3px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: 1.1rem 1.3rem; margin-bottom: .9rem; cursor: pointer; transition: box-shadow .15s; }
.brutFaqCard:hover { box-shadow: 4px 4px 0 var(--brut-ink); }
.brutFaqFrage.sapMText { font-weight: 700; font-size: 1.02rem; }
.brutFaqAntwort.sapMText { color: var(--brut-gray); line-height: 1.55; }
.brutFaqToggle.sapUiIcon { width: 1.8rem; height: 1.8rem; min-width: 1.8rem; border: 2px solid var(--brut-ink); border-radius: 4px; background: var(--brut-green); display: inline-flex; align-items: center; justify-content: center; }
/* Kontakt */
/* iPhone-Rahmen für echte Capture-PWA-Screenshots (04.07.) — reines CSS, kein SVG-Asset nötig. */
.brutPhoneFrame {
width: 16rem; aspect-ratio: 375 / 812; background: #000; border: 3px solid var(--brut-ink);
border-radius: 2.6rem; padding: .65rem; box-sizing: border-box; position: relative; overflow: hidden;
box-shadow: 8px 8px 0 rgba(255,255,255,.15);
}
.brutPhoneNotch {
position: absolute; top: .65rem; left: 50%; transform: translateX(-50%);
width: 40%; height: 1.2rem; background: #000; border-radius: 0 0 .9rem .9rem; z-index: 2;
}
.brutPhoneImg.sapMImg, .brutPhoneImg.sapMImg img { width: 100%; height: 100%; object-fit: cover; border-radius: 1.4rem; display: block; }
.brutContactSection { padding: var(--brut-pad-y) var(--brut-pad-x); border-top: 1px solid rgba(20, 22, 26, .12); }
.brutContactBox { border: 3px solid var(--brut-ink); border-radius: 6px; background: #fff; padding: 2rem; }
/* Footer */
.brutFooter { background: var(--brut-ink); padding: var(--brut-pad-y) var(--brut-pad-x) 1.5rem; }
.brutFooter .sapMTitle, .brutFooter .sapMText, .brutFooter .sapMLnk { color: #fff !important; }
.brutFooter .brutOverline.sapMText { color: var(--brut-green) !important; }
.brutFooterCol .sapMLnk { font-family: 'JetBrains Mono', monospace; font-size: .8rem; display: block; margin-bottom: .4rem; text-decoration: none !important; }
.brutFooterCol .sapMLnk:hover { text-decoration: underline !important; }
.brutFooterBottom { border-top: 1px solid #3a3d44; padding-top: 1.2rem; margin-top: 1rem; }
/* Entscheidungspamphlet — druckbare Ansicht (05.07.), siehe EntscheidungDruck.view.xml.
Bildschirm: zentriertes weißes "Dokument" auf grauem Hintergrund, mit sichtbarer Toolbar.
@media print: Toolbar weg, DIN-A4-Ränder, keine Schatten, keine abgeschnittenen Kacheln. */
.druckSeite { background: #f2f3f5; min-height: 100vh; }
.druckWrapper { align-items: center; padding: 1.5rem 1rem 3rem; }
.druckToolbar { width: 100%; max-width: 52rem; margin-bottom: 1rem; }
.druckDokument {
background: #fff; width: 100%; max-width: 52rem; padding: 2.5rem 3rem;
border: 1px solid var(--sapTile_BorderColor, #e5e5e5); border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.druckLogo { font-family: 'JetBrains Mono', monospace; font-weight: 700; letter-spacing: .08em; color: #fff; }
/* Markenband + Titelbild (05.07., "werbig statt trostlos") — farbiges Band oben (Inspectius-Blau,
dieselbe Farbe wie brutHighlight/brutBtnCheck auf der Landingpage) plus echtes Objektfoto als
Cover mit Adresse als Overlay, damit das Dokument wie ein bezahltes Produkt aussieht. */
.druckMarkenband { background: var(--brut-blue, #2f5fe0); padding: .9rem 1.5rem; border-radius: 12px 12px 0 0; margin: -2.5rem -3rem 1.5rem; }
.druckMarkenbandLabel { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: rgba(255,255,255,.85); text-transform: uppercase; }
.druckCoverBox { position: relative; border-radius: 10px; overflow: hidden; margin-bottom: 1.5rem; background: #eee; }
.druckCoverImg { width: 100%; height: 16rem; object-fit: cover; display: block; }
.druckCoverFallback { height: 16rem; color: var(--brut-gray, #6a6d70); background: #eee; }
.druckCoverOverlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem 1.5rem; background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0)); }
.druckCoverAdresse.sapMTitle { color: #fff !important; font-weight: 800; }
.druckCoverMeta.sapMText { color: rgba(255,255,255,.85) !important; font-size: .85rem; margin-top: .2rem; }
/* Score-Zeile: großer farbiger Kreis-Badge statt reinem schwarzem Text (Farbe je Score-Schwelle,
siehe scoreBadgeHtml in EntscheidungDruck.controller.js). */
.druckScoreRow, .druckFaktenRow { gap: .5rem; }
.druckScoreBox, .druckScoreBoxGross, .druckFaktenBox {
background: var(--sapTile_Background, #fff); border: 1px solid var(--sapTile_BorderColor, #e5e5e5);
border-radius: 12px; padding: 1rem 1.15rem; margin: .35rem; min-width: 8rem; flex: 1;
border-left: 4px solid var(--brut-blue, #2f5fe0);
}
.druckScoreBoxGross { flex: 1.4; }
.druckScoreKreis { width: 5.5rem; height: 5.5rem; border-radius: 50%; border: 3px solid; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; font-family: 'Space Grotesk', sans-serif; margin: 0 auto .4rem; }
.druckScoreLabel.sapMText { font-weight: 700; text-align: center; display: block; }
.druckScoreWort.sapMTitle { font-weight: 800; }
.druckFaktenBoxWeit { flex: 2; min-width: 16rem; }
.druckFaktenBox .sapMTitle { font-weight: 700; }
.druckOverline.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: var(--brut-blue, #2f5fe0) !important; text-transform: uppercase; }
.druckAbschnittTitel.sapMTitle { font-weight: 800; margin-top: .1rem; }
/* Kapitel-Kopf mit Icon-Badge (14.07., Nutzerwunsch "mehr design, logos icon, bilder etwas
hervorheben") — jeder Hauptabschnitt bekommt ein kleines farbiges Icon-Rondell links neben
Overline/Titel statt nur nacktem Text, gleiche Blau-/Rondell-Optik wie druckHeroGrade oben, nur
kompakter. druckKapitel triggert zusätzlich den Seitenumbruch (siehe @media print unten). */
.druckKapitelKopf { gap: .9rem; }
.druckKapitelIcon {
width: 2.75rem; height: 2.75rem; border-radius: 12px; flex-shrink: 0;
background: var(--brut-blue, #2f5fe0); color: #fff;
}
.druckListe.sapMList { border-top: 1px solid var(--sapTile_BorderColor, #e5e5e5); }
.druckListeInline.sapMList > .sapMListItems { display: flex; flex-wrap: wrap; gap: .4rem; }
.druckListeInline .sapMLIB { border: none; padding: 0; width: auto; }
.druckAusstattungTag { background: #eef1f7; color: #333; border-radius: 6px; padding: .25rem .6rem; font-size: .8rem; }
.druckMaengelThumb { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
/* Mängel-Titel neben Schweregrad-Badge (06.07.) — der ObjectStatus-Badge selbst braucht eine feste
Breite (siehe EntscheidungDruck.view.xml, dort in eine HBox mit width="5rem" gepackt), weil sein
UI5-generierter Flex-Wrapper sonst ohne CSS-Klasse ansprechbar auf wenige Pixel zusammenschrumpft
("mittel" wurde als "mitte" abgeschnitten dargestellt). Der Titel bekommt hier nur noch den Rest
des Platzes zugewiesen. */
.druckMaengelTitel { flex: 1 1 auto; min-width: 0; margin-right: .5rem; }
.druckFusszeile { border-top: 1px solid var(--sapTile_BorderColor, #e5e5e5); padding-top: 1rem; }
/* ===== Premium-Report-Redesign (06.07.) =====
Leitprinzipien: viel Weißraum, gedämpfte Neutraltöne, Rot/Grün NUR für echte Risiken/Stärken,
große Zahlen für die wichtigsten Kennwerte, maximal 3 Aufmerksamkeitsebenen pro Abschnitt. */
/* Executive-Hero: Kaufentscheidungs-Icon + Klartext + Executive-Assessment-Absatz + 5 große KPIs,
direkt unter dem Titelbild — der Leser soll nach 10 Sekunden die Kaufentscheidung verstanden haben,
ohne eine einzige Tabelle zu sehen. Mehr Weißraum/größere Schrift (06.07., Nutzerfeedback
"wahrgenommene Qualität steigt mit mehr Luft") statt kompaktem Kachel-Look. */
.druckHero { background: #fafafa; border: 1px solid #ececec; border-radius: 20px; padding: 2.5rem 2.75rem; margin: 2rem 0; }
.druckHeroTop { gap: 1.75rem; align-items: center; margin-top: .5rem; }
.druckHeroGrade {
width: 5.5rem; height: 5.5rem; border-radius: 20px; display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.druckHeroGrade--erfolg { background: #e3f5e9; color: #256f3a; }
.druckHeroGrade--warnung { background: #fbf0da; color: #92650f; }
.druckHeroGrade--risiko { background: #fbe4e1; color: #a3352a; }
.druckHeroGradeLabel.sapMTitle { font-weight: 800; font-size: 1.6rem; }
.druckHeroAssessmentLabel.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: #8a8d94; text-transform: uppercase; display: block; }
.druckHeroSummary.sapMText { color: #2a2a2a; margin-top: .5rem; font-size: 1.05rem; line-height: 1.6; }
.druckHeroDatenqualitaet.sapMText { color: #8a8d94; font-size: .82rem; margin-top: .35rem; }
.druckHeroKpiRow { gap: 0; border-top: 1px solid #e5e5e5; margin-top: 2rem; padding-top: 1.75rem; }
.druckHeroKpi { flex: 1; text-align: center; min-width: 8rem; margin-bottom: .5rem; }
/* 2.1rem -> 1.5rem (12.07., Bugfix) — bei 5 Kacheln/Reihe (~147px je Spalte, max-width:52rem deckelt
die Dokumentbreite auf jedem Bildschirm) brach "€ 894.716" bei 2.1rem mitten in der Ziffernfolge um.
Bei 1.5rem passt der Marktwert auf eine Zeile; nur die längste Spanne ("€ 8.670 – € 38.450") wrapt
noch, jetzt sauber zwischen den beiden Beträgen statt mitten in einer Zahl (NBSP-Fix siehe
Kostenschaetzung.js/Wertermittlung.js/WertBerechnung.js hält "€"+Zahl als Einheit zusammen). */
.druckHeroKpiZahl.sapMTitle { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 1.5rem; }
.druckHeroKpiZahlKlein.sapMTitle { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; }
.druckHeroKpiLabel.sapMText { color: #8a8d94; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; margin-top: .2rem; }
/* Wertindikation/Vollgutachten (06.07., Redesign-Propagierung) — einfacherer, zentrierter Hero
für die beiden anderen PDF-Stufen: ein einzelner großer Wert statt der 5-KPI-Reihe des
Entscheidungspamphlets, damit die schlankeren Dokumente nicht künstlich aufgebläht wirken. */
.druckHeroWertZahl.sapMTitle { font-family: 'Space Grotesk', sans-serif; font-weight: 800; font-size: 2.6rem; margin-top: .3rem; }
.druckHero--zentriert { text-align: center; align-items: center; }
/* Stärken & Risiken: zwei ruhige Spalten mit farbigem Punkt statt bunter Icons — Rot/Grün bewusst
nur hier, wo es sich um echte Stärken/Risiken handelt, nirgendwo sonst im Dokument dekorativ. */
.druckStaerkenRisikenRow { gap: 1.5rem; }
.druckStaerkenRisikenSpalte { flex: 1; }
.druckStaerkenRisikenTitel.sapMText { font-weight: 700; margin-bottom: .5rem; display: block; }
.druckPunktZeile { align-items: start; margin-bottom: .5rem; }
.druckPunkt { width: .55rem; height: .55rem; border-radius: 50%; margin-top: .4rem; flex-shrink: 0; }
.druckPunkt--staerke { background: #2b7d46; }
.druckPunkt--risiko { background: #c0392b; }
/* 5-Faktor-Scoring als horizontale Balken statt reiner Zahlenliste — der Blick erfasst die
Gewichtsverteilung sofort visuell, ohne jede Zeile einzeln lesen zu müssen. */
.druckBarZeile { margin-bottom: 1rem; }
.druckBarKopf { justify-content: space-between; margin-bottom: .3rem; }
.druckBarLabel.sapMText { font-weight: 600; }
.druckBarWert.sapMText { font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.druckBarTrack { height: .5rem; border-radius: 999px; background: #ececec; overflow: hidden; }
.druckBarFill { height: 100%; border-radius: 999px; }
.druckBarFill--erfolg { background: #2b7d46; }
.druckBarFill--warnung { background: #c98a12; }
.druckBarFill--risiko { background: #c0392b; }
.druckBarQuelle.sapMText { color: #8a8d94; font-size: .74rem; margin-top: .2rem; }
/* Gewerke-Summary (Ebene 2 der Mängel) — dieselbe Balken-Optik wie oben, Breite ∝ Anzahl Befunde. */
.druckGewerkeZeile { margin-bottom: .65rem; }
.druckGewerkeKopf { justify-content: space-between; margin-bottom: .25rem; }
.druckGewerkeLabel.sapMText { font-weight: 600; }
.druckGewerkeTrack { height: .4rem; border-radius: 999px; background: #ececec; overflow: hidden; }
.druckGewerkeFill { height: 100%; border-radius: 999px; background: var(--brut-blue, #2f5fe0); }
/* Top-5-kritischste-Befunde (Ebene 1 der Mängel) — moderne Karten statt Datenbankexport-Optik
(06.07., Nutzerfeedback): größeres Foto, Kategorie als Mono-Overline, Titel prominent, Maßnahme
als eigene, klar beschriftete Zeile statt Fließtext-Anhängsel. Die vollständige Liste bleibt
unverändert weiter unten erhalten (Ebene 3), nur nicht mehr die erste Ansicht. */
.druckTop5Card { border: 1px solid #ececec; border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: .75rem; align-items: center; gap: 1.1rem; }
/* Etwas größer + eigener Rahmen (14.07., Nutzerwunsch "Bilder etwas hervorheben") — vorher wirkten
die Top-5-Fotos neben viel Fließtext zu klein/beiläufig für die "5 wichtigsten Befunde". */
.druckTop5Thumb { width: 92px; height: 68px; object-fit: cover; border-radius: 10px; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.druckTop5Kategorie.sapMText { font-family: 'JetBrains Mono', monospace; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: #8a8d94; text-transform: uppercase; display: block; }
.druckTop5Titel.sapMTitle { font-weight: 700; font-size: 1.05rem; margin-top: .1rem; }
.druckTop5Massnahme.sapMText { color: #444; font-size: .85rem; margin-top: .35rem; }
/* Risiko-Badges: kompakte Ampel-Reihe statt sieben gleich großer Kacheln — Rot/Gelb/Grün nur, wo
der jeweilige Dienst tatsächlich ein Risiko/eine Unbedenklichkeit meldet (siehe severity-Klasse,
in EntscheidungDruck.controller.js gesetzt). */
.druckRisikoBadgeRow { gap: .6rem; }
.druckRisikoBadge { border-radius: 10px; padding: .6rem .85rem; flex: 1; min-width: 9rem; background: #f5f5f5; border-left: 3px solid #c4c4c4; }
.druckRisikoBadge--risiko { background: #fbe4e1; border-left-color: #c0392b; }
.druckRisikoBadge--warnung { background: #fbf0da; border-left-color: #c98a12; }
.druckRisikoBadge--ok { background: #e3f5e9; border-left-color: #2b7d46; }
.druckRisikoBadgeLabel.sapMText { color: #6a6d70; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
.druckRisikoBadgeWert.sapMText { font-weight: 700; margin-top: .1rem; }
@media print {
/* Kritischer Fix (06.07.): die 3 Druckseiten laufen technisch immer noch INNERHALB der normalen
App-Shell (ToolPage/NavContainer), auch wenn Sidebar/Header per chromeVisible ausgeblendet sind.
Diese Shell-Container haben für den Bildschirm eine feste Höhe + overflow:hidden (scrollbarer
Viewport) — beim Drucken schneiden Browser ALLES ab, was über diese feste Höhe hinausgeht, egal
wie lang das Dokument eigentlich ist. Ergebnis: nur der gerade sichtbare Bildschirmausschnitt
wurde gedruckt, der Rest (oft der Großteil des Dokuments) fiel komplett weg. Fix: beim Drucken
zwingen wir die gesamte Shell-Kette auf natürlichen Dokumentenfluss (height:auto, overflow:visible,
position:static), damit der komplette Inhalt fließt statt an der Bildschirmkante zu enden. */
html, body, .sapUiBody, .sapUiComponentContainer, .sapMNav,
.sapTntToolPage, .sapTntToolPageContentWrapper, .sapTntToolPageMain,
.sapTntToolPageMainContentWrapper, .sapTntToolPageMainContent, .sapUiView {
height: auto !important; min-height: 0 !important; overflow: visible !important; position: static !important;
}
.druckSeite { background: #fff; }
.druckWrapper { padding: 0; }
.druckToolbar { display: none !important; }
.druckDokument { box-shadow: none; border: none; max-width: 100%; padding: 0; }
.druckMarkenband { margin: 0 0 1.5rem; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.druckScoreRow, .druckFaktenRow { page-break-inside: avoid; }
.druckScoreBox, .druckScoreBoxGross, .druckFaktenBox { box-shadow: none; }
.druckCoverImg, .druckCoverOverlay, .druckScoreKreis { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.druckListe .sapMLIB { page-break-inside: avoid; }
.druckMaengelThumb { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.druckHero, .druckHeroGrade, .druckPunkt, .druckBarFill, .druckGewerkeFill, .druckRisikoBadge, .druckTop5Card, .druckTop5Thumb {
-webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.druckHero, .druckTop5Card, .druckRisikoBadge { page-break-inside: avoid; }
/* Kapitel-Trennung (14.07., Nutzerwunsch "trenne im PDF die Sektionen, jedes Kapitel fängt auf
einer neuen Seite an") — page-break-before (ältere Chromium-Druck-Engine) + break-before
(Standard) doppelt gesetzt für maximale Kompatibilität. Erstes Kapitel (Kaufentscheidung/Hero)
bekommt KEINEN Umbruch davor — das Titelbild/Markenband bilden bereits Seite 1. */
.druckKapitel { page-break-before: always; break-before: page; }
@page { margin: 1.5cm; }
}
.brutFooterBottom .sapMText { color: #8a8d94 !important; font-family: 'JetBrains Mono', monospace; font-size: .75rem; }
/* Besonnung/Pv-Kennzahlen-Grid (10.07.) — vorher als fest breite (200px) inspCard-Boxen mit
ObjectNumber gebaut: ObjectNumber ist für kurze numerische Badges gedacht und bricht NICHT um,
lange Texte (z.B. "1052.3 kWh/m² (PVGIS, live, Neigung 24°/Ausrichtung 175°)") liefen über den
Kartenrand hinaus und in die Nachbarkarte hinein. Jetzt: echtes CSS-Grid statt fixer Breiten
(gleichmäßige Spalten, kein Überlauf) und Text statt ObjectNumber (bricht normal um). */
.inspKpiGrid.sapMHBox { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
.inspKpiGrid .inspKpiTile.inspCard { margin: 0; width: auto; }
.inspKpiValue { font-size: 1.35rem; font-weight: 700; color: var(--sapContent_ForegroundTextColor, #1a2436); text-align: center; line-height: 1.25; display: block; margin-bottom: .15rem; }
.inspKpiValueSuccess { color: var(--sapPositiveColor, #1e8a3c); }
/* Übersicht-Redesign (17.07., Nutzerwunsch "oben 2-teilig, links Neues Objekt anlegen, rechts
Erste Schritte") — echtes CSS-Grid statt zweier fixbreiter VBoxen, damit es unter 900px sauber
auf eine Spalte fällt statt sich zu quetschen (gleiches Muster wie .inspKpiGrid oben). */
.inspUebersichtTop.sapMHBox { display: grid !important; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .inspUebersichtTop.sapMHBox { grid-template-columns: 1fr; } }
/* Erster-Schritt-Annotation (17.07.): echte visible-Property statt bedingter class-Bindung (siehe
ui5_class_binding_bug) — ein kleines Badge, das nur bei istErster=true erscheint. */
.inspErsterSchrittBadge { background: var(--sapPositiveBackgroundColor, #ecf9ee); color: var(--sapPositiveColor, #1e8a3c); border: 1px solid var(--sapPositiveBorderColor, #1e8a3c); border-radius: 6px; padding: .1rem .5rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
/* "NEU"-Badge (10.07.) — Standing Practice: jede neu hinzugefügte Datenquellen-Kategorie bekommt für
eine begrenzte Zeit (siehe DatenquellenKatalog.js#NEU_TAGE) dieses Badge neben Titel/Icon, zusätzlich
zum einmaligen Update-Popup auf der Landingpage (Landing.controller.js#_initDatenquellenUpdatePopup)
— die Kachel-Markierung bleibt sichtbar, auch wenn das Popup nie gesehen/schon weggeklickt wurde.
Eigene Farbe (Orange) statt des bestehenden Blau (.inspPlanBadge), das dort schon "Empfohlen" bedeutet. */
.inspNeuBadge {
display: inline-block; background: #e8871e; color: #fff; font-size: .62rem; font-weight: 700;
letter-spacing: .05em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px;
margin-left: .4rem; vertical-align: middle; line-height: 1.3;
}
/* Hero-Bild-Vollansicht (10.07., Nutzerfeedback "Bild im Hero ganz zeigen, mit Klick, plus Hinweis
auf den Klick") — siehe Landing.controller.js#onHeroImageClick/_buildHeroFullHtml/_renderHeroBboxReveal. */
.heroZoomHint {
position: absolute; bottom: .7rem; right: .7rem; z-index: 3; pointer-events: none;
background: rgba(20,22,26,.82); color: #fff; font-family: 'JetBrains Mono', monospace;
font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
padding: .4rem .8rem; border-radius: 999px;
}
/* Eigene Rahmenklasse statt .brutHeroPhotoFrame — dessen 16:10/-14%-Crop-Regel greift nur auf direkte
Kind-Divs VON .brutHeroPhotoFrame, hier bewusst nicht gewollt (volles, unbeschnittenes Bild). */
.heroFullFrame { width: 100%; border: 3px solid var(--brut-ink); border-radius: 8px; overflow: hidden; background: #000; }
.heroDialogBody { max-height: 75vh; overflow-y: auto; padding: 1.75rem; }
/* Kontaktformular (10.07., Nutzerfeedback "Speed-Dial rechts unten gefällt mir nicht, lieber ein
Kontaktformular") — vorher ein schwebender FAB + Dialog, jetzt ein inline sichtbares Formular direkt
in .brutContactBox (Landing.view.xml#contactSection). Styling unverändert aus dem früheren
Dialog-Formular übernommen (.brutKontaktBody-Labels, .brutInput, .brutKontaktSubmit), nur die
FAB-/Dialog-spezifischen Regeln (Kreis-Button, Puls-Animation, Dialog-Rahmen/-Header) sind entfallen,
da .brutContactBox bereits einen Rahmen im Seitenstil hat. */
.brutKontaktBody .sapMLabel { font-family: 'JetBrains Mono', monospace; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--brut-gray, #6a6d70); margin-top: .7rem; margin-bottom: .3rem; display: block; }
.brutKontaktBody .sapMLabel:first-child { margin-top: 0; }
.brutInput.sapMInputBase, .brutInput.sapMSlt {
border: 3px solid var(--brut-ink, #14161a) !important; border-radius: 4px !important; box-shadow: none !important; background: #fff !important;
}
.brutKontaktSubmit.sapMBtn {
width: 100%; margin-top: 1.1rem; background: var(--brut-blue, #2f5fe0) !important; border: 3px solid var(--brut-ink, #14161a) !important;
border-radius: 4px !important; box-shadow: 4px 4px 0 var(--brut-ink, #14161a) !important; font-family: 'JetBrains Mono', monospace;
font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .82rem; transition: transform .1s, box-shadow .1s;
color: #fff !important;
}
.brutKontaktSubmit.sapMBtn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--brut-ink, #14161a) !important; }
/* FAQ 2-Spalten-Grid (10.07., Nutzerfeedback "FAQ nimmt zu viel Platz ein") — CSS Grid direkt auf dem
von sap.m.List gerenderten , damit 9 Karten in 2 Spalten statt einer langen Kette stehen. Jede
Karte darf trotzdem unterschiedlich hoch sein (aufgeklappte Antwort) — CSS Grid erlaubt das nativ,
anders als z.B. eine feste Row-Height. Unter 900px zurück auf 1 Spalte (Karten sonst zu schmal für
die längeren Fragen/Antworten). */
.brutFaqList .sapMListUl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.brutFaqList .brutFaqCard { margin-bottom: 0; height: 100%; }
@media (max-width: 900px) {
.brutFaqList .sapMListUl { grid-template-columns: 1fr; }
}
/* Objektakte-Kachel-Übersicht (12.07., Vorhaben A) — dieselbe List→Grid-Technik wie .brutFaqList oben
(sap.m.List als Grid-Container statt einer scrollenden Zeilen-Liste). Look an die Druck-Ansichten
angelehnt (weißer Karten-Look, blaue Akzentleiste links, klare Typografie) statt Standard-UI5-
Kachel-Chrome — daher List+CustomListItem statt GenericTile, das feste Fiori-Innenlayouts erzwingt. */
.kachelBaukastenBar { padding: .5rem 0; }
.kachelListGrid.sapMList { background: transparent; }
.kachelListGrid .sapMListUl { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .9rem; }
.kachelCard.sapMLIB {
background: #fff; border: 1px solid #e5e5e5; border-left: 4px solid var(--brut-blue, #2f5fe0);
border-radius: 10px; padding: 0; margin: 0; box-shadow: 0 1px 4px rgba(0,0,0,.05); transition: box-shadow .15s, transform .15s;
}
.kachelCard.sapMLIB:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); transform: translateY(-1px); }
.kachelCard .kachelCardInner { padding: 1rem 1.1rem; width: 100%; }
.kachelIcon { font-size: 1.4rem; color: var(--brut-blue, #2f5fe0); margin-right: .85rem; flex-shrink: 0; }
.kachelTexte { min-width: 0; }
.kachelTitel.sapMText { font-weight: 700; font-size: .95rem; color: #14161a; display: block; }
.kachelUntertitel.sapMText { font-size: .78rem; color: #6a6d70; display: block; margin-top: .15rem; }
.kachelPdfBtn { flex-shrink: 0; }
@media (max-width: 700px) {
.kachelListGrid .sapMListUl { grid-template-columns: 1fr; }
}
/* Der Weg zur Empfehlung (13.07., Go-Live-Aufräumen) — 6-Schritte-Stepper auf dem Objekt-Dashboard:
dieselbe List→Flex-Technik wie kachelListGrid, Schritte nebeneinander statt untereinander. */
.wegStepperListe.sapMList { background: transparent; }
.wegStepperListe .sapMListUl { display: flex; flex-wrap: wrap; gap: 0; }
.wegStepperItem.sapMLIB { background: transparent; border: none; padding: 0; margin: 0; }
.wegStepperItem .inspCard { min-width: 11.5rem; }
@media (max-width: 700px) {
.wegStepperListe .sapMListUl { flex-direction: column; }
}
/* PDF-Baukasten (13.07., Vorhaben B Phase 2) — 2-Spalten-Layout: links Auswahl (nur Bildschirm),
rechts Druck-Vorschau in denselben druck*-Klassen wie die 3 festen Druckansichten. */
.baukastenLayout { gap: 1.5rem; align-items: flex-start; padding: 0 1rem; }
.baukastenAuswahlSpalte { flex: 0 0 24rem; max-width: 24rem; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1rem; position: sticky; top: 0; max-height: 90vh; overflow-y: auto; }
.baukastenVorschau { flex: 1 1 auto; min-width: 0; }
.baukastenKpiListe .sapMListUl { display: flex; flex-wrap: wrap; gap: .5rem; }
.baukastenKpiListe .sapMLIB { border: none; padding: 0; background: transparent; }
.baukastenBlockListe .sapMLIB { border: none; padding: 0; }
@media print {
/* Nur die Vorschau drucken — Auswahl-Spalte, Toolbar und Ladeindikator verschwinden. */
.baukastenAuswahl { display: none !important; }
.baukastenLayout { padding: 0; }
.baukastenVorschau { width: 100%; }
}
/* Objektakte-Kapitelbalken (06.08., Muster-Kalibrierung Schritt 0) — grüner Sektionsbalken nach
dem gesichteten Spectora-Muster, re-theme-Grün; im Druck beginnt jedes Kapitel eine neue Seite
(Memory-Regel Seitenumbruch je Kapitel). */
.druckKapitelBalken.sapMTitle {
background: #087a59; color: #fff; font-weight: 800;
padding: .45rem .85rem; border-radius: 4px; width: 100%; box-sizing: border-box;
margin-top: .6rem;
}
@media print {
.druckKapitelSeite { page-break-before: always; break-before: page; }
}
/* Seiten-Erklärung + FAQ-Link (13.07.) — schmale Hinweis-Leiste der App-Shell über jeder
Objektakten-Seite, Inhalt aus SeitenHilfe.js. */
.inspSeitenHilfe { background: #eef4ff; border-bottom: 1px solid #d5e3ff; padding: .35rem 1rem; }
.inspSeitenHilfe .sapMText { font-size: .82rem; color: #33445f; }
.inspSeitenHilfeText { min-width: 0; }
/* Social-Symbole im Footer (26.07.2026). Inline-SVG im View ueber core:HTML —
keine zusaetzliche Anfrage, faerbt sich ueber currentColor mit. Offizielle
Markenpfade (simple-icons, CC0). */
.brutSocial { display: flex; gap: .55rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.brutSocial a { display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
color: rgba(255,255,255,.6); text-decoration: none;
transition: color .15s, border-color .15s, background .15s; }
.brutSocial a:hover { color: #14161a; background: var(--brut-green); border-color: var(--brut-green); }
.brutSocial a svg { width: 17px; height: 17px; fill: currentColor; display: block; }
/* Befund-Fotos im Objektakte-Befundkapitel (06.08., Spectora-Muster) — feste Thumb-Breite,
abgerundet, druckfest. */
.druckBefundThumb { border-radius: 6px; object-fit: cover; max-height: 5rem; }
/* Zustand-Kopf (07.08.): KPI-Grid über die volle Breite — vier Kacheln nebeneinander statt
senkrecht gestapelt (das SpaceBetween-Elternlayout quetschte das auto-fit-Grid zu schmal). */
.inspKpiGridVoll.sapMHBox { width: 100%; }
/* REDESIGN: Übersicht-Dashboard (09.08.) — bessere visuelle Darstellung von "Erste Schritte" und "Tipps & Hintergrund" */
/* Heading mit Gradient-Icon */
.inspHeadingGradient { background: linear-gradient(135deg, #0070f2, #7c4dff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
/* Onboarding-Panels: Redesign mit besserer visueller Hierarchie */
.inspOnboardingPanelRedesigned.sapMPanel,
.inspTippsPanelRedesigned.sapMPanel {
border: 1px solid #e0e0e0;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.inspOnboardingPanelRedesigned.sapMPanel:hover,
.inspTippsPanelRedesigned.sapMPanel:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
/* Progress-Sektion */
.inspProgressSection {
background: #f5f7fa;
padding: 1rem;
border-radius: 6px;
border-left: 4px solid #0070f2;
}
.inspProgressBar { min-width: 200px; }
/* Schritte-Layout */
.inspSchrittHeader {
padding: 0.75rem;
background: #fafbfc;
border-radius: 6px;
border: 1px solid #e8e8e8;
transition: all 0.2s ease;
}
.inspSchrittOffen .inspSchrittHeader {
background: #fff;
border-color: #d0d0d0;
}
.inspSchrittOffen .inspSchrittHeader:hover {
border-color: #0070f2;
box-shadow: 0 2px 6px rgba(0,112,242,0.1);
}
.inspSchrittErledigt .inspSchrittHeader {
background: #f0f8f4;
border-color: #a8d5ba;
opacity: 0.7;
}
.inspSchrittNumber {
background: linear-gradient(135deg, #0070f2, #7c4dff);
color: #fff;
border-radius: 50%;
min-width: 2.5rem;
height: 2.5rem;
font-weight: 700;
font-size: 1.2rem;
}
.inspSchrittIcon {
font-size: 1.5rem;
font-weight: bold;
}
.inspSchrittTitel {
color: #0a1930 !important;
font-weight: 600;
}
.inspSchrittText {
color: #666 !important;
font-size: 0.9rem;
}
.inspSchrittAbleitbar {
background: #e8f4fc;
border-left: 3px solid #0070f2;
padding: 0.5rem 0.75rem;
border-radius: 4px;
margin-left: 3.5rem;
}
.inspSchrittHinweis {
color: #0070f2;
font-weight: 500;
font-size: 0.85rem;
}
/* Tipps-Karten-Grid */
.inspTippsContainer {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: stretch;
}
.inspTippsGrid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
}
.inspTippCard {
flex: 1 1 calc(50% - 0.5rem);
min-width: 280px;
border-radius: 8px;
border: 2px solid #e0e0e0;
transition: all 0.25s ease;
cursor: pointer;
}
.inspTippCardInner {
padding: 1.25rem;
}
.inspTippCardOpen {
background: #fff;
border-color: #e0e0e0;
}
.inspTippCardOpen:hover {
border-color: #0070f2;
box-shadow: 0 4px 12px rgba(0,112,242,0.15);
transform: translateY(-2px);
}
.inspTippCardDone {
background: #f0f8f4;
border-color: #a8d5ba;
opacity: 0.75;
}
.inspTippCardDone:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.inspTippHeader {
align-items: center;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(0,112,242,0.1);
}
.inspTippIcon {
font-size: 1.5rem;
font-weight: bold;
color: #0070f2;
min-width: 1.5rem;
}
.inspTippCardDone .inspTippIcon {
color: #087a59;
}
.inspTippTitel {
color: #0a1930 !important;
font-weight: 600;
}
.inspTippText {
color: #555 !important;
font-size: 0.9rem;
line-height: 1.5;
}
/* Responsive: auf mobil 1 Spalte statt 2 */
@media (max-width: 768px) {
.inspTippCard {
flex: 1 1 100%;
}
}
/* Lazy-Loading Animation */
img[data-lazy-image] {
opacity: 0;
transition: opacity 0.3s ease-in;
}
img.lazy-loaded {
opacity: 1;
}
/* Skeleton Loading */
[data-lazy-image]:not(.lazy-loaded) {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}