/* ============================================================================
   MeinMarkt365, Seitenlayout (Startseite und Marktseiten)
   Setzt mm365-tokens.css und mm365-components.css voraus.

   Regel: hier stehen NUR Anordnung und Abstaende. Jede Farbe kommt als Rolle
   aus den Tokens, damit der Dunkelmodus ohne Zutun stimmt.

   Ausnahme, bewusst und begruendet: die Buehne und der Preisblock sollen in
   BEIDEN Modi dunkel bleiben. Die Rolle --mm-bg-inverse kehrt sich im
   Dunkelmodus um und waere dort strahlend hell. Deshalb steht dort der
   Palettenton --mm-primary-950, der in beiden Modi derselbe ist.
   ========================================================================= */

/* Innenabstand zählt zur Breite und Höhe. Ohne diese Zeile rechnet der Browser
   das Padding OBEN DRAUF: eine Kachel mit height:100% wird dann um genau ihre
   zwei Innenabstände höher als ihre Rasterzelle und überlappt die nächste
   Reihe. Genau das ist hier passiert, und der Screenshot hatte recht, während
   eine zu grob angesetzte Messung es übersehen hat. */
*,*::before,*::after{box-sizing:border-box}

body{margin:0;background:var(--mm-bg);color:var(--mm-text);
     font-family:var(--mm-font-text);line-height:1.6;
     transition:background-color .25s ease,color .25s ease}
h1,h2,h3{font-family:var(--mm-font-display);line-height:1.2;margin:0}
a{color:var(--mm-text-link)}
img{max-width:100%;height:auto}

.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
.schmal{width:min(760px,100% - 2.5rem);margin-inline:auto}
@media (min-width:768px){ .wrap,.schmal{width:min(1120px,100% - 4rem)} }
@media (min-width:768px){ .schmal{width:min(820px,100% - 4rem)} }

/* --- Ankündigungsstreifen, die eine Gold-Fläche der Seite ---------------- */
.ansage{background:var(--mm-accent-400);color:var(--mm-neutral-950);
        font-weight:600;text-align:center;padding:.7rem 1rem;font-size:.95rem}

/* --- Kopfleiste ---------------------------------------------------------- */
.kopf{position:sticky;top:0;z-index:30;background:var(--mm-surface);
      border-bottom:1px solid var(--mm-border);padding:.7rem 0}
.kopf .wrap{display:flex;align-items:center;gap:.6rem}
.kopf .marke{display:flex;align-items:center;margin-right:auto}
.kopf img{height:32px;width:auto;display:block}
/* Im Dunkelmodus das helle Logo zeigen. Zwei Bilder, eines wird ausgeblendet,
   damit kein Umschalt-Flackern entsteht. */
.logo-dunkel{display:none}
:root[data-mm-theme="dark"] .logo-hell{display:none}
:root[data-mm-theme="dark"] .logo-dunkel{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-mm-theme="light"]) .logo-hell{display:none}
  :root:not([data-mm-theme="light"]) .logo-dunkel{display:block}
}
@media (max-width:26rem){ .kopf .beschriftung{display:none} }

/* --- Bühne --------------------------------------------------------------- */
/* Flach gehalten, damit die Bereiche ohne Scrollen ins erste Bild kommen. */
.buehne{background:var(--mm-primary-950);color:var(--mm-neutral-0);
        padding:clamp(2rem,6vw,4rem) 0;text-align:center}
.buehne .claim{font-family:var(--mm-font-display);font-weight:700;
               letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;
               color:var(--mm-accent-300);margin:0 0 .9rem}
.buehne h1{font-size:clamp(1.85rem,6vw,3.5rem);letter-spacing:-.02em;
           max-width:20ch;margin-inline:auto}
.buehne h1 b{color:var(--mm-accent-300);font-weight:700}
/* Eine Zeile, mehr nicht. Der frühere fünfzeilige Absatz hat erschlagen und
   die Bereiche aus dem ersten Bild gedrängt. */
.buehne .einzeiler{color:var(--mm-primary-200);
                   font-size:clamp(1.05rem,2.4vw,1.35rem);
                   margin:1.1rem auto 0}
.buehne .mm-actions{justify-content:center;flex-wrap:wrap}

/* --- Abschnitte ---------------------------------------------------------- */
section{padding:clamp(2.5rem,7vw,4.5rem) 0}
.mitte{text-align:center}
.titel{font-size:clamp(1.4rem,4vw,2.15rem);margin-bottom:.6rem}
.vorsatz{color:var(--mm-text-secondary);max-width:62ch;margin:0 auto 2rem}

/* Die Bereichs-Kachel (.mm-bereich) steht im Designsystem, in
   mm365-components.css. Hier stand am 01.08.2026 eine wortgleiche Kopie,
   die entfernt wurde: ein Bauteil, eine Quelle. */

