/* ============================================================================
   JAHN IMMOBILIEN 38 GMBH · STYLE.CSS  (Live-Stylesheet)
   GENERIERT aus MJI_DS_00_Designsystem.css (Teil 1-12, unverändert übernommen)
   + Abschnitt 13 "Website-Bausteine" (Header-Menü, Footer, Hero, Formular).
   Nicht direkt bearbeiten - Änderungen am Look gehören in die Tokens in
   Abschnitt 1, Änderungen an Bausteinen in Abschnitt 13.
   Version 1.0 · Konzept Eins · Stand siehe Cache-Kennung im HTML
   ========================================================================= */

/* ==========================================================================
   0 · SCHRIFTEN, lokal gehostet (DSGVO - kein Google-Fonts-Abruf im Browser)
   Inter als Variable Font (100-900), Newsreader Regular.
   ========================================================================== */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(../fonts/inter-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url(../fonts/inter-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(../fonts/newsreader-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(../fonts/newsreader-400-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ============================================================================
   JAHN IMMOBILIEN 38 GMBH · DESIGNSYSTEM
   Grundlage: freigegebener Entwurf V „Wertkarte"
   Zielsystem: WordPress mit Themify Ultra — als Custom CSS einzufügen unter
   Themify > Theme Settings > Custom CSS, oder besser als eigene Datei im
   Child-Theme (empfohlen, weil versionierbar).
   Präfix: alle Klassen beginnen mit .mji- , damit nichts mit Themify- oder
   Plugin-Klassen kollidiert.
   Version 1.0 · Konzept Eins · 03.09.2026
   ----------------------------------------------------------------------------
   ÄNDERUNG GEGENÜBER DEN ENTWÜRFEN:
   Die JI 38 Services UG wird nicht mehr genutzt. Alle Bausteine laufen auf
   die Jahn Immobilien 38 GmbH. Der Baustein „zwei Rechtsträger" ist entfernt.
   Die Aussage „Wer bewertet, verkauft nicht" darf nicht mehr verwendet
   werden — sie ist mit einem Rechtsträger sachlich nicht haltbar. Ersatz:
   Ingenieurqualifikation, Honorar nach Aufwand, dokumentierter Rechenweg.
   Ob Zertifizierungen und die Erlaubnis nach § 34c GewO auf die GmbH laufen,
   ist [Prüfpflichtig].
   ----------------------------------------------------------------------------
   CI-Farben, aus der Original-Logodatei ausgemessen:
     CI-Blau  #0066B3   CI-Grau  #58595B
   Beide sind dem Logo vorbehalten. Die Gestaltungsfarben sind Navy und Petrol.
   Alle Text-/Grundpaare unten sind nach WCAG 2.1 geprüft, Werte im Kommentar.
   ========================================================================= */


/* ==========================================================================
   1 · TOKENS
   ========================================================================== */

:root {

  /* ---- Marke, nur für Logo und Siegel ---------------------------------- */
  --mji-ci-blue:      #0066B3;
  --mji-ci-grey:      #58595B;
  /* Logo zweifarbig. a = CI-Blau (Dach, J, 38-Kasten), b = CI-Grau (Klammer,
     I, Regeln, Schriftzug), 38 = Farbe der ausgesparten Ziffern im Kasten.
     Nur hier setzen, nie im Markup. Auf dunklem Grund unten umgekehrt.     */
  --mji-logo-a:       #0066B3;
  --mji-logo-b:       #58595B;
  --mji-logo-38:      #FFFFFF;

  /* ---- Flächen --------------------------------------------------------- */
  --mji-paper:        #F7F4EF;   /* Grundfläche, warmes Off White         */
  --mji-paper-2:      #EFEAE1;   /* Sand, zweite Fläche / Wechselband     */
  --mji-surface:      #FFFFFF;   /* Karten                                */
  --mji-navy:         #0E2C46;   /* dunkle Vollflächen                    */
  --mji-navy-2:       #14395A;   /* Navy, eine Stufe heller               */

  /* ---- Schrift --------------------------------------------------------- */
  --mji-ink:          #1B2A38;   /* 13.3:1 auf paper – AAA                */
  --mji-muted:        #6E665E;   /*  5.1:1 auf paper – AA                 */
  --mji-on-navy:      #F7F4EF;   /* 13.0:1 auf navy – AAA                 */
  --mji-on-navy-mute: #EFEAE1;   /* 11.9:1 auf navy – AAA                 */

  /* ---- Akzent ---------------------------------------------------------- */
  --mji-teal:         #0E7C7B;   /*  4.6:1 auf paper – AA, ab 16px        */
  --mji-teal-dark:    #0B6462;   /*  6.4:1 auf paper – AA, für Kleintext  */
  --mji-teal-light:   #3FBFB8;   /*  6.4:1 auf navy  – AA                 */
  --mji-on-teal:      #FFFFFF;   /*  5.0:1 auf teal  – AA                 */

  /* ---- Linien und Zustände -------------------------------------------- */
  --mji-line:         #E2DCD2;   /* Haarlinie, nie Schrift                */
  --mji-line-strong:  #C9C0B2;
  --mji-focus:        #0B6462;
  --mji-error:        #8C2F39;   /*  8.1:1 auf surface – AAA              */
  --mji-success:      #1F5D3A;   /*  7.8:1 auf surface – AAA              */

  /* ---- Schriftfamilien ------------------------------------------------- *
   * Beide über Google Fonts, lokal hostbar (DSGVO). Verfügbarkeit geprüft. *
   * Einbau in Themify: Customize > Font > Google Fonts, oder lokal per     *
   * @font-face im Child-Theme.                                            */
  --mji-font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mji-font-body:    "Inter", -apple-system, "Segoe UI", Arial, sans-serif;

  /* ---- Typo-Skala, fluid ---------------------------------------------- */
  --mji-fs-label:  clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  --mji-fs-sm:     clamp(0.8125rem, 0.79rem + 0.15vw, 0.875rem);
  --mji-fs-body:   clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  --mji-fs-lead:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --mji-fs-h4:     clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --mji-fs-h3:     clamp(1.25rem, 1.13rem + 0.6vw, 1.625rem);
  --mji-fs-h2:     clamp(1.75rem, 1.35rem + 1.7vw, 2.75rem);
  --mji-fs-h1:     clamp(2.125rem, 1.5rem + 2.9vw, 3.75rem);
  --mji-fs-num:    clamp(1.875rem, 1.4rem + 2.2vw, 3rem);

  --mji-lh-tight: 1.08;
  --mji-lh-head:  1.18;
  --mji-lh-body:  1.65;
  --mji-tr-head:  -0.015em;   /* Serif braucht kaum Enge */
  --mji-tr-label:  0.14em;    /* Versal-Label, weite Sperrung */

  /* ---- Abstände, 4px-Basis -------------------------------------------- */
  --mji-1:  0.25rem; --mji-2: 0.5rem;  --mji-3: 0.75rem; --mji-4: 1rem;
  --mji-5:  1.25rem; --mji-6: 1.5rem;  --mji-8: 2rem;    --mji-10: 2.5rem;
  --mji-12: 3rem;    --mji-16: 4rem;   --mji-20: 5rem;   --mji-24: 6rem;

  /* Sektions-Innenabstand, fluid — der Rhythmus der ganzen Seite */
  --mji-section-y:   clamp(3.5rem, 2rem + 6vw, 7rem);
  --mji-section-y-s: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  /* ---- Breiten -------------------------------------------------------- */
  --mji-w-prose:   34rem;   /* ~62 Zeichen Lesemaß */
  --mji-w-narrow:  48rem;
  --mji-w:         72rem;   /* Standardcontainer   */
  --mji-w-wide:    84rem;
  --mji-gutter:    clamp(1.25rem, 4vw, 3rem);

  /* ---- Radien --------------------------------------------------------- */
  --mji-r-sm:   8px;
  --mji-r:      14px;
  --mji-r-lg:   20px;
  --mji-r-pill: 999px;

  /* ---- Schatten, bewusst flach ---------------------------------------- */
  --mji-sh-1: 0 1px 2px rgba(27, 42, 56, 0.04),
              0 4px 14px rgba(27, 42, 56, 0.05);
  --mji-sh-2: 0 2px 4px rgba(27, 42, 56, 0.05),
              0 16px 44px rgba(27, 42, 56, 0.08);

  /* ---- Bewegung ------------------------------------------------------- */
  --mji-ease:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --mji-dur-1: 160ms;
  --mji-dur-2: 320ms;
  --mji-dur-3: 700ms;   /* Mask-Reveal, Bild-Zoom */

  /* ---- Bildseitenverhältnisse, verbindlich ---------------------------- */
  --mji-ar-hero:  21 / 9;
  --mji-ar-wide:  16 / 9;
  --mji-ar-card:  4 / 3;
  --mji-ar-port:  3 / 4;
  --mji-ar-square: 1 / 1;

  --mji-z-header: 100;
  --mji-z-bar:    90;
  --mji-z-modal:  200;
}

/* Dunkelmodus: bewusste Entscheidung — die Seite bleibt hell.
   Grund: Zielgruppe 45–70, vertrauenskritische Anlässe, Druck- und
   Weitergabefähigkeit der Gutachtenseiten. Kein prefers-color-scheme-Switch.
   Wer ihn später will, überschreibt nur diesen Block. */


/* ==========================================================================
   2 · BASIS
   ========================================================================== */

.mji *, .mji *::before, .mji *::after { box-sizing: border-box; }

.mji {
  background: var(--mji-paper);
  color: var(--mji-ink);
  font-family: var(--mji-font-body);
  font-size: var(--mji-fs-body);
  line-height: var(--mji-lh-body);
  -webkit-font-smoothing: antialiased;
  text-underline-offset: 0.18em;
}

.mji h1, .mji h2, .mji h3, .mji h4, .mji .mji-h {
  font-family: var(--mji-font-display);
  font-weight: 400;                 /* Serif nie fett */
  letter-spacing: var(--mji-tr-head);
  line-height: var(--mji-lh-head);
  color: var(--mji-ink);
  margin: 0 0 var(--mji-4);
  text-wrap: balance;
}
.mji h1 { font-size: var(--mji-fs-h1); line-height: var(--mji-lh-tight); }
.mji h2 { font-size: var(--mji-fs-h2); }
.mji h3 { font-size: var(--mji-fs-h3); }
.mji h4 { font-size: var(--mji-fs-h4); font-family: var(--mji-font-body);
          font-weight: 600; letter-spacing: 0; }

.mji p { margin: 0 0 var(--mji-4); max-width: var(--mji-w-prose);
         text-wrap: pretty; }
.mji-lead { font-size: var(--mji-fs-lead); color: var(--mji-muted); }
.mji-muted { color: var(--mji-muted); }

/* Versal-Label — das Kickerelement des Entwurfs */
.mji-label {
  display: block;
  font-family: var(--mji-font-body);
  font-size: var(--mji-fs-label);
  font-weight: 500;
  letter-spacing: var(--mji-tr-label);
  text-transform: uppercase;
  color: var(--mji-teal-dark);
  margin: 0 0 var(--mji-3);
}
.mji-label--dash::before {
  content: ""; display: inline-block; width: 1.5rem; height: 1px;
  background: currentColor; vertical-align: 0.28em; margin-right: 0.6rem;
}
.mji-label--on-navy { color: var(--mji-teal-light); }

/* Zahlen: Tabellenziffern, weil Zahlen hier Argument sind */
.mji-num {
  font-family: var(--mji-font-display);
  font-size: var(--mji-fs-num);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--mji-ink);
}

/* Links
   WICHTIG: :where() hat Spezifität 0. Ohne das schlägt `.mji a` (0-1-1)
   jede Komponentenklasse wie `.mji-btn` (0-1-0) — dann bekommt jeder
   Button, der ein <a> ist, die Linkfarbe statt seiner eigenen.
   Das war Fehler Nr. 1 in Version 0.9. Nicht zurückbauen. */
.mji :where(a) { color: var(--mji-teal-dark); text-decoration-thickness: 1px; }
.mji :where(a):hover { color: var(--mji-ink); }

/* Fokus — Pflicht, nicht Kür (BFSG) */
.mji :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mji-focus);
  outline-offset: 3px;
  border-radius: var(--mji-r-sm);
}

.mji img, .mji video { display: block; max-width: 100%; height: auto; }

/* Sprunglink */
.mji-skip {
  position: absolute; left: -9999px;
  background: var(--mji-navy); color: var(--mji-on-navy);
  padding: var(--mji-3) var(--mji-5); border-radius: var(--mji-r-sm);
}
.mji-skip:focus { left: var(--mji-4); top: var(--mji-4);
                  z-index: var(--mji-z-modal); }

.mji-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


/* ==========================================================================
   3 · LAYOUT
   ========================================================================== */

.mji-section   { padding-block: var(--mji-section-y); }
.mji-section--s{ padding-block: var(--mji-section-y-s); }
.mji-section--flat { padding-block: var(--mji-8); }

.mji-section--paper   { background: var(--mji-paper); }
.mji-section--sand    { background: var(--mji-paper-2); }
.mji-section--surface { background: var(--mji-surface); }
.mji-section--navy    { background: var(--mji-navy); color: var(--mji-on-navy); }
.mji-section--navy :where(h1,h2,h3,.mji-h) { color: var(--mji-on-navy); }
.mji-section--navy .mji-muted,
.mji-section--navy .mji-lead { color: var(--mji-on-navy-mute); }
.mji-section--navy :where(a) { color: var(--mji-teal-light); }

.mji-container { width: 100%; max-width: var(--mji-w);
                 margin-inline: auto; padding-inline: var(--mji-gutter); }
.mji-container--narrow { max-width: var(--mji-w-narrow); }
.mji-container--wide   { max-width: var(--mji-w-wide); }
.mji-container--bleed  { max-width: none; padding-inline: 0; }

/* Raster */
.mji-grid { display: grid; gap: var(--mji-8); }
.mji-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mji-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mji-grid--4 { grid-template-columns: repeat(4, 1fr); }
.mji-grid--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.mji-grid--5-7 { grid-template-columns: 5fr 7fr; align-items: center; }
.mji-grid--7-5 { grid-template-columns: 7fr 5fr; align-items: center; }

.mji-stack > * + * { margin-top: var(--mji-4); }
.mji-stack--lg > * + * { margin-top: var(--mji-8); }
.mji-row { display: flex; flex-wrap: wrap; gap: var(--mji-3);
           align-items: center; }
.mji-center { text-align: center; margin-inline: auto; }
.mji-center p { margin-inline: auto; }

/* Medienfläche mit festem Seitenverhältnis — verhindert Layout-Sprünge */
.mji-media { position: relative; overflow: hidden;
             border-radius: var(--mji-r); background: var(--mji-paper-2); }
.mji-media > img, .mji-media > video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--mji-dur-3) var(--mji-ease);
}
.mji-media--hero   { aspect-ratio: var(--mji-ar-hero); }
.mji-media--wide   { aspect-ratio: var(--mji-ar-wide); }
.mji-media--card   { aspect-ratio: var(--mji-ar-card); }
.mji-media--port   { aspect-ratio: var(--mji-ar-port); }
.mji-media--square { aspect-ratio: var(--mji-ar-square); }
.mji-media--zoom:hover > img { transform: scale(1.03); }


