/* MM Service – Seitenlayout. Farben, Schrift und Logo-Maße kommen NUR aus mm-service.css (Logoprofil 1.0).
   Hier keine eigenen Farbwerte (INTENT.md, E-5). Kontrast: Regel text_kontrast. Computeransicht: Regel computer_ansicht. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding-left: 1.2em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--mm-akzent); outline-offset: 2px; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: -999px; top: 8px; background: var(--mm-gruen); color: var(--mm-weiss); padding: .6em 1em; border-radius: var(--mm-radius); z-index: 100; }
.sprung:focus { left: 8px; }

/* Platzhalter für Inhalte, die noch vom Kunden kommen – vor der Freigabe müssen alle weg sein (INTENT.md „Offen beim Kunden“) */
.platzhalter { background: #FFF3BF; color: var(--mm-text); border: 1px dashed var(--mm-akzent); padding: .1em .35em; border-radius: 4px; font-weight: 500; }

/* Raster */
.inhalt { width: 100%; max-width: var(--mm-inhalt-max); margin: 0 auto; padding: 0 16px; }
.schlank { max-width: var(--mm-text-max); }
.abschnitt { padding: 3rem 0; }
.abschnitt--flaeche { background: var(--mm-flaeche); }
.abschnitt--gruen { background: var(--mm-gruen); color: var(--mm-weiss); }
.abschnitt--gruen h2, .abschnitt--gruen h3, .abschnitt--gruen a, .abschnitt--gruen .mm-versal { color: var(--mm-weiss); }
.abschnitt--gruen .mm-knopf { background: var(--mm-weiss); color: var(--mm-gruen); }
.abschnitt--gruen .mm-knopf:hover, .abschnitt--gruen .mm-knopf:focus-visible { background: var(--mm-flaeche); color: var(--mm-gruen-dunkel); }
.abschnitt--gruen .mm-knopf:focus-visible { outline-color: var(--mm-akzent-hell); }
.abschnitt--gruen .mm-klein { color: var(--mm-weiss); }
.abstand-oben { margin-top: 1rem; }
.abstand-oben-gross { margin-top: 2rem; }
.vor { margin-bottom: 1rem; }
.zeile { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--mm-weiss); border-bottom: 1px solid var(--mm-linie); }
.kopf .inhalt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.kopf-logo img { height: 36px; width: auto; }
.navi { display: none; }
.navi a { text-decoration: none; font-weight: 600; padding: .5em .25em; }
.navi a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }
.kopf-aktion { display: none; }
.menue-knopf { background: var(--mm-weiss); border: 1px solid var(--mm-linie); border-radius: var(--mm-radius); min-height: 44px; min-width: 44px; padding: 0 .8em;
  font: 600 1rem/1 var(--mm-schrift); color: var(--mm-gruen); cursor: pointer; }
.kopf.offen .navi { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: 64px; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--mm-weiss); padding: .5rem 16px 2rem; gap: .25rem; z-index: 60; }
body.menue-offen { overflow: hidden; }
.kopf.offen .navi a { padding: .8em .25em; border-bottom: 1px solid var(--mm-linie); color: var(--mm-gruen); }
.kopf.offen .navi .mm-knopf { margin-top: .75rem; justify-content: center; color: var(--mm-weiss); border-bottom: 0; }

/* Startbereich */
.start { padding: 3rem 0 2.5rem; }
.start p.einleitung { font-size: 1.2rem; max-width: var(--mm-text-max); margin-top: 1rem; }
.start .aktionen { margin-top: 1.5rem; }
.start .hinweis { margin-top: 1rem; }
.knopf-rand { background: var(--mm-weiss); color: var(--mm-gruen); border: 2px solid var(--mm-gruen); }
.knopf-rand:hover, .knopf-rand:focus-visible { background: var(--mm-flaeche); color: var(--mm-gruen-dunkel); }

/* Karten */
.karten { display: grid; gap: 1rem; margin-top: 1.5rem; }
.karte { background: var(--mm-weiss); border: 1px solid var(--mm-linie); border-radius: var(--mm-radius-gross); padding: 1.4rem; }
.abschnitt--flaeche .karte { border-color: transparent; }
.karte h3 { margin-bottom: .5rem; }
.karte ul { margin-top: .75rem; }
.karte li + li { margin-top: .25rem; }
.karte .mm-versal { display: block; margin-bottom: .5rem; }
.marke { width: 40px; height: 4px; background: var(--mm-akzent); border-radius: 2px; margin-bottom: 1rem; }

/* Schritte */
.schritte { counter-reset: schritt; display: grid; gap: 1rem; margin-top: 1.5rem; list-style: none; padding: 0; }
.schritte li { counter-increment: schritt; position: relative; padding-left: 3.25rem; }
.schritte li::before { content: counter(schritt); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--mm-gruen); color: var(--mm-weiss); font-weight: 700; display: grid; place-items: center; }
.schritte h3 { margin-bottom: .25rem; }