/* --- Das Bento-Raster ---------------------------------------------------- */
/* Fünf echte Marktplätze groß, vier Vermittlungen kompakt darunter.
   Die Hierarchie ist die Botschaft: was man selbst einstellt, ist größer. */
.bento{display:grid;gap:.9rem;margin:0 0 .9rem;padding:0;list-style:none;
       grid-template-columns:1fr}
.bento-klein{display:grid;gap:.9rem;margin:0;padding:0;list-style:none;
             grid-template-columns:1fr}
@media (min-width:640px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento-klein{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  /* Sieben Spalten, zwei Zeilen. Wohnungen und Kleinanzeigen bekommen die
     Breite, Immobilien und Auto die Mitte, Handwerk die schmale Ecke. */
  .bento{grid-template-columns:repeat(7,1fr);
         grid-template-areas:"a a a b b c c"
                             "d d e e e e e"}
  .bento li:nth-child(1){grid-area:a}
  .bento li:nth-child(2){grid-area:b}
  .bento li:nth-child(3){grid-area:c}
  .bento li:nth-child(4){grid-area:d}
  .bento li:nth-child(5){grid-area:e}
  .bento-klein{grid-template-columns:repeat(4,1fr)}
}
/* Die Mindesthöhe gehört an die RASTERZEILE, nicht an die Kachel. Steht sie an
   der Kachel, ist die Zeile kleiner als ihr Inhalt und die nächste Reihe wird
   überlappt. Genau das ist beim ersten Anlauf passiert. */
.bento{grid-auto-rows:minmax(14rem,auto)}
.bento li,.bento-klein li{min-width:0;display:grid}
.bento .mm-bereich,.bento-klein .mm-bereich{min-height:0;height:100%}

/* --- Große Anzeige zum Preismodell --------------------------------------- */
.preis{background:var(--mm-primary-950);color:var(--mm-neutral-0);
       border-radius:var(--mm-radius-xl);padding:clamp(1.5rem,5vw,3rem);
       text-align:center}
.preis .kicker{color:var(--mm-accent-300);font-family:var(--mm-font-display);
               font-weight:700;letter-spacing:.08em;text-transform:uppercase;
               font-size:.8rem;margin:0}
.preis h2{font-size:clamp(1.55rem,5vw,2.85rem);margin:.7rem auto 1rem;max-width:20ch}
.preis h2 b{color:var(--mm-accent-300);font-weight:700}
.preis p{color:var(--mm-primary-200);max-width:60ch;margin:0 auto 1rem}
.spalten{display:grid;gap:1rem;margin-top:2.25rem;
         grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))}
.spalte{background:rgb(255 255 255 / .07);border-radius:var(--mm-radius-lg);
        padding:1.5rem 1.35rem;text-align:left}
.spalte h3{font-size:1.1rem;margin-bottom:1rem;color:var(--mm-accent-300)}
.punkte{display:grid;gap:.85rem;list-style:none;padding:0;margin:0;text-align:left}
.punkte li{display:flex;gap:.65rem;align-items:flex-start;
           color:var(--mm-primary-200);font-size:.98rem}
.punkte li b{color:var(--mm-neutral-0);font-weight:600}
.punkte svg{flex:0 0 auto;color:var(--mm-accent-300);margin-top:.2rem}

/* --- Domainliste --------------------------------------------------------- */
.domains{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;
         list-style:none;padding:0;margin:0}
.domains a{display:block;background:var(--mm-bg-subtle);
           border-radius:var(--mm-radius-sm);padding:.55rem .85rem;
           font-size:.9rem;color:var(--mm-text-secondary);text-decoration:none;
           transition:background-color .18s ease,color .18s ease}
.domains a:hover{background:var(--mm-action-subtle);color:var(--mm-action)}
.domains .haupt{background:var(--mm-action-subtle);color:var(--mm-action);font-weight:600}

/* --- Kontaktblock -------------------------------------------------------- */
.kontakt{border:1px solid var(--mm-border);border-radius:var(--mm-radius-xl);
         background:var(--mm-surface-2);padding:clamp(1.5rem,5vw,2.75rem);
         text-align:center}
.kontakt p{color:var(--mm-text-secondary);max-width:52ch;margin:.6rem auto 1.75rem}

/* --- Marktseiten --------------------------------------------------------- */
.markthero{padding:clamp(2rem,7vw,4rem) 0 clamp(1.5rem,4vw,2.5rem);text-align:center}
.marktzeichen{display:inline-flex;align-items:center;justify-content:center;
              width:64px;height:64px;border-radius:var(--mm-radius-lg);
              margin-bottom:1.1rem}
.markthero h1{font-size:clamp(1.8rem,5.5vw,3rem);letter-spacing:-.02em}
.markthero .lead{color:var(--mm-text-secondary);font-size:clamp(1.02rem,2.2vw,1.2rem);
                 max-width:58ch;margin:1rem auto 1.75rem}