/* ==========================================================================
   4 · SCHALTFLÄCHEN
   Kapselform ist die Leitform des Entwurfs.
   ========================================================================== */

.mji-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--mji-2);
  min-height: 48px;                       /* Fingerziel */
  padding: var(--mji-3) var(--mji-6);
  border: 1px solid transparent;
  border-radius: var(--mji-r-pill);
  background: var(--mji-teal); color: var(--mji-on-teal);
  font-family: var(--mji-font-body); font-size: var(--mji-fs-sm);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background var(--mji-dur-1) var(--mji-ease),
              transform var(--mji-dur-1) var(--mji-ease),
              border-color var(--mji-dur-1) var(--mji-ease);
}
.mji-btn:hover  { background: var(--mji-teal-dark); color: var(--mji-on-teal);
                  transform: translateY(-1px); }
.mji-btn:active { transform: translateY(0); }
.mji-btn[disabled], .mji-btn[aria-disabled="true"] {
  background: var(--mji-line-strong); color: var(--mji-surface);
  cursor: not-allowed; transform: none;
}
/* Pfeil rechts — Vantara-Erbe, bewusst dezent */
.mji-btn--arrow::after { content: "→"; font-weight: 400; transition: transform var(--mji-dur-1) var(--mji-ease); }
.mji-btn--arrow:hover::after { transform: translateX(3px); }

