/* ⚠ KORREKTUR gegenueber der gelieferten Fassung (Claude Code, 02.09.2026) ".mvr-namenszug img" hat die Spezifitaet (0,1,1) und ueberstimmt damit ".mvr-zeichen" (0,1,0). Das Zeichen wurde dadurch auf 20 px Hoehe gezwungen (Telefon 14 px) statt auf die vorgegebenen 100x83 bzw. 72x60 — gemessen 17x14 px. Behoben mit :not(.mvr-zeichen) an 3 Stellen. Die gelieferte Fassung liegt daneben als mvr.css.geliefert. */ /* ========================================================================= mvr.css — Template mvrhamburg, Joomla 6.1.3 Die EINZIGE Quelle der Wahrheit für Maße und Farben. Entwurf A „Perspektive“, Stand 01.09.2026. Kein Aufruf fremder Server. Kein prefers-color-scheme (siehe 30-NICHT-GEBAUT). ========================================================================= */ /* --- Schrift, lokal ------------------------------------------------------ */ @font-face { font-family:"Source Serif 4"; src:url(../fonts/SourceSerif4-Regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Source Sans 3"; src:url(../fonts/SourceSans3-Regular.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; } /* ⚠ Source Sans 3 ist eine variable Schrift: Googles Latin-Ausschnitt fuer 400 und 700 ist byteweise DIESELBE Datei. Deshalb zeigt auch der fette Schnitt auf SourceSans3-Regular.woff2 — eine eigene Bold-Datei gibt es nicht, der Verweis darauf lief ins Leere (HTTP 404), und fetter Text fiel auf die Ersatzschrift zurueck. Spart nebenbei 28 kB. */ @font-face { font-family:"Source Sans 3"; src:url(../fonts/SourceSans3-Regular.woff2) format("woff2"); font-weight:700; font-style:normal; font-display:swap; } @font-face { font-family:"Source Sans 3"; src:url(../fonts/SourceSans3-It.woff2) format("woff2"); font-weight:400; font-style:italic; font-display:swap; } /* --- Farben als Rollen -------------------------------------------------- */ :root { --mvr-grund:#FFFFFF; --mvr-grund-sand:#FBEAD4; --mvr-text:#324958; --mvr-text-stark:#1D3849; --mvr-text-leise:#475F6F; --mvr-akzent:#725229; --mvr-flaeche-dunkel:#1D3849; --mvr-flaeche-dunkel-2:#324958; --mvr-schrift-auf-dunkel:#FBEAD4; --mvr-schrift-auf-dunkel-2:#D0B798; --mvr-linie:#D0B798; --mvr-linie-leise:#FBEAD4; --mvr-linie-dunkel:#475F6F; --mvr-zier:#AD906B; --mvr-knopf:#1D3849; --mvr-knopf-text:#FBEAD4; --mvr-knopf-hell:#FBEAD4; --mvr-knopf-hell-text:#1D3849; --mvr-feldrahmen:#8997A1; --mvr-blau-hell:#B3C4CF; /* Füllung der Kreispunkte, gleicher Farbton aufgehellt */ --mvr-inhalt:1120px; --mvr-rand:160px; --mvr-serif:"Source Serif 4",Georgia,serif; --mvr-sans:"Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif; } /* ── Schriftgrößen ────────────────────────────────────────────────── * * ERZEUGT von scripts/schriftgroessen.py — die Werte sind die, die vor * der Umstellung fest in den Regeln standen. Am Aussehen ändert sich * dadurch nichts. * * ⚠ Nur außerhalb der Medienabfragen. Auf dem Telefon behalten die * Bauteile ihre eigenen, kleineren Werte — siehe das Skript. */ :root { --mvr-gross: 62px; /* Große Überschrift */ --mvr-mittel: 30px; /* Zwischenüberschrift */ --mvr-bedien: 17px; /* Menü und Knöpfe */ --mvr-lesen: 16px; /* Fließtext */ --mvr-klein: 13px; /* Nebentext */ } /* ── Schrift je Bauteil ───────────────────────────────────────────── * * ERZEUGT von scripts/bauteilschriften.py. * * Jedes Bauteil hat eine eigene Schrift. Vorgabe ist die Grundschrift, * die es bisher benutzt hat — am Aussehen ändert sich dadurch nichts. * * ⚠ Wer die Grundschrift ändert, ändert alle Bauteile mit, die noch * auf ihr stehen. Wer ein einzelnes Bauteil umstellt, löst es aus * dieser Bindung. */ :root { --mvr-gross-schrift: var(--mvr-serif); --mvr-mittel-schrift: var(--mvr-serif); --mvr-bedien-schrift: var(--mvr-sans); --mvr-lesen-schrift: var(--mvr-sans); --mvr-klein-schrift: var(--mvr-sans); } /* --- Grundlagen --------------------------------------------------------- */ *,*::before,*::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; } img,svg { max-width:100%; } :focus-visible { outline:2px solid var(--mvr-akzent); outline-offset:2px; } /* Alles Anklickbare kommt dem Zeiger leicht entgegen: 2 px Anhebung in 160 ms. Wer Bewegung reduziert haben möchte, bekommt nur den Farbwechsel (siehe unten). */ a, button, summary, .mvr-knopf, .mvr-liste-kachel, .mvr-akkordeon-balken, .mvr-nav-link, .mvr-verweis, .mvr-toc-link { transition:transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease; } a:hover, button:hover, summary:hover, .mvr-knopf:hover, .mvr-liste-kachel:hover, .mvr-akkordeon-balken:hover, .mvr-nav-link:hover, .mvr-verweis:hover, .mvr-toc-link:hover { transform:translateY(-2px); } /* Nicht bei den Eingabefeldern und nicht bei der Einwilligung — dort wäre es Unruhe. */ .mvr-eingabe:hover, .mvr-einwilligung:hover { transform:none; } @media (prefers-reduced-motion:reduce) { a, button, summary, .mvr-knopf, .mvr-liste-kachel, .mvr-akkordeon-balken, .mvr-nav-link, .mvr-verweis, .mvr-toc-link { transition:none; } a:hover, button:hover, summary:hover, .mvr-knopf:hover, .mvr-liste-kachel:hover, .mvr-akkordeon-balken:hover, .mvr-nav-link:hover, .mvr-verweis:hover, .mvr-toc-link:hover { transform:none; } } a { color:var(--mvr-akzent); text-decoration:underline; text-underline-offset:2px; } a:hover { color:var(--mvr-text-stark); } .mvr-sprunglink { position:absolute; left:-9999px; top:0; z-index:99; background:var(--mvr-grund-sand); color:var(--mvr-text-stark); padding:14px 20px; font:400 var(--mvr-lesen)/1 var(--mvr-lesen-schrift); } .mvr-sprunglink:focus { left:0; } .mvr-nur-vorlesen { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .mvr-seite { font:400 18px/1.68 var(--mvr-lesen-schrift); color:var(--mvr-text); background:var(--mvr-grund); overflow-x:hidden; } .mvr-inhalt { max-width:var(--mvr-inhalt); margin:0 auto; padding-inline:0; } /* --- Kopfleiste --------------------------------------------------------- */ .mvr-kopfleiste { height:112px; background:var(--mvr-flaeche-dunkel); display:flex; align-items:center; justify-content:space-between; gap:24px; padding-inline:var(--mvr-rand); } .mvr-zeichen { width:100px; height:83px; flex:none; display:block; } .mvr-namenszug { display:flex; align-items:center; gap:20px; } .mvr-namenszug img:not(.mvr-zeichen) { height:20px; width:auto; display:block; } .mvr-hauptnav { display:flex; gap:28px; align-items:center; } .mvr-nav-link { font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--mvr-schrift-auf-dunkel-2); text-decoration:none; } .mvr-nav-link:hover,.mvr-nav-link:focus-visible { color:var(--mvr-schrift-auf-dunkel); text-decoration:underline; } /* Die Klapptaste steht in JEDER Breite — auf dem Bildschirm mit dem Wort „Menü“ neben den drei Strichen, damit niemand die Navigation suchen muss. */ .mvr-klapptaste { display:flex; align-items:center; gap:12px; border:0; background:none; padding:0 0 0 28px; border-left:1px solid var(--mvr-linie-dunkel); color:var(--mvr-schrift-auf-dunkel-2); font:400 var(--mvr-klein)/1 var(--mvr-klein-schrift); letter-spacing:.14em; text-transform:uppercase; cursor:pointer; } .mvr-klapptaste-striche { width:44px; height:44px; flex:none; display:flex; flex-direction:column; justify-content:center; gap:6px; } .mvr-klapptaste-striche span { display:block; height:2px; background:var(--mvr-schrift-auf-dunkel-2); } .mvr-klapptaste:hover { color:var(--mvr-schrift-auf-dunkel); } .mvr-klapptaste:hover .mvr-klapptaste-striche span { background:var(--mvr-schrift-auf-dunkel); } .mvr-klappnav { display:none; background:var(--mvr-flaeche-dunkel-2); } .mvr-klappnav[data-offen] { display:block; } .mvr-klappnav a { display:flex; align-items:center; min-height:56px; padding-inline:20px; color:var(--mvr-schrift-auf-dunkel); text-decoration:none; font-size:var(--mvr-bedien); border-bottom:1px solid var(--mvr-linie-dunkel); } /* Zwischentitel in der Klappnavigation („Geschützter Bereich“, „Website“) */ .mvr-klappnav-titel { padding:16px 20px 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mvr-schrift-auf-dunkel-2); } /* Angemeldet: Name als erste Zeile der Klappnavigation, Punkt auf der Klapptaste */ .mvr-klappnav-benutzer { display:flex; align-items:center; gap:12px; min-height:64px; padding:12px 20px; border-bottom:1px solid var(--mvr-linie-dunkel); } .mvr-klapptaste { position:relative; } .mvr-klapptaste[data-angemeldet]::after { content:""; position:absolute; top:2px; right:2px; width:9px; height:9px; border-radius:50%; background:var(--mvr-schrift-auf-dunkel); } .mvr-benutzer { display:flex; align-items:center; gap:10px; padding-left:24px; border-left:1px solid var(--mvr-linie-dunkel); color:var(--mvr-schrift-auf-dunkel-2); font-size:15px; } .mvr-benutzer-kuerzel { width:26px; height:26px; border-radius:50%; background:var(--mvr-linie-dunkel); color:var(--mvr-schrift-auf-dunkel); display:flex; align-items:center; justify-content:center; font-size:12px; } .mvr-geschuetzt-nav { height:44px; background:var(--mvr-flaeche-dunkel-2); display:flex; align-items:center; gap:28px; padding-inline:var(--mvr-rand); font-size:14px; color:var(--mvr-schrift-auf-dunkel); } /* --- Bühne -------------------------------------------------------------- */ .mvr-buehne { background:var(--mvr-flaeche-dunkel); padding:88px var(--mvr-rand) 96px; display:grid; grid-template-columns:1fr 420px; gap:80px; align-items:center; } .mvr-buehne-titel { margin:0 0 32px; font:400 var(--mvr-gross)/1.08 var(--mvr-gross-schrift); color:var(--mvr-schrift-auf-dunkel); text-wrap:pretty; } .mvr-buehne-fuchs { width:420px; height:420px; border-radius:50%; object-fit:cover; display:block; } .mvr-zierstrich { width:72px; height:2px; background:var(--mvr-zier); margin-bottom:32px; } /* --- Knöpfe ------------------------------------------------------------- */ .mvr-knopf { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:16px 32px; background:var(--mvr-knopf); color:var(--mvr-knopf-text); border:0; font:400 var(--mvr-bedien)/1 var(--mvr-bedien-schrift); letter-spacing:.06em; text-decoration:none; cursor:pointer; } .mvr-knopf:hover { background:var(--mvr-flaeche-dunkel-2); color:var(--mvr-knopf-text); } .mvr-knopf--rand { background:none; border:1px solid var(--mvr-linie); color:var(--mvr-schrift-auf-dunkel); } .mvr-knopf--rand:hover { background:var(--mvr-linie); color:var(--mvr-text-stark); } .mvr-knopf--hell { background:var(--mvr-knopf-hell); color:var(--mvr-knopf-hell-text); } .mvr-knopf--hell:hover { background:var(--mvr-schrift-auf-dunkel-2); color:var(--mvr-knopf-hell-text); } .mvr-knopf--voll { display:flex; width:100%; } /* --- Abschnitte --------------------------------------------------------- */ .mvr-abschnitt { padding:96px var(--mvr-rand); } .mvr-abschnitt--sand { background:var(--mvr-grund-sand); padding-top:88px; } .mvr-abschnitt--dunkel { background:var(--mvr-flaeche-dunkel); color:var(--mvr-schrift-auf-dunkel); } .mvr-augenbraue { font-size:var(--mvr-klein); letter-spacing:.16em; text-transform:uppercase; color:var(--mvr-akzent); margin-bottom:36px; } .mvr-dreisatz { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; } .mvr-fliesstext { margin:0 0 16px; font-size:18px; line-height:1.68; max-width:68ch; text-wrap:pretty; } /* --- Fuchs-Folge -------------------------------------------------------- */ /* Fünf Spalten: drei Stufen, dazwischen zwei Pfeilspalten. Der Pfeil steht also NUR zwischen den Stufen — nach der dritten kommt keiner, dort endet die Aussage. Reihenweises Raster (Bilder in Reihe 1, Unterschriften in Reihe 2), damit die Unterschriften auf einer Linie beginnen, auch bei ungleicher Länge. */ .mvr-folge { display:grid; grid-template-columns:1fr 56px 1fr 56px 1fr; column-gap:24px; row-gap:24px; align-items:start; } /* Blockpfeil als SVG im Markup (Schaft + Spitze, eine Fläche in --mvr-akzent). Kein Textzeichen mehr: die Form ist in jeder Schrift gleich und lässt sich für das Telefon einfach um 90° gedreht ausliefern. quer: viewBox="0 0 56 28" path="M0 9 H32 V1 L56 14 L32 27 V19 H0 Z" abwärts: viewBox="0 0 28 56" path="M9 0 H19 V32 H27 L14 56 L1 32 H9 Z" */ .mvr-folge-pfeil { align-self:start; width:48px; height:auto; display:block; margin:8px auto 0; } .mvr-folge-pfeil path { fill:var(--mvr-akzent); } .mvr-folge-bild { width:100%; aspect-ratio:1; border-radius:50%; object-fit:cover; display:block; } /* Der Text sitzt IM Pfeil: ein dunkles Band, rechts zur Spitze beschnitten. Reines CSS, keine Grafik — der Text bleibt Text, markierbar und durchsuchbar. Browser ohne clip-path zeigen ein rechteckiges Band; das ist unschädlich. */ .mvr-folge-text { font:400 23px/1.4 var(--mvr-mittel-schrift); color:var(--mvr-text-stark); text-wrap:pretty; } .mvr-folge-text { font:400 23px/1.4 var(--mvr-mittel-schrift); color:var(--mvr-text-stark); } /* --- Drei Karten -------------------------------------------------------- */ .mvr-karten { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; } .mvr-karte { border:1px solid var(--mvr-linie); padding:36px 32px 40px; display:flex; flex-direction:column; gap:24px; } .mvr-karte-titel { margin:0; font:400 var(--mvr-mittel)/1.25 var(--mvr-mittel-schrift); color:var(--mvr-text-stark); } .mvr-karte-grafik { width:100%; height:auto; display:block; } .mvr-karte-text { margin:0; font-size:var(--mvr-bedien); line-height:1.6; } /* --- Die 93 Leistungen -------------------------------------------------- */ .mvr-leistungen { padding:0 var(--mvr-rand) 96px; } .mvr-leistungen-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:40px; border-top:1px solid var(--mvr-linie); padding-top:40px; margin-bottom:36px; } .mvr-leistungen-kopf h2 { margin:0; font:400 38px/1.2 var(--mvr-mittel-schrift); color:var(--mvr-text-stark); } .mvr-leistungen-zahlen { font-size:15px; color:var(--mvr-text-leise); } .mvr-akkordeon { display:flex; flex-direction:column; gap:10px; } .mvr-akkordeon-balken { min-height:68px; background:var(--mvr-flaeche-dunkel); color:var(--mvr-schrift-auf-dunkel); padding:22px 28px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; list-style:none; } .mvr-akkordeon-balken::-webkit-details-marker { display:none; } .mvr-akkordeon-balken:hover { background:var(--mvr-flaeche-dunkel-2); } .mvr-akkordeon-nr { width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--mvr-linie-dunkel); font-size:14px; color:var(--mvr-schrift-auf-dunkel-2); margin-right:18px; } .mvr-akkordeon-titel { font-size:21px; line-height:1.3; } .mvr-akkordeon-anzahl { font-size:14px; letter-spacing:.08em; color:var(--mvr-schrift-auf-dunkel-2); } .mvr-akkordeon-zeichen { width:16px; text-align:center; font-size:20px; color:var(--mvr-schrift-auf-dunkel-2); } .mvr-akkordeon-zeichen::after { content:"+"; } details[open] .mvr-akkordeon-zeichen::after { content:"\2013"; } .mvr-akkordeon-fach { border:1px solid var(--mvr-linie); border-top:0; padding:32px 28px 36px; } .mvr-akkordeon-hinweis { font-size:14px; font-style:italic; color:var(--mvr-akzent); margin-bottom:24px; } .mvr-liste { column-count:2; column-gap:56px; margin:0; padding:0; list-style:none; } .mvr-liste-zeile { break-inside:avoid; padding:9px 0; display:flex; gap:10px; align-items:baseline; font-size:var(--mvr-lesen); line-height:1.45; } /* Führungslinie: schließt die Zeile bis zum Spaltenrand ab. Leeres im Markup. */ .mvr-liste-linie { flex:1; min-width:24px; border-bottom:1px dotted var(--mvr-zier); transform:translateY(-5px); } /* Zeilenabschluss: Kacheln mit den Nummern der anderen Kategorien. Dieselbe Form wie .mvr-akkordeon-nr auf dem Balken — daran ist der Bezug ablesbar. */ .mvr-liste-auch { flex:none; display:flex; gap:4px; } /* Die Kachel ist ein Knopf: sie öffnet die Zielkategorie und scrollt dorthin. Ohne JavaScript bleibt sie ein Anker auf #kategorie-N (die Kategorien sind
, :target öffnet sie) — deshalb als ausgeliefert, nicht

⚠ `white-space: pre-wrap`, nicht `pre`. Der Text enthält lange Zeilen. Mit `pre` bekäme der Kasten eine waagerechte Bildlaufleiste, und auf dem Telefon schöbe er die ganze Seite zur Seite — Punkt 9 des Prüfplans verlangt das Gegenteil. */ .mvr-kopierblock { margin: 0 0 34px; } .mvr-kopierblock pre { margin: 0; padding: 20px 22px; background: var(--mvr-grund-sand); border: 1px solid var(--mvr-linie-leise); border-left: 3px solid var(--mvr-zier); color: var(--mvr-text); font: 13.5px/1.62 ui-monospace, "SF Mono", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; } .mvr-kopierblock > p:last-child { margin: 14px 0 0; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* ⚠ Mindesthöhe 44 px. Das ist das Maß, unter dem ein Bedienelement auf dem Telefon mit dem Finger nicht mehr sicher zu treffen ist. */ .mvr-kopieren { min-height: 44px; padding: 12px 26px; background: var(--mvr-knopf); color: var(--mvr-knopf-text); border: 1px solid var(--mvr-knopf); font: var(--mvr-bedien) / 1 var(--mvr-sans); letter-spacing: .04em; cursor: pointer; } .mvr-kopieren:hover { background: var(--mvr-flaeche-dunkel-2); border-color: var(--mvr-flaeche-dunkel-2); } .mvr-kopieren:focus-visible { outline: 2px solid var(--mvr-akzent); outline-offset: 2px; } /* ⚠ Wort UND Farbe, nicht Farbe allein. Wer Grün und Braun nicht unterscheidet, liest sonst nichts. */ .mvr-kopieren__meldung { font-size: var(--mvr-klein); font-weight: 700; color: #2F6B3F; } .mvr-kopieren__meldung--schlecht { color: var(--mvr-akzent); font-weight: 400; } /* Der Hinweis, dass etwas vorübergehend ist. */ .mvr-weg { background: var(--mvr-grund-sand); border-left: 4px solid var(--mvr-akzent); padding: 14px 18px; margin: 0 0 30px; font-size: 14.5px; } .mvr-weg strong { color: var(--mvr-akzent); } /* ═══════════════════════════════════════════════════════════════════ KACHELREIHE — vier gleich hohe Felder nebeneinander ═══════════════════════════════════════════════════════════════════ Für die Applikationsseite. Der Betreiber hat die Aufteilung am 08.09.2026 als Skizze vorgegeben: vier Kacheln in einer Reihe, die erste mit Inhalt, zwei leer, die letzte als Verweis. Auszeichnung im Beitrag — nur Klassen, damit TinyMCE beim Speichern nichts wegwirft:
…

frei

 …
⚠ `auto-fit` mit `minmax`, keine feste Spaltenzahl. `repeat(4, 1fr)` gäbe auf dem Telefon vier Spalten zu 70 px. So bricht die Reihe von selbst um: vier, zwei, eine — je nachdem, was passt. Punkt 9 des Prüfplans verlangt kein waagerechtes Scrollen. */ .mvr-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 20px; margin: 34px 0; align-items: stretch; } .mvr-kachel { display: flex; flex-direction: column; padding: 22px 20px; background: var(--mvr-grund); border: 1px solid var(--mvr-linie); /* ⚠ min-width: 0 — sonst spannt der lange Text im 
 die Spalte
     über ihre Rasterbreite hinaus auf. Bei Rasterkindern die häufigste
     übersehene Ursache. */
  min-width: 0;
}

.mvr-kachel__titel {
  margin: 0 0 6px;
  font: 400 20px/1.25 var(--mvr-serif);
  color: var(--mvr-text-stark);
}

.mvr-kachel__unter {
  margin: 0 0 16px;
  font-size: var(--mvr-klein);
  color: var(--mvr-text-leise);
}

/* ── Die leere Kachel ──────────────────────────────────────────────
   Gestrichelt und blass: Sie sagt „hier ist Platz", nicht „hier fehlt
   etwas". Ein durchgezogener Rahmen sähe aus wie ein Fehler.        */
.mvr-kachel--leer {
  border-style: dashed;
  border-color: var(--mvr-linie-leise);
  background: transparent;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}

.mvr-kachel--leer p {
  margin: 0;
  font-size: var(--mvr-klein);
  color: var(--mvr-linie);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Die Kachel als Verweis ────────────────────────────────────────*/
.mvr-kachel--link {
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  text-decoration: none;
  color: var(--mvr-text-stark);
  min-height: 220px;
}

.mvr-kachel--link:hover {
  border-color: var(--mvr-akzent);
  background: var(--mvr-grund-sand);
}

.mvr-kachel--link:focus-visible {
  outline: 2px solid var(--mvr-akzent);
  outline-offset: 2px;
}

.mvr-kachel__logo {
  display: block;
  width: 64px;
  height: auto;
  margin: 0;
}

/* ⚠ Das Datenbanksymbol steckt IN DER CSS, nicht im Beitrag.
   Ein  im Beitragstext überlebt das Speichern in TinyMCE nicht
   zuverlässig — Attribute wie `viewBox` werden verändert. Als
   Hintergrundbild an einer Klasse kann der Editor nichts anfassen.

   Drei gestapelte Ellipsen: das übliche Zeichen für eine Datenbank.
   Farbe fest #1D3849, weil `currentColor` in einem data:-URI nicht
   aufgelöst wird. */
.mvr-kachel__db {
  display: block;
  width: 46px;
  height: 52px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 52' fill='none' stroke='%231D3849' stroke-width='2.4'%3E%3Cellipse cx='23' cy='9' rx='19' ry='7'/%3E%3Cpath d='M4 9v17c0 3.9 8.5 7 19 7s19-3.1 19-7V9'/%3E%3Cpath d='M4 26v17c0 3.9 8.5 7 19 7s19-3.1 19-7V26'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mvr-kachel__wort {
  font: 400 22px/1 var(--mvr-serif);
  letter-spacing: .06em;
  color: var(--mvr-text-stark);
}

/* ── Kopierblock in einer Kachel ───────────────────────────────────
   Der Text ist länger, als die Kachel hoch sein darf. Er bekommt
   deshalb seinen eigenen Bildlauf — nicht die Seite.               */
.mvr-kachel .mvr-kopierblock {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mvr-kachel .mvr-kopierblock pre {
  max-height: 190px;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.55;
}

.mvr-kachel .mvr-kopierblock > p:last-child {
  margin-top: auto;
  padding-top: 14px;
}

.mvr-kachel .mvr-kopieren {
  padding: 12px 18px;
  font-size: 15px;
}

/* ── Kachel mit dem Logo einer Website ─────────────────────────────
   Nachtrag 08.09.2026. Die leeren Kacheln sind ersetzt: Der Betreiber
   dazu — „dann sieht das so aus, als ob hier schon was Wichtiges ist."
   Ein gestrichelter Platzhalter sagt „hier fehlt etwas"; ein Logo sagt
   „hier geht es hin".                                               */

.mvr-kachel__bild {
  display: block;
  width: auto;
  max-width: 100%;
  /* ⚠ Feste Höhe, keine feste Breite. Die drei Logos haben
     verschiedene Seitenverhältnisse (296×320, 180×180, 720×720) —
     über die Höhe gebunden wirken sie gleich groß, über die Breite
     gebunden nicht. */
  height: 104px;
  object-fit: contain;
  margin: 0;
}

.mvr-kachel__name {
  font: 400 17px/1.3 var(--mvr-serif);
  color: var(--mvr-text-stark);
}

.mvr-kachel__adresse {
  font-size: var(--mvr-klein);
  color: var(--mvr-text-leise);
  letter-spacing: .02em;
}

/* Die Task-Kachel trägt drei Zeichen übereinander und braucht deshalb
   etwas weniger Höhe je Zeichen. */
.mvr-kachel--task .mvr-kachel__logo {
  width: 56px;
}

/* =========================================================================
   NACHTRAG 19.09.2026 — Wartungsseite lesbar
   Gemeldet vom Betreiber: Ueberschriften nicht lesbar. Gemessen:
   - keine Schrift gesetzt: .mvr-wartung erbte nichts, der Browser nahm
     Times New Roman (die Seite hat nicht die Klasse .mvr-seite);
   - Feldbeschriftungen #324958 auf #1D3849 — dunkel auf dunkel;
     die Regel .mvr-feld-name greift nicht, das Markup benutzt