/* Zweispalter Überschrift links / Text rechts */
.versetzt { display: grid; gap: 1rem; }

/* Kontakt */
.kontaktwege { display: grid; gap: 1rem; margin-top: 1.5rem; }
.kontaktwege .karte a { font-weight: 600; word-break: break-word; }
.formular { display: grid; gap: 1rem; margin-top: 1.5rem; }
.formular label { display: grid; gap: .35rem; font-weight: 600; }
.formular input, .formular textarea { font: inherit; color: var(--mm-text); padding: .7em .8em; border: 1px solid var(--mm-text-leise); border-radius: var(--mm-radius); background: var(--mm-weiss); width: 100%; }
.formular textarea { min-height: 9em; resize: vertical; }
.formular .zustimmung { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.formular .zustimmung input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; }
.formular .frei { position: absolute; left: -9999px; }
.meldung { display: none; padding: 1rem 1.2rem; border-radius: var(--mm-radius); border: 1px solid var(--mm-linie); background: var(--mm-flaeche); margin-top: 1rem; }
.meldung.sichtbar { display: block; }

/* Rechtstexte */
.text h2 { margin-top: 2rem; margin-bottom: .5rem; font-size: var(--mm-h3-groesse); }
.text h3 { margin-top: 1.25rem; margin-bottom: .35rem; font-size: 1.05rem; }
.text p + p, .text ul + p, .text p + ul { margin-top: .75rem; }
.text address { font-style: normal; }

/* Fuß */
.fuss { background: var(--mm-gruen-dunkel); color: var(--mm-weiss); padding: 2.5rem 0 1.5rem; margin-top: 0; }
.fuss a { color: var(--mm-weiss); }
.fuss .mm-klein { color: var(--mm-weiss); }   /* Sichtprüfung 09.11.: #4F5D54 auf Dunkelgrün war 1,71:1 */
.fuss-raster { display: grid; gap: 1.5rem; }
.fuss-logo img { height: 56px; width: auto; }
.fuss h3 { color: var(--mm-weiss); font-size: 1rem; margin-bottom: .5rem; }
.fuss ul { list-style: none; padding: 0; }
.fuss li + li { margin-top: .35rem; }
.fuss address { font-style: normal; }
.fuss-unten { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.25); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; align-items: center; }
.fuss-unten .senkan-stempel { width: auto !important; text-align: left !important; }

/* Tablet */
@media (min-width: 760px) {
  .karten { grid-template-columns: repeat(2, 1fr); }
  .kontaktwege { grid-template-columns: repeat(2, 1fr); }
  .fuss-raster { grid-template-columns: 1.2fr 1fr 1fr; }
  .formular .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
}

/* Navigation ab 900 px offen */
@media (min-width: 900px) {
  .kopf .inhalt { min-height: 72px; }
  .kopf-logo img { height: var(--mm-logo-kopf-hoehe); }
  .menue-knopf { display: none; }
  .navi { display: flex; gap: 1.25rem; align-items: center; }
  .navi .mm-knopf { display: none; }
  .kopf-aktion { display: inline-flex; }
}

/* Computeransicht (Regel computer_ansicht): Breite nutzen, mit der Einrückung spielen, Fließtext höchstens 80 Zeichen je Zeile (#1463) */
@media (min-width: 1200px) {
  .abschnitt { padding: 4.5rem 0; }
  .inhalt { max-width: calc(var(--mm-inhalt-max) + 32px); }   /* 1360 px Inhalt + 16 px Rand je Seite (Regel computer_ansicht) */
  .schmal .inhalt > * { max-width: 1000px; }                     /* schlank (unter 80 % von 1360 px), linksbündig an der breiten Kante – Wechsel breit/schlank, nicht zwangshalber zentriert */
  .schlank, .start p.einleitung, .abschnitt p { max-width: 54ch; }   /* 68ch ergaben 84–96 Zeichen je Zeile, 54ch höchstens rund 76 (Sichtprüfung 09.11.) */
  .versetzt .schritte { grid-template-columns: 1fr; gap: 1.25rem; }   /* Schritte in der rechten Spalte untereinander statt drei schmale Spalten */
  .versetzt .karten { grid-template-columns: repeat(2, 1fr); }
  .start { padding: 5rem 0 4rem; }
  .start .inhalt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3rem; align-items: center; }
  .start .bild { display: block; justify-self: end; width: min(100%, 420px); }
  .karten { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .karten--vier { grid-template-columns: repeat(4, 1fr); }
  .schritte { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .versetzt { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3rem; align-items: start; }
  .kontaktwege { grid-template-columns: repeat(3, 1fr); }
  .formular-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: start; }
  .fuss-raster { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
@media (max-width: 1199px) { .start .bild { display: none; } }

/* ===== MM-7 Gestaltung „Dachlinie“ (Entwurf 09.11.2026, Furkan entscheidet) =====
   Leitidee aus dem Logo A „Dach“: die Dachlinie kehrt als Zeichen wieder (Startbereich, Kartenmarke, Übergänge als Giebel),
   die vier Fenster des Logos als eckige Schrittnummern. Archivo-Breitenachse für eigene Überschriften. Nur Farben aus mm-service.css. */

/* Startbereich in Hausgrün mit großer, leiser Dachlinie */
.start { position: relative; overflow: hidden; isolation: isolate; background: var(--mm-gruen); color: var(--mm-weiss); padding: 2.75rem 0 4.5rem; }
.start::before { content: ""; position: absolute; z-index: -1; right: -18%; top: 1.5rem; width: min(115vw, 900px); aspect-ratio: 366.4 / 122.77;
  background: var(--mm-akzent-hell); opacity: .16; -webkit-mask: url("/bilder/dach.svg") no-repeat center / contain; mask: url("/bilder/dach.svg") no-repeat center / contain; pointer-events: none; }
.start h1, .start .mm-versal, .start a:not(.mm-knopf), .start .mm-klein { color: var(--mm-weiss); }
.start .mm-versal { display: inline-flex; align-items: baseline; gap: .7em; }
.start .mm-versal::before { content: ""; flex: none; width: 2.2em; height: .74em; background: var(--mm-akzent-hell);
  -webkit-mask: url("/bilder/dach.svg") no-repeat center / contain; mask: url("/bilder/dach.svg") no-repeat center / contain; }
.start .mm-knopf { background: var(--mm-weiss); color: var(--mm-gruen); }
.start .mm-knopf:hover, .start .mm-knopf:focus-visible { background: var(--mm-flaeche); color: var(--mm-gruen-dunkel); }
.start .knopf-rand { background: transparent; color: var(--mm-weiss); border: 2px solid var(--mm-weiss); }
.start .knopf-rand:hover, .start .knopf-rand:focus-visible { background: var(--mm-gruen-dunkel); color: var(--mm-weiss); }
.start a:focus-visible { outline-color: var(--mm-akzent-hell); }

/* „Auf einen Blick“ im Startbereich (nur Startseite) – belegte Zusagen aus den Freigaben P1–P16 */
.fakten { margin-top: 2rem; background: var(--mm-weiss); color: var(--mm-text); border-radius: var(--mm-radius-gross); padding: 1.4rem 1.5rem; }
.fakten .mm-versal { color: var(--mm-gruen); display: block; }
.fakten .mm-versal::before { content: none; }
.fakten ul { list-style: none; padding: 0; margin-top: .75rem; display: grid; gap: .6rem; }
.fakten li { display: flex; gap: .75rem; align-items: baseline; font-weight: 600; }
.fakten li::before { content: ""; flex: none; width: .7em; height: .7em; background: var(--mm-akzent); border-radius: 2px; transform: translateY(.05em); }
.fakten .mm-klein { color: var(--mm-text-leise); margin-top: 1rem; }
.fakten .mm-klein a { color: var(--mm-gruen); }

/* Giebel: der helle Abschnitt nach dem Startbereich ragt als Dach in das Grün, der Fuß beginnt mit einem Dach */
:root { --giebel: 26px; }
.start + .abschnitt { position: relative; margin-top: calc(-1 * var(--giebel)); padding-top: calc(3rem + var(--giebel));
  clip-path: polygon(0 var(--giebel), 50% 0, 100% var(--giebel), 100% 100%, 0 100%); }
.start + .abschnitt:not(.abschnitt--flaeche) { background: var(--mm-weiss); }
.fuss { clip-path: polygon(0 var(--giebel), 50% 0, 100% var(--giebel), 100% 100%, 0 100%); padding-top: calc(2.5rem + var(--giebel)); position: relative; margin-top: calc(-1 * var(--giebel)); }

/* Karten: Dachmarke statt Strich, leichte Tiefe, reagieren auf Maus und Fokus */
.marke { width: 46px; height: 16px; border-radius: 0; background: var(--mm-akzent);
  -webkit-mask: url("/bilder/dach.svg") no-repeat center / contain; mask: url("/bilder/dach.svg") no-repeat center / contain; }
.karte { transition: transform .3s ease, box-shadow .3s ease; }
.abschnitt--flaeche .karte { box-shadow: 0 10px 28px -20px color-mix(in srgb, var(--mm-text) 45%, transparent); }
.karte:hover, .karte:focus-within { transform: translateY(-3px); box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--mm-text) 55%, transparent); }
.mm-knopf { transition: background-color .2s ease, transform .2s ease; }
.mm-knopf:hover, .mm-knopf:focus-visible { transform: translateY(-1px); }