.karten{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;
        list-style:none;padding:0;margin:0}
.karte-inhalt{flex:1 1 17rem;max-width:24rem;min-width:0;
              border:1px solid var(--mm-border);border-radius:var(--mm-radius-lg);
              background:var(--mm-surface);padding:1.5rem 1.4rem;text-align:left}
.karte-inhalt h3{font-size:1.08rem;margin-bottom:.5rem}
.karte-inhalt p{color:var(--mm-text-secondary);margin:0;font-size:.96rem}

.schritte{counter-reset:schritt;display:grid;gap:1rem;list-style:none;
          padding:0;margin:0;max-width:44rem;margin-inline:auto;text-align:left}
.schritte li{counter-increment:schritt;display:flex;gap:1rem;align-items:flex-start;
             background:var(--mm-surface);border:1px solid var(--mm-border);
             border-radius:var(--mm-radius-lg);padding:1.15rem 1.3rem}
.schritte li::before{content:counter(schritt);flex:0 0 auto;
                     width:32px;height:32px;border-radius:50%;
                     background:var(--mm-action-subtle);color:var(--mm-action);
                     font-family:var(--mm-font-display);font-weight:700;
                     display:flex;align-items:center;justify-content:center;
                     font-size:.95rem}
.schritte h3{font-size:1rem;margin-bottom:.2rem}
.schritte p{color:var(--mm-text-secondary);margin:0;font-size:.95rem}

.status{display:inline-flex;align-items:center;gap:.45rem;
        border-radius:var(--mm-radius-pill);padding:.4rem .9rem;
        font-size:.85rem;font-weight:600}
.status--aufbau{background:var(--mm-warning-50);color:var(--mm-warning-800)}
.status--bereit{background:var(--mm-success-50);color:var(--mm-success-800)}

/* --- Fuß ----------------------------------------------------------------- */
.fuss{border-top:1px solid var(--mm-border);background:var(--mm-bg-subtle);
      padding:2.25rem 0;font-size:.92rem;color:var(--mm-text-secondary);
      text-align:center}
.fuss nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.25rem;
          margin-bottom:.85rem}

/* --- Kontakt-Dialog ------------------------------------------------------ */
/* Aussehen, Abdunkelung und Bewegung kommen aus .mm-dialog / .mm-dialog__box
   im Designsystem. Hier steht nur, was dieser eine Dialog zusätzlich braucht:
   er ist lang, also darf er scrollen. */
.karte{position:relative;max-height:85vh;overflow-y:auto;overflow-x:hidden;
       text-align:left}
.karte__kopf{display:flex;align-items:flex-start;justify-content:space-between;
             gap:1rem}
.karte h2{font-size:1.35rem}
.karte__kopf p{color:var(--mm-text-secondary);font-size:.95rem;margin:.3rem 0 0}
.felder{display:grid;gap:1.1rem}
.felder .mm-field{display:grid;gap:.35rem}
.felder .mm-label{margin:0}
.felder .mm-hint{text-align:left;margin:0}
.wahl{display:grid;gap:.5rem;border:0;padding:0;margin:0}
textarea.mm-input{min-height:7rem;height:auto;padding:.7rem .85rem;resize:vertical}
/* Unsichtbar, aber OHNE Verschiebung nach links: ein left:-9999px erzeugt im
   Dialog eine Überbreite und damit einen waagerechten Scrollbalken. */
.honig{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
       overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rechtshinweis{font-size:.85rem;color:var(--mm-text-muted);margin:0}
.meldung{border-radius:var(--mm-radius-md);padding:.85rem 1rem;margin:0 0 1.25rem;
         font-size:.95rem}
.meldung--ok{background:var(--mm-success-50);color:var(--mm-success-800)}
.meldung--fehler{background:var(--mm-danger-50);color:var(--mm-danger-800)}

/* --- Nur für Vorlesesoftware --------------------------------------------- */
/* Sichtbar versteckt, ohne Verschiebung nach links: ein left:-9999px erzeugt
   sonst eine Überbreite und damit einen waagerechten Scrollbalken. */
.mm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
       overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Farbmodus-Schalter in der Kopfleiste -------------------------------- */
/* Es wird das fertige .mm-theme aus dem Designsystem benutzt (drei Icon-Knöpfe
   in einer Pille, 40 x 34 px). Hier steht nur die Position. Der frühere eigene
   Segment-Schalter war doppelt so breit und hat die Marke weggedrängt. */
.kopf .mm-theme{flex:0 0 auto;margin-left:auto}

/* --- Bewegung ------------------------------------------------------------ */
/* Eintritt beim Scrollen, Staffelung und Overlays kommen vollständig aus
   mm365-motion.css und mm365-components.css. Hier nur das, was zu diesen
   Seiten gehört. */
@media (prefers-reduced-motion:reduce){
  .markt a:hover{transform:none}
  body{transition:none}
}