.mji-btn--ghost { background: transparent; color: var(--mji-ink);
                  border-color: var(--mji-line-strong); }
.mji-btn--ghost:hover { background: var(--mji-surface);
                        border-color: var(--mji-ink); color: var(--mji-ink); }

.mji-btn--on-navy { background: var(--mji-paper); color: var(--mji-navy); }
.mji-btn--on-navy:hover { background: var(--mji-surface); color: var(--mji-navy); }
.mji-btn--ghost-on-navy { background: transparent; color: var(--mji-on-navy);
                          border-color: rgba(247,244,239,0.4); }

.mji-btn--sm { min-height: 40px; padding: var(--mji-2) var(--mji-5); }

/* Textlink mit feiner Unterstreichung — die häufigste Aktion im Entwurf */
.mji-link {
  display: inline-flex; align-items: center; gap: var(--mji-2);
  font-size: var(--mji-fs-sm); font-weight: 600;
  color: var(--mji-teal-dark); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.mji-link::after { content: "→"; transition: transform var(--mji-dur-1) var(--mji-ease); }
.mji-link:hover::after { transform: translateX(3px); }
.mji-link--on-navy { color: var(--mji-teal-light); }


/* ==========================================================================
   5 · KARTEN, ABZEICHEN, LEISTEN
   ========================================================================== */

.mji-card {
  background: var(--mji-surface);
  border: 1px solid var(--mji-line);
  border-radius: var(--mji-r-lg);
  box-shadow: var(--mji-sh-1);
  padding: var(--mji-6);
  transition: box-shadow var(--mji-dur-2) var(--mji-ease),
              transform var(--mji-dur-2) var(--mji-ease);
}
.mji-card--link:hover { box-shadow: var(--mji-sh-2); transform: translateY(-2px); }
.mji-card--flush { padding: 0; overflow: hidden; }
.mji-card--flush .mji-card__body { padding: var(--mji-6); }
.mji-card--raised { box-shadow: var(--mji-sh-2); }
.mji-card--feature { border-color: var(--mji-teal); border-width: 2px; }

/* Kennzahlenkarte — überlappt im Entwurf V den Header */
.mji-stat { background: var(--mji-surface); border-radius: var(--mji-r-lg);
            box-shadow: var(--mji-sh-1); padding: var(--mji-6);
            text-align: center; }
.mji-stat__rule { width: 2rem; height: 2px; background: var(--mji-teal);
                  margin: 0 auto var(--mji-4); border: 0; }
.mji-stat__label { display: block; margin-top: var(--mji-3);
                   font-size: var(--mji-fs-label);
                   letter-spacing: var(--mji-tr-label);
                   text-transform: uppercase; color: var(--mji-muted); }
.mji-stats--overlap { margin-top: calc(-1 * var(--mji-16)); position: relative; }

.mji-badge {
  display: inline-flex; align-items: center; gap: var(--mji-2);
  padding: var(--mji-1) var(--mji-3); border-radius: var(--mji-r-pill);
  background: var(--mji-paper-2); color: var(--mji-ink);
  font-size: var(--mji-fs-label); letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mji-badge--teal { background: var(--mji-teal); color: var(--mji-on-teal); }

/* Siegelleiste */
.mji-trust { display: flex; flex-wrap: wrap; align-items: center;
             justify-content: center; gap: var(--mji-10); }
.mji-trust__item { text-align: center; max-width: 11rem; }
.mji-trust__item img { height: 4.5rem; width: auto; margin: 0 auto var(--mji-3); }
.mji-trust__item span { display: block; font-size: var(--mji-fs-label);
                        line-height: 1.4; color: var(--mji-muted); }

/* Sterne — Inline-SVG, NIEMALS ein Icon-Font.
   Der Icon-Font ist auf der Bestandsseite die Ursache dafür, dass fünf
   Fünf-Sterne-Bewertungen als leere Sterne rendern, und gleichzeitig für
   3,05 MB von 3,82 MB Ladegewicht der Startseite. */
.mji-stars { display: inline-flex; gap: 2px; color: var(--mji-teal);
             line-height: 1; vertical-align: -0.12em; }
.mji-stars svg { width: 1.05em; height: 1.05em; fill: currentColor; display: block; }
.mji-stars--lg { font-size: 1.35rem; }
.mji-stars--on-navy { color: var(--mji-teal-light); }

/* Markup, immer mit aria-label — sonst liest ein Screenreader nichts:
   <span class="mji-stars" role="img" aria-label="5 von 5 Sternen">
     <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l2.9 6.1 6.6.9
     -4.8 4.7 1.2 6.6L12 17.2 6.1 20.3l1.2-6.6L2.5 9l6.6-.9z"/></svg>
     … fünfmal …
   </span>
   Alternative Farbe: wer den konventionellen Bernsteinton will, setzt
   --mji-stars: #C8912A — ein Token, sonst ändert sich nichts. */


/* ==========================================================================
   6 · FORMULARE UND ZUSTÄNDE
   ========================================================================== */

.mji-field { display: block; margin-bottom: var(--mji-5); }
.mji-field > span { display: block; font-size: var(--mji-fs-label);
                    letter-spacing: 0.06em; text-transform: uppercase;
                    color: var(--mji-muted); margin-bottom: var(--mji-2); }

.mji-input, .mji-select, .mji-textarea {
  width: 100%; min-height: 48px;
  padding: var(--mji-3) var(--mji-4);
  background: var(--mji-surface); color: var(--mji-ink);
  border: 1px solid var(--mji-line-strong);
  border-radius: var(--mji-r-sm);
  font: inherit; font-size: var(--mji-fs-body);
  transition: border-color var(--mji-dur-1) var(--mji-ease),
              box-shadow var(--mji-dur-1) var(--mji-ease);
}
.mji-textarea { min-height: 7rem; resize: vertical; }
.mji-input:hover, .mji-select:hover { border-color: var(--mji-ink); }
.mji-input:focus, .mji-select:focus, .mji-textarea:focus {
  border-color: var(--mji-teal); box-shadow: 0 0 0 3px rgba(14,124,123,0.14);
  outline: none;
}
.mji-input::placeholder { color: var(--mji-muted); opacity: 0.8; }
.mji-input[aria-invalid="true"] { border-color: var(--mji-error); }
.mji-input[disabled] { background: var(--mji-paper-2); color: var(--mji-muted);
                       cursor: not-allowed; }

/* Adressfeld im Bewertungs-Einstieg: nur Unterlinie, kein Kasten */
.mji-input--line {
  background: transparent; border: 0; border-bottom: 1px solid currentColor;
  border-radius: 0; padding-inline: 0; font-size: var(--mji-fs-lead);
}
.mji-input--line:focus { box-shadow: none; border-bottom-width: 2px; }

.mji-hint  { font-size: var(--mji-fs-sm); color: var(--mji-muted);
             margin-top: var(--mji-2); }
.mji-error { font-size: var(--mji-fs-sm); color: var(--mji-error);
             margin-top: var(--mji-2); }

.mji-consent { display: flex; gap: var(--mji-3); align-items: flex-start;
               font-size: var(--mji-fs-sm); color: var(--mji-muted); }
.mji-consent input { margin-top: 0.2em; width: 1.15rem; height: 1.15rem;
                     accent-color: var(--mji-teal); flex: none; }

.mji-note { border-left: 3px solid var(--mji-teal);
            background: var(--mji-paper-2);
            padding: var(--mji-3) var(--mji-5);
            font-size: var(--mji-fs-sm); color: var(--mji-muted);
            border-radius: 0 var(--mji-r-sm) var(--mji-r-sm) 0; }
.mji-note--success { border-color: var(--mji-success); }
.mji-note--error   { border-color: var(--mji-error); }


/* ==========================================================================
   7 · AUFKLAPPER, TABELLE, ABLAUF
   ========================================================================== */

.mji-acc { border-top: 1px solid var(--mji-line); }
.mji-acc__item { border-bottom: 1px solid var(--mji-line); }
.mji-acc__item > summary {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--mji-5); cursor: pointer; list-style: none;
  padding: var(--mji-5) 0;
  font-family: var(--mji-font-display); font-size: var(--mji-fs-h4);
}
.mji-acc__item > summary::-webkit-details-marker { display: none; }
.mji-acc__item > summary::after {
  content: "+"; flex: none; font-family: var(--mji-font-body);
  font-size: 1.25rem; color: var(--mji-teal);
  transition: transform var(--mji-dur-1) var(--mji-ease);
}
.mji-acc__item[open] > summary::after { content: "−"; }
.mji-acc__panel { padding-bottom: var(--mji-5); color: var(--mji-muted); }

.mji-table { width: 100%; border-collapse: collapse; font-size: var(--mji-fs-sm); }
.mji-table th, .mji-table td { text-align: left; padding: var(--mji-4) var(--mji-3);
                               border-bottom: 1px solid var(--mji-line); }
.mji-table th { font-size: var(--mji-fs-label);
                letter-spacing: var(--mji-tr-label);
                text-transform: uppercase; color: var(--mji-muted);
                font-weight: 500; }
.mji-table td { font-variant-numeric: tabular-nums; }
.mji-table-wrap { overflow-x: auto; }

.mji-steps { list-style: none; margin: 0; padding: 0;
             display: grid; gap: var(--mji-8); }
.mji-steps--row { grid-template-columns: repeat(4, 1fr); }
.mji-step__num { font-family: var(--mji-font-display);
                 font-size: var(--mji-fs-h2); line-height: 1;
                 color: var(--mji-teal); display: block;
                 margin-bottom: var(--mji-3); }


/* ==========================================================================
   8 · KOPF UND MOBILE LEISTE
   ========================================================================== */

.mji-header {
  position: sticky; top: 0; z-index: var(--mji-z-header);
  background: rgba(247,244,239,0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--mji-dur-2) var(--mji-ease),
              background var(--mji-dur-2) var(--mji-ease);
}
.mji-header[data-scrolled="true"] { border-bottom-color: var(--mji-line); }
.mji-header__inner { display: flex; align-items: center;
                     justify-content: space-between; gap: var(--mji-6);
                     min-height: 68px; }
.mji-header__logo img { height: 2.25rem; width: auto; }
.mji-nav { display: flex; gap: var(--mji-6); }
.mji-nav a { font-size: var(--mji-fs-sm); font-weight: 500;
             color: var(--mji-ink); text-decoration: none; }
.mji-nav a:hover, .mji-nav a[aria-current="page"] { color: var(--mji-teal-dark); }

/* Variante „Kapselleiste": schwebt frei über der Seite */
.mji-header--pill { background: transparent; backdrop-filter: none;
                    border: 0; padding-top: var(--mji-4); }
.mji-header--pill .mji-header__inner {
  background: var(--mji-surface); border: 1px solid var(--mji-line);
  border-radius: var(--mji-r-pill); box-shadow: var(--mji-sh-1);
  padding-inline: var(--mji-5); min-height: 60px;
}

.mji-burger { display: none; }

/* Feste Handy-Leiste unten — ersetzt die heutige Social-Icon-Leiste */
.mji-bar {
  position: fixed; inset: auto 0 0 0; z-index: var(--mji-z-bar);
  display: none; gap: var(--mji-2);
  padding: var(--mji-2) var(--mji-3)
           calc(var(--mji-2) + env(safe-area-inset-bottom));
  background: var(--mji-surface); border-top: 1px solid var(--mji-line);
}
.mji-bar .mji-btn { flex: 1; }


/* ==========================================================================
   9 · UMBRÜCHE
   Ein einziger Haupt-Breakpoint bei 48rem, ein Zwischenschritt bei 62rem.
   Jede Sektion definiert ihr Verhalten hier — nicht verstreut.
   ========================================================================== */

@media (max-width: 61.9375rem) {
  .mji-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .mji-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .mji-steps--row { grid-template-columns: repeat(2, 1fr); }
  .mji-grid--5-7, .mji-grid--7-5 { grid-template-columns: 1fr; }
  .mji-stats--overlap { margin-top: calc(-1 * var(--mji-8)); }
}

@media (max-width: 47.9375rem) {
  .mji-grid--2, .mji-grid--3, .mji-grid--4,
  .mji-steps--row { grid-template-columns: 1fr; }
  .mji-grid { gap: var(--mji-6); }
  .mji-nav { display: none; }
  .mji-burger { display: inline-flex; }
  .mji-bar { display: flex; }
  .mji { padding-bottom: 4.5rem; }        /* Platz für die feste Leiste */
  .mji-stats--overlap { margin-top: 0; }
  .mji-trust { gap: var(--mji-6); }
  .mji-trust__item img { height: 3.25rem; }
  .mji-header--pill .mji-header__inner { border-radius: var(--mji-r-lg); }
  /* Bilder werden auf dem Handy flacher, damit der Text schneller kommt */
  .mji-media--hero { aspect-ratio: var(--mji-ar-wide); }
  .mji-media--port { aspect-ratio: var(--mji-ar-square); }
}


/* ==========================================================================
   10 · BEWEGUNG
   Subtil: Mask-Reveal, Bild-Zoom, Text-Fade. Nichts fliegt.
   Startzustand ist immer SICHTBAR — kein opacity:0 ohne Skript.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .mji-reveal { animation: mji-rise var(--mji-dur-3) var(--mji-ease) both; }
  @keyframes mji-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mji *, .mji *::before, .mji *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   11 · DRUCK
   Gutachtenseiten werden ausgedruckt und weitergegeben.
   ========================================================================== */

@media print {
  .mji { background: #fff; color: #000; padding-bottom: 0; }
  .mji-header, .mji-bar, .mji-btn, .mji-nav, .mji-burger { display: none !important; }
  .mji-section { padding-block: 1rem; }
  .mji-card, .mji-stat { box-shadow: none; border: 1px solid #999; }
  .mji-section--navy { background: #fff !important; color: #000 !important; }
  .mji-acc__panel { display: block !important; }
  .mji a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}


/* ==========================================================================
   12 · THEMIFY-HINWEISE
   ==========================================================================
   · Die äußerste Hülle jeder Seite braucht die Klasse .mji — in Themify über
     Row > Options > Additional CSS Class, oder global über den Body-Tag.
   · Themify Ultra bringt eigene Abstände mit. In Row-Optionen Padding auf 0
     setzen und stattdessen .mji-section verwenden, sonst addieren sich die
     Werte und der Rhythmus bricht.
   · Für die Kennzahlenkarten das Counter-Addon nutzen, aber .mji-num als
     zusätzliche Klasse setzen, damit Schrift und Tabellenziffern stimmen.
   · Für den Aufklapper das native <details>-Markup verwenden, nicht das
     Accordion-Addon — <details> ist ohne JavaScript zugänglich und druckbar.
   · Bilder ausschließlich über die Medienflächen mit festem Seitenverhältnis
     einbinden (.mji-media--*), sonst springt das Layout beim Laden.
   · Google Fonts lokal hosten (Themify: Customize > Font > „Load fonts
     locally"), sonst DSGVO-Problem.
   ========================================================================= */


/* ── Logo ─────────────────────────────────────────────────────────────
   Querfassung MJI_Logo_Quer.svg, viewBox 0 0 945.2 171.4 (5,514:1).
   aspect-ratio ist Pflicht: ein inline-SVG ohne eigene viewBox hat keine
   Eigenproportion, width:auto fiele auf 300px zurueck und das Logo schwaemme
   mittig in Leerraum. Nicht entfernen.                                     */
.mji-logo svg,.mji-header__logo svg{height:2rem;width:auto;
  aspect-ratio:945.2/171.4;display:block}
@media(max-width:47.9375rem){.mji-logo svg,.mji-header__logo svg{height:1.5rem}}
/* Auf dunklem Grund einfarbig hell, Ziffern in Navy */
.mji-section--navy,.mji-footer--navy{--mji-logo-a:#FFFFFF;--mji-logo-b:#FFFFFF;
  --mji-logo-38:var(--mji-navy)}


/* ==========================================================================
   13 · WEBSITE-BAUSTEINE
   Ergänzung des Designsystems für die statische Website. Ausschließlich
   Tokens aus Abschnitt 1 – keine festen Farbwerte. Reihenfolge: Kopf,
   Mobilmenü, Hero, Inhaltsbausteine, Formular, Fuß.
   ========================================================================== */

/* ---- Wortmarke (Platzhalter, bis MJI_Logo_Quer.svg vorliegt) ------------ */
.mji-wordmark { display: inline-flex; align-items: baseline; gap: 0.42rem;
  font-family: var(--mji-font-display); font-size: 1.2rem; line-height: 1;
  color: var(--mji-ink); text-decoration: none; letter-spacing: -0.01em; }
.mji-wordmark b { font-weight: 400; }
.mji-wordmark i { font-style: normal; font-family: var(--mji-font-body);
  font-size: 0.62rem; font-weight: 600; letter-spacing: var(--mji-tr-label);
  text-transform: uppercase; color: var(--mji-muted); }
.mji-wordmark__mark { display: inline-grid; place-items: center;
  width: 1.85rem; height: 1.85rem; border-radius: var(--mji-r-sm);
  background: var(--mji-ci-blue); color: #fff;
  font-family: var(--mji-font-body); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0; align-self: center; }
.mji-footer--navy .mji-wordmark { color: var(--mji-on-navy); }
.mji-footer--navy .mji-wordmark i { color: var(--mji-on-navy-mute); }

/* ---- Kopfzeile ---------------------------------------------------------- */
.mji-header__actions { display: flex; align-items: center; gap: var(--mji-4); }
.mji-header__tel { font-size: var(--mji-fs-sm); font-weight: 600;
  color: var(--mji-ink); text-decoration: none; white-space: nowrap; }
.mji-header__tel:hover { color: var(--mji-teal-dark); }
@media (max-width: 61.9375rem) { .mji-header__actions .mji-btn { display: none; } }

/* ---- Mobilmenü: reines CSS über eine versteckte Checkbox ----------------
   Kein Framework, funktioniert ohne JavaScript. 100dvh mit vh-Fallback,
   damit die ein- und ausfahrende Adressleiste das Overlay nicht abschneidet. */
.mji-menu-state { position: absolute; opacity: 0; pointer-events: none; }
.mji-burger { align-items: center; justify-content: center; gap: 0.32rem;
  flex-direction: column; width: 46px; height: 46px; cursor: pointer;
  border: 1px solid var(--mji-line-strong); border-radius: var(--mji-r-sm);
  background: var(--mji-surface); }
.mji-burger span { display: block; width: 20px; height: 2px;
  background: var(--mji-ink); border-radius: 2px;
  transition: transform var(--mji-dur-1) var(--mji-ease),
              opacity var(--mji-dur-1) var(--mji-ease); }
.mji-menu-state:focus-visible + .mji-burger { outline: 2px solid var(--mji-focus);
  outline-offset: 3px; }
.mji-menu-state:checked ~ .mji-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mji-menu-state:checked ~ .mji-burger span:nth-child(2) { opacity: 0; }
.mji-menu-state:checked ~ .mji-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mji-mobilemenu { position: fixed; inset: 0; z-index: var(--mji-z-modal);
  display: none; height: 100vh; height: 100dvh; overflow-y: auto;
  background: var(--mji-navy); color: var(--mji-on-navy);
  padding: var(--mji-16) var(--mji-gutter) var(--mji-12); }
.mji-menu-state:checked ~ .mji-mobilemenu { display: block; }
.mji-mobilemenu a { display: block; padding: var(--mji-4) 0;
  border-bottom: 1px solid rgba(247,244,239,0.18);
  font-family: var(--mji-font-display); font-size: var(--mji-fs-h3);
  color: var(--mji-on-navy); text-decoration: none; }
.mji-mobilemenu a[aria-current="page"] { color: var(--mji-teal-light); }
.mji-mobilemenu__foot { margin-top: var(--mji-8); display: grid;
  gap: var(--mji-3); }
.mji-mobilemenu__meta { font-size: var(--mji-fs-sm);
  color: var(--mji-on-navy-mute); margin-top: var(--mji-6); }
.mji-mobilemenu__close { position: absolute; top: var(--mji-4);
  right: var(--mji-gutter); }

/* ---- Hero --------------------------------------------------------------- */
.mji-hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem)
                            clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.mji-hero h1 { max-width: 22ch; }
.mji-hero__lead { font-size: var(--mji-fs-lead); color: var(--mji-muted);
  max-width: 46ch; }
.mji-hero__cta { margin-top: var(--mji-8); }
.mji-hero__note { font-size: var(--mji-fs-sm); color: var(--mji-muted);
  margin-top: var(--mji-4); max-width: 52ch; }
.mji-hero--navy h1, .mji-hero--navy .mji-hero__lead,
.mji-hero--navy .mji-hero__note { color: var(--mji-on-navy); }
.mji-hero--navy .mji-hero__lead, .mji-hero--navy .mji-hero__note {
  color: var(--mji-on-navy-mute); }

/* ---- Vertrauensleiste als Textzeile ------------------------------------- */
.mji-proofline { display: flex; flex-wrap: wrap; gap: var(--mji-2) var(--mji-5);
  align-items: center; justify-content: center;
  font-size: var(--mji-fs-sm); color: var(--mji-muted); text-align: center; }
.mji-proofline > * { display: inline-flex; align-items: center; gap: var(--mji-2); }
.mji-proofline li { list-style: none; }
.mji-proofline ul { display: contents; }

/* ---- Anlasskarten / Bereichskarten ------------------------------------- */
.mji-tile { display: flex; flex-direction: column; gap: var(--mji-3);
  background: var(--mji-surface); border: 1px solid var(--mji-line);
  border-radius: var(--mji-r-lg); box-shadow: var(--mji-sh-1);
  padding: var(--mji-6); text-decoration: none; color: var(--mji-ink);
  transition: box-shadow var(--mji-dur-2) var(--mji-ease),
              transform var(--mji-dur-2) var(--mji-ease); }
.mji-tile:hover { box-shadow: var(--mji-sh-2); transform: translateY(-2px);
  color: var(--mji-ink); }
.mji-tile h3 { margin: 0; }
.mji-tile p { margin: 0; color: var(--mji-muted); font-size: var(--mji-fs-sm);
  max-width: none; }
.mji-tile__more { margin-top: auto; font-size: var(--mji-fs-sm);
  font-weight: 600; color: var(--mji-teal-dark); }
.mji-tile__more::after { content: " →"; }

/* ---- Liste mit Häkchen -------------------------------------------------- */
.mji-list { list-style: none; padding: 0; margin: 0 0 var(--mji-4);
  display: grid; gap: var(--mji-3); max-width: var(--mji-w-narrow); }
.mji-list li { position: relative; padding-left: 1.75rem; }
.mji-list li::before { content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  border: 2px solid var(--mji-teal); }
.mji-section--navy .mji-list li::before { border-color: var(--mji-teal-light); }

/* ---- Preis-/Stufenkarte ------------------------------------------------- */
.mji-tier { display: grid; gap: var(--mji-3); }
.mji-tier__price { font-family: var(--mji-font-display);
  font-size: var(--mji-fs-h3); color: var(--mji-teal-dark); }
.mji-tier__for { font-size: var(--mji-fs-sm); color: var(--mji-muted); }

/* ---- Platzhalter, sichtbar markiert ------------------------------------- */
.mji-todo { background: #FFF3D6; color: #6B4A00; border: 1px dashed #B8860B;
  border-radius: var(--mji-r-sm); padding: 0.05em 0.4em;
  font-family: var(--mji-font-body); font-size: 0.9em; font-weight: 600; }

/* ---- Formular ----------------------------------------------------------- */
.mji-form { background: var(--mji-surface); border: 1px solid var(--mji-line);
  border-radius: var(--mji-r-lg); box-shadow: var(--mji-sh-1);
  padding: var(--mji-8); }
.mji-form__grid { display: grid; gap: 0 var(--mji-5);
  grid-template-columns: 1fr 1fr; }
@media (max-width: 47.9375rem) { .mji-form__grid { grid-template-columns: 1fr; }
  .mji-form { padding: var(--mji-6); } }
.mji-form__full { grid-column: 1 / -1; }

/* ---- Fußzeile ----------------------------------------------------------- */
.mji-footer { background: var(--mji-navy); color: var(--mji-on-navy);
  padding-block: var(--mji-16) var(--mji-8); }
.mji-footer h2, .mji-footer h3 { color: var(--mji-on-navy); }
.mji-footer__grid { display: grid; gap: var(--mji-10);
  grid-template-columns: 1.4fr 1fr 1fr 1fr; }
@media (max-width: 61.9375rem) { .mji-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 47.9375rem) { .mji-footer__grid { grid-template-columns: 1fr; } }
.mji-footer__h { font-size: var(--mji-fs-label);
  letter-spacing: var(--mji-tr-label); text-transform: uppercase;
  color: var(--mji-teal-light); margin: 0 0 var(--mji-4); font-weight: 500; }
.mji-footer ul { list-style: none; margin: 0; padding: 0; display: grid;
  gap: var(--mji-3); }
.mji-footer a { color: var(--mji-on-navy); text-decoration: none;
  font-size: var(--mji-fs-sm); }
.mji-footer a:hover { color: var(--mji-teal-light);
  text-decoration: underline; }
.mji-footer p { color: var(--mji-on-navy-mute); font-size: var(--mji-fs-sm); }
.mji-footer__bottom { margin-top: var(--mji-12); padding-top: var(--mji-6);
  border-top: 1px solid rgba(247,244,239,0.18); display: flex;
  flex-wrap: wrap; gap: var(--mji-3) var(--mji-6);
  justify-content: space-between; align-items: center;
  font-size: var(--mji-fs-sm); color: var(--mji-on-navy-mute); }

/* ---- Rechtstexte -------------------------------------------------------- */
.mji-legal h2 { font-size: var(--mji-fs-h3); margin-top: var(--mji-10); }
.mji-legal h3 { font-size: var(--mji-fs-h4); margin-top: var(--mji-6); }
.mji-legal p, .mji-legal li { max-width: var(--mji-w-narrow); }
.mji-legal ul { padding-left: 1.25rem; display: grid; gap: var(--mji-2);
  margin-bottom: var(--mji-4); }

/* ---- Landingpages: kein Ausgang außer der Conversion -------------------- */
.mji-lp .mji-header__inner { justify-content: space-between; }
.mji-lp-foot { padding-block: var(--mji-8); background: var(--mji-paper-2);
  font-size: var(--mji-fs-sm); color: var(--mji-muted); text-align: center; }
.mji-lp-foot a { color: var(--mji-teal-dark); }

/* ---- Sprungmarken-Abstand unter dem klebenden Kopf --------------------- */
.mji [id] { scroll-margin-top: 5.5rem; }

/* ---- Nachträge 13b ------------------------------------------------------ */
/* E-Mail-Link: wird erst im Browser zu mailto: zusammengesetzt (Spamschutz) */
.mji-mail { color: var(--mji-teal-dark); text-decoration: underline;
  text-decoration-thickness: 1px; word-break: break-word; }
.mji-footer .mji-mail { color: var(--mji-on-navy); }
.mji-footer .mji-mail:hover { color: var(--mji-teal-light); }
/* Kacheln tragen je Seite h2 oder h3 – beide gleich behandeln */
.mji-tile h2, .mji-tile h3 { margin: 0; font-size: var(--mji-fs-h3);
  font-family: var(--mji-font-display); font-weight: 400; }
/* Rückmeldung nach dem Absenden (?ok=1 / ?fehler=1), per site.js eingeblendet */
.mji-flash { display: none; margin-bottom: var(--mji-6); }
.mji-flash[data-show="true"] { display: block; }