/* Karten auf Grün: offen, nur eine Dachkante oben – keine Kästen */
.karte--offen { background: transparent; border: 0; border-top: 3px solid var(--mm-akzent-hell); border-radius: 0; padding: 1.1rem 0 0; box-shadow: none; }
.karte--offen:hover, .karte--offen:focus-within { transform: none; box-shadow: none; }

/* Absätze in Textblöcken mit Luft (Über uns: drei Absätze klebten aneinander, gesehen 09.11.) */
.schlank p + p { margin-top: .9rem; }

/* Schritte: eckige Nummern wie die Fenster im Logo, verbunden durch eine Linie */
.schritte li::before { border-radius: var(--mm-radius); }
.schritte li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.9rem; bottom: -.9rem; width: 2px; background: var(--mm-akzent); border-radius: 1px; }

/* Fotos (Übergangsbilder bis eigene Fotos da sind, #2316): unter der Überschrift, festes Seitenverhältnis gegen Springen beim Laden */
.foto { margin: 1.5rem 0 0; }
.foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--mm-radius-gross); background: var(--mm-linie); }
.foto--breit { margin: 1.25rem 0 0; }
.foto--breit img { aspect-ratio: 3 / 2; }
.foto figcaption { margin-top: .5rem; font-size: .85rem; line-height: 1.4; color: var(--mm-text-leise); }
.foto figcaption a { color: inherit; }
.abschnitt--gruen .foto figcaption, .abschnitt--gruen .foto figcaption a { color: var(--mm-weiss); }
@media (min-width: 760px) { .foto--breit img { aspect-ratio: 2 / 1; } }
@media (min-width: 760px) and (max-width: 1199px) { .versetzt .foto { max-width: 34rem; } }   /* Tablet: Bild nicht über die volle Breite */
@media (min-width: 1200px) { .foto--breit img { aspect-ratio: 5 / 2; } }                      /* Computer: Ortsbild flacher, Karten bleiben im Blick */

/* Bewegung (Regel bewegung_einsatz, Stufe dezent): Einblenden mit 16 px Versatz, 0,6 s, Karten kurz nacheinander */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .karte, .mm-knopf { transition: none; }
  .karte:hover, .karte:focus-within, .mm-knopf:hover, .mm-knopf:focus-visible { transform: none; }
}

@media (min-width: 760px) {
  :root { --giebel: 44px; }
  .start { padding: 3.5rem 0 5.5rem; }
  .start h1 { font-weight: 800; font-stretch: 110%; }
  h2 { font-stretch: 104%; }
  .fakten { max-width: 34rem; }
}
@media (min-width: 1200px) {
  :root { --giebel: 64px; }
  .start { padding: 5rem 0 6.5rem; }
  .start::before { right: -6%; top: 2rem; width: 980px; }
  .start .fakten { margin-top: 0; justify-self: end; width: min(100%, 400px); padding: 1.8rem 2rem; }
  .versetzt .karten:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }   /* drei Karten nebeneinander statt 2 + 1 */
  .start + .abschnitt { padding-top: calc(4.5rem + var(--giebel)); }
  .fuss { padding-top: calc(3rem + var(--giebel)); }
}
/* Tablet (760–1199 px): keine verwaiste dritte Karte, Fuß als 2 × 2 statt 3 + 1 (gesehen 09.11.) */
@media (min-width: 760px) and (max-width: 1199px) {
  .karten > :nth-child(3):last-child { grid-column: 1 / -1; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
}

/* Lesbarkeit (Regel text_lesbarkeit, 10.11.2026): nach jedem Absatz mindestens eine Zeilenhöhe Luft bis zum nächsten Element.
   Fließtext 16 px × 1,6 = 25,6 px -> 1.75rem (28 px); Einleitung 19,2 px × 1,6 = 30,7 px -> 2rem (32 px).
   Ausgenommen: die kleine Versalzeile über Überschriften und der Abstand vor Überschriften (der hat eigene Werte). */
main p:not(.mm-versal):not(.platzhalter) + :not(h2):not(h3) { margin-top: 1.75rem; }
main p.einleitung:not(.mm-versal):not(.platzhalter) + :not(h2):not(h3) { margin-top: 2rem; }

/* Lange Wörter in Überschriften (10.11.2026): „Datenschutzerklärung“ war bei 125 % Schrift 428 px breit, die Handyseite
   wurde 444 statt 390 px breit und schrumpfte. Getrennt wird nur, wenn ein Wort nicht in die Zeile passt (lang="de"). */
h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }