/* ==========================================================================
module-medvs.css – Ergänzungen zu medvs.css (Optik der bisherigen Website)
für Inhalte, die jetzt aus dem CMS kommen.
Der HTML-Filter des CMS lässt keine style-Attribute und keine SVGs zu.
Die bisherigen Inline-Styles der Seiten sind deshalb Hilfsklassen (mvs-…),
die Häkchen der Checklisten kommen aus CSS. !important ersetzt die
Rangfolge, die ein Inline-Style hatte.
========================================================================== */
/* --- Variablen der CMS-Bausteine (module.css), die medvs.css nicht kennt ----- */
:root {
--line: var(--border);
--max: 1320px;
}
/* --- Hilfsklassen (bisherige Inline-Styles) ------------------------------- */
.mvs-c-mid { color: var(--mid) !important; }
.mvs-c-steel { color: var(--steel-l) !important; }
.mvs-c-weiss { color: #fff !important; }
.mvs-fs-85 { font-size: .85rem !important; }
.mvs-fs-88 { font-size: .88rem !important; }
.mvs-fs-90 { font-size: .9rem !important; }
.mvs-fs-92 { font-size: .92rem !important; }
.mvs-fs-95 { font-size: .95rem !important; }
.mvs-fs-130 { font-size: 1.3rem !important; }
.mvs-fw-600 { font-weight: 600 !important; }
.mvs-mb-05 { margin-bottom: .5rem !important; }
.mvs-mb-1 { margin-bottom: 1rem !important; }
.mvs-mt-0 { margin-top: 0 !important; }
.mvs-mt-075 { margin-top: .75rem !important; }
.mvs-m-1-0-05 { margin: 1rem 0 .5rem !important; }
.mvs-pl-11 { padding-left: 1.1rem !important; }
.mvs-pl-12 { padding-left: 1.2rem !important; }
.mvs-pt-0 { padding-top: 0 !important; }
.mvs-tt-none { text-transform: none !important; }
.mvs-cols-1 { grid-template-columns: 1fr !important; }
.mvs-cols-2 { grid-template-columns: repeat(2, 1fr) !important; }
.mvs-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
.mvs-bg-dark60 { background: var(--dark-60) !important; }
.mvs-bc-steel { border-color: var(--steel) !important; }
.mvs-mw-72ch { max-width: 72ch !important; }
.mvs-ml-auto { margin-left: auto !important; }
.mvs-mr-auto { margin-right: auto !important; }
/* --- Checklisten: Häkchen wie bisher (SVG polyline 20 6 9 17 4 12) -------- */
.feature-checklist li::before {
content: "";
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-top: .2rem;
background-color: var(--accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* --- Bildkopf: Zurück-Link aus dem CMS-Abschnitt "Hero-Text" -------------- */
.hero-content .hero-back { display: contents; }
.hero-content .hero-back .archive-back::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Fehlerseite der Tipps (bisher style="padding-top:calc(var(--section-gap) + 2rem)") */
.mvs-pt-404 { padding-top: calc(var(--section-gap) + 2rem) !important; }
/* Tipps: lange Pfade/Befehle umbrechen, breite Tabellen und Codeblöcke innerhalb des Artikels scrollen (sonst bei 390 px zu breit) */
.tipp-body { overflow-wrap: anywhere; }
.tipp-body img { max-width: 100%; height: auto; }
.tipp-body table { display: block; max-width: 100%; overflow-x: auto; }
.tipp-body pre { max-width: 100%; overflow-x: auto; }
.tipp-body pre code { overflow-wrap: normal; }
.tipp-card h3 { overflow-wrap: anywhere; }
.mvs-mw-640 { max-width: 640px !important; }
.mvs-badge-mitte { margin: 0 auto 1rem !important; }
.mvs-honeypot { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.mvs-alert { border-radius: var(--radius-lg); }
/* Handy: g-5 (3rem Spaltenabstand) ist breiter als der Containerrand, und die bisher per Inline-Style fest
zwei-/dreispaltigen Raster (Info-Seiten) passen nicht -> waagerechtes Scrollen (schon auf der bisherigen Website). */
@media (max-width: 767.98px) {
.row.g-5 { --bs-gutter-x: 1.5rem; }
.mvs-cols-2, .mvs-cols-3 { grid-template-columns: 1fr !important; }
}
/* --- Shop (bisher Inline-Styles) ----------------------------------------- */
.mvs-fs-105 { font-size: 1.05rem !important; }
.mvs-fs-110 { font-size: 1.1rem !important; }
.mvs-mw-600 { max-width: 600px !important; }
.mvs-noimg-gross { aspect-ratio: 1; border-radius: var(--radius-lg); }
.mvs-btn-entfernen { background: #fdeaea; color: #b3261e; }
.mvs-summe-trenner { border-top: 1px solid var(--border); padding-top: 1rem; }
.mvs-danke { padding-top: calc(var(--section-gap) + 3rem) !important; padding-bottom: 5rem !important; }
.mvs-danke__icon { width: 64px; height: 64px; background: #e3f6e8; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.mvs-zurueck::before { content: "←"; margin-right: .35rem; }
.cart-table a { color: var(--accent); }
/* --- Startseite: Bilder der Leistungskarten (![]()
im Karten-HTML, Admin → Startseite).
Nur Platzierung hinter Badge und Icon; ohne Bild bleibt der bisherige Farbverlauf. ------------------------- */
.service-card__icon .service-card__bild {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform .45s ease;
}
.service-card__icon:has(.service-card__bild)::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, rgba(15,21,48,.35) 0%, rgba(15,21,48,.15) 45%, rgba(15,21,48,.45) 100%);
}
.service-card:hover .service-card__bild { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .service-card__bild { transition: none; } .service-card:hover .service-card__bild { transform: none; } }
/* ICONS-START – erzeugt aus den Inline-SVGs der bisherigen Startseite (medvs_start_umwandeln.py) */
.mvs-icon { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; vertical-align: middle; background-color: currentColor;
-webkit-mask: var(--mvs-i) center / contain no-repeat; mask: var(--mvs-i) center / contain no-repeat; }
.service-card__icon .mvs-icon { position: relative; z-index: 2; }
.mvs-s16 { width: 16px; height: 16px; }
.mvs-s22 { width: 22px; height: 22px; }
.mvs-s44 { width: 44px; height: 44px; }
.mvs-i-flexibel { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }
.mvs-i-individuell { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.4 16.6L4.8 12l4.6-4.6M14.6 7.4l4.6 4.6-4.6 4.6'/%3E%3C/svg%3E"); }
.mvs-i-integriert { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a6.5 6.5 0 0113 0'/%3E%3C/svg%3E"); }
.mvs-i-kreativ { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3C/svg%3E"); }
.mvs-i-monitor { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }
.mvs-i-pfeil { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E"); }
.mvs-i-planbar { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
.mvs-i-schild { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.mvs-i-sicher { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E"); }
.mvs-i-zahnrad { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06A1.65 1.65 0 004.6 15a1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06A1.65 1.65 0 009 4.6a1.65 1.65 0 001-1.51V3a2 2 0 114 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z'/%3E%3C/svg%3E"); }
.mvs-i-zukunft { --mvs-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a4 4 0 014 4c0 1.5-.8 2.8-2 3.5v1.5h3a3 3 0 013 3v3a3 3 0 01-3 3H7a3 3 0 01-3-3v-3a3 3 0 013-3h3v-1.5C8.8 8.8 8 7.5 8 6a4 4 0 014-4z'/%3E%3Ccircle cx='9' cy='15' r='0.5' fill='%23000'/%3E%3Ccircle cx='15' cy='15' r='0.5' fill='%23000'/%3E%3C/svg%3E"); }
/* ICONS-ENDE */
/* --- Startseite „Installation & Einrichtung“: neue Fotos (media/startseite/installation/) füllen auch die 3. Karte;
medvs.css zeigt dort wegen des früheren Lexware-Logos sonst ein verkleinertes Bild auf Weiß. ---------------- */
.install-card:nth-child(3) .install-card__icon:has(img[src*="/startseite/installation/"]) { background: #f3f5f8; }
.install-card:nth-child(3) .install-card__icon:has(img[src*="/startseite/installation/"])::after { display: block; }
.install-card:nth-child(3) .install-card__icon img[src*="/startseite/installation/"] { object-fit: cover; padding: 0; }
/* --- Hinweis „KI-generiertes Bild“ auf Kartenbildern ( im Karten-HTML), Optik wie im Hero ---- */
.ki-bild-hinweis {
position: absolute; right: .6rem; bottom: .6rem; z-index: 3;
display: inline-block; padding: .25rem .5rem;
color: #fff; background: rgba(10, 14, 33, .8);
border: 1px solid rgba(255, 255, 255, .25); border-radius: .3rem;
font-size: .7rem; line-height: 1.2; pointer-events: none;
}