/* ===========================================================================
   Bauplan der Modulseiten — /webmodule und /portal
   ===========================================================================
   Beide Seiten sind gleich aufgebaut: Abschnitte mit Erklaertext, Screenshot
   und Lupe. Frueher lagen diese Regeln in beiden Seiten doppelt im Quelltext.
   =========================================================================== */

/* Demo-Toast für Platzhalter-Links */

.mm-demo-toast {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%) translateY(8px);
      background: #1e293b; color: #fff;
      padding: 14px 22px; border-radius: 10px;
      box-shadow: 0 6px 24px rgba(0,0,0,0.25);
      font-size: 0.95rem; font-weight: 500;
      z-index: 99999; opacity: 0;
      transition: opacity 0.2s ease, transform 0.2s ease;
      pointer-events: none; max-width: 90vw; text-align: center;
    }

.mm-demo-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Numbered section headings — Optik wie elemis terms.html */

.doc-section { padding-top: 60px; padding-bottom: 16px; }

.doc-section:first-child { padding-top: 0; }

.doc-section h2 {
      font-size: 1.6rem; font-weight: 700;
      margin-bottom: 1rem; color: #1e293b;
    }

.doc-section h3 {
      font-size: 1.15rem; font-weight: 600;
      margin: 1.8rem 0 .6rem; color: #1e293b;
    }

.doc-section p { margin-bottom: 1rem; line-height: 1.7; color: #475569; }

.doc-section ul { margin-bottom: 1rem; padding-left: 1.4rem; line-height: 1.7; color: #475569; }

.doc-section ul li { margin-bottom: .25rem; }

/* Code/Snippet Styling */

.doc-snippet {
      background: #1e293b; color: #e2e8f0;
      padding: 1rem 1.2rem; border-radius: 8px;
      font-family: "SFMono-Regular", "Consolas", monospace;
      font-size: .85rem; line-height: 1.6;
      overflow-x: auto; margin-bottom: 1.5rem;
    }

.doc-snippet .tag { color: #f97583; }

.doc-snippet .attr { color: #79c0ff; }

.doc-snippet .str { color: #a5d6ff; }

/* Info-Callout */

.doc-callout {
      border-left: 4px solid #e55b13;
      background: #fff8f0;
      padding: 1rem 1.2rem;
      border-radius: 4px;
      margin: 1.5rem 0;
    }

.doc-callout strong { color: #1e293b; }

/* ===== Merkmal-Raster (drei Punkte nebeneinander) ====================*/

.merkmal-raster h3 { margin-top: 0 !important; margin-bottom: .6rem !important; }

.merkmal-raster p { max-width: none; }

.merkmal-raster .icon-svg { display: block; }

/* Ueberschrift vierter Ebene in den Icon-Spalten: eine Stufe unter h3 */

main#content .merkmal-raster h4,
    main#content #sec-abc .merkmal-raster h3 {
      font-size: .9rem;
      font-weight: 600;
      line-height: 1.4;
      color: #1e293b;
      margin: 0 0 .5rem;
    }

/* ===== Inhaltsbreite ==================================================
       Die ersten drei Sektionen (Kopfbereich, Modulkarten, Ueberblick)
       behalten die volle Theme-Breite. Ab dem Kalenderportal ist der
       Inhalt auf 999 px eingerueckt, damit die langen Lesestrecken
       ruhiger stehen. ====================================================*/

main#content .inhalt-schmal .container { max-width: 1120px; }

/* ===== Gliederung innerhalb eines Moduls ============================
       Leitet die Funktionsbloecke ein und setzt sie vom Ausprobier-Teil
       darueber ab. Etwas groesser als die Bloecktitel darunter. =========*/

main#content .gliederung-titel {
      font-size: 1.15rem !important;
      font-weight: 700 !important;
      color: #1e293b;
      margin: 3.2rem 0 1.6rem !important;
      padding-top: 2rem;
      border-top: 1px solid #e2e8f0;
    }

/* ===== Kopf eines Modulabschnitts ====================================
       Ohne Nummerierung: die Reihenfolge ergibt sich aus der Abfolge der
       Abschnitte. Der Modulname traegt den Abschnitt allein und bekommt
       dafuer mehr Gewicht und eine Akzentlinie. ==========================*/

.modul-kopf {
      margin-bottom: 2.6rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid #e2e8f0;
    }

.modul-kopf::before {
      content: "";
      display: block;
      width: 46px;
      height: 3px;
      border-radius: 2px;
      background: #f78b77;
      margin-bottom: 0.66rem;
    }

.modul-kopf-text h2 {
      font-size: 1.85rem !important;
      font-weight: 700 !important;
      letter-spacing: -.01em;
      line-height: 1.2 !important;
      margin: 0 0 .6rem !important;
    }

.modul-kurz {
      color: #475569;
      max-width: 32rem;
      font-size: .95rem;
    }

@media (max-width: 575.98px) {
      .modul-kopf { margin-bottom: 2rem; padding-bottom: 1.3rem; }
      .modul-kopf::before { width: 38px; margin-bottom: .9rem; }
      .modul-kopf-text h2 { font-size: 1.5rem !important; }
    }

/* ===== Demo zuerst =====================================================
       Das lauffaehige Modul steht am Anfang jedes Kapitels, nicht am Ende.
       Farben aus der Slate-Palette dieses Style-Blocks. ====================*/

.demo-zuerst {
      margin-top: 3rem;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 20px 20px 22px;
      margin-bottom: 2.2rem;
    }

.demo-zuerst .demo-titel {
      display: flex; align-items: center; gap: 9px;
      font-size: 1.05rem; font-weight: 700;
      margin: 0 0 .45rem; color: #1e293b;
    }

.demo-zuerst .demo-titel::before {
      content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%;
      background: #16a34a;
      box-shadow: 0 0 0 3px rgba(22,163,74,.18);
    }

.demo-zuerst .demo-hinweis {
      font-size: .95rem; line-height: 1.6; color: #475569;
      margin: 0 0 1rem;
    }

.demo-zuerst .doc-demo { margin: 0; }

@media (max-width: 575.98px) {
      .demo-zuerst { padding: 15px 14px 16px; border-radius: 8px; }
    }

/* ===== Screenshots: klickbar zum Vergroessern ==========================*/

.bild-lupe-btn {
      position: relative; display: block; width: 100%;
      padding: 0; border: 0; background: 0 0; cursor: zoom-in;
      border-radius: 8px; overflow: hidden;
      line-height: 0;
    }

.bild-lupe-btn img { display: block; width: 100%; height: auto; border-radius: 8px; }

.bild-lupe {
      position: absolute; right: 8px; bottom: 8px;
      width: 30px; height: 30px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(30,41,59,.82); color: #fff;
      font-size: .9rem; line-height: 1;
      opacity: 0; transform: translateY(4px);
      transition: opacity .15s ease, transform .15s ease;
    }

.bild-lupe-btn:hover .bild-lupe,
    .bild-lupe-btn:focus-visible .bild-lupe { opacity: 1; transform: translateY(0); }

/* Abbildungen, die im Raster oder in Reitern stehen: Groesse unveraendert */

.bild-klickbar { border-radius: 8px; }

.bild-klickbar figcaption { text-align: center; color: #475569; }

/* Einzelne Screenshots als kompakter Thumbnail mit Bildtext daneben */

.bild-kompakt {
      display: grid;
      grid-template-columns: 288px minmax(0, 1fr);
      gap: 1.1rem;
      align-items: center;
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 14px 16px;
    }

.bild-kompakt .bild-lupe-btn { box-shadow: 0 2px 10px rgba(30,41,59,.10); }

.bild-kompakt .bild-lupe-btn img { max-height: 205px; object-fit: cover; object-position: top; }

.bild-kompakt-text {
      font-size: .95rem; line-height: 1.55; color: #475569; margin: 0;
    }

.bild-hinweis {
      display: block; margin-top: .3rem;
      font-size: .8rem; color: #94a3b8;
    }

@media (max-width: 575.98px) {
      .bild-kompakt { grid-template-columns: 1fr; gap: .8rem; }
      .bild-kompakt .bild-lupe-btn img { max-height: 190px; }
    }

/* Bild im Modal nicht ueber die Bildschirmhoehe hinaus */

#bildModal .modal-body img { max-height: 78vh; width: auto; max-width: 100%; }

/* ===== Zentrierter Sektionskopf ======================================*/

.sektion-kopf {
      max-width: 40rem;
      margin: 0 auto 3rem;
      text-align: center;
    }

.sektion-kopf h2 { margin-bottom: .9rem; }

.sektion-kopf .lead { max-width: none; }

/* Zwei gleichrangige Punkte nebeneinander statt untereinander in der
       linken Spalte. Ohne Kasten, damit die Sektion luftig bleibt. */

.merkmal-paar h3 { margin-top: 0 !important; margin-bottom: .7rem !important; }

.merkmal-paar p { max-width: 28rem; }

.merkmal-paar .icon-svg { display: block; }

@media (max-width: 767.98px) {
      .sektion-kopf { margin-bottom: 2.2rem; }
      .merkmal-paar p { max-width: none; }
    }

/* Abschnitte im Detailbereich voneinander loesen */

main#content .doc-section { padding-top: 0; padding-bottom: 2.2rem; }

main#content .doc-section:last-child { padding-bottom: 0; }

/* Der Demo-Block bekommt Raum, er ist das Herzstueck */

main#content .demo-zuerst { padding: 1.6rem 1.5rem 1.7rem; margin: 3rem 0 2.6rem; }

main#content .demo-zuerst .demo-hinweis { margin-bottom: 1.3rem; }

/* Fliesstext */

main#content .doc-section ul { margin-bottom: 1.4rem; }

main#content .doc-section ul li { margin-bottom: .45rem; }

/* Ueberschriften brauchen Vorlauf und Nachlauf */

main#content .doc-section > h2 { margin-bottom: 1.3rem; }

main#content .doc-section h3:first-child { margin-top: 0; }

main#content .demo-zuerst .demo-titel { margin: 0 0 .6rem; }

/* Inhaltskarten innerhalb der Module */

main#content .content-card { margin-bottom: 2rem; }

main#content .content-card:last-child { margin-bottom: 0; }

/* Abbildungen */

main#content figure { margin-top: 1.6rem; margin-bottom: 1.6rem; }

main#content .bild-kompakt { padding: 1.1rem 1.2rem; margin: 1.6rem 0; gap: 1.4rem; }

/* Modulkarten in der Uebersicht */

main#content .teaser-body { padding: 1.6rem 1.5rem 1.7rem; }

main#content .modul-karte-kopf { margin-bottom: .8rem; }

main#content .modul-karte-punkte { margin-bottom: 1.3rem; }

main#content .modul-karte-punkte li { margin-bottom: .45rem; }

main#content .modul-karte .teaser-body p { margin-bottom: 1.1rem; }

/* Naechster Schritt */

main#content .kontakt-wege { margin-top: 2rem; gap: .9rem; }

/* Kopfbereich */

main#content .hero-fakten { gap: .7rem; }

main#content .hero-fakten li { line-height: 1.6; }

/* ===== Kontaktwege am Seitenende ====================================*/

.kontakt-wege {
      display: flex;
      flex-wrap: wrap;
      gap: .7rem;
    }

.kontakt-wege .btn i { margin-right: .35rem; }

@media (max-width: 575.98px) {
      .kontakt-wege .btn { width: 100%; justify-content: center; }
    }

/* ===== Modulkarte: Ausrichtung und Textfarbe =========================
       Zwei Altlasten der frueheren Teaser-Karten:
       - .teaser-body war zentriert; das passte zu Titel plus Kurzsatz,
         mit Merkmalsliste zerfaellt es.
       - Die Karte steckt in einem Link-Element. Die alten Elemente hatten
         Farben, die neuen Listeneintraege erbten die Linkfarbe und
         erschienen orange. ================================================*/

main#content .modul-karte .teaser-body { text-align: left; }

main#content .modul-karte .teaser-body h3 { color: #1e293b; }

main#content .modul-karte .teaser-body p,
    main#content .modul-karte .modul-karte-punkte li,
    main#content .modul-karte .modul-karte-punkte li span { color: #475569; }

main#content .modul-karte .modul-karte-punkte li {
      display: flex;
      align-items: flex-start;
      gap: .1rem;
      text-align: left;
    }

/* ===== Modulkarte: Bild, Einordnung und Merkmale in einer Karte ======
       Ersetzt die frueheren zwei Abschnitte, die dieselben vier Module
       nacheinander als Teaser und als Paketkarte zeigten. ================*/

.modul-karte { height: 100%; display: flex; flex-direction: column; }

.modul-karte .teaser-body { flex: 1 1 auto; display: flex; flex-direction: column; }

.modul-karte-kopf {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      margin-bottom: .55rem;
    }

.modul-karte-punkte { margin: 0 0 1rem; flex: 1 1 auto; }

.modul-karte-punkte li { margin-bottom: .3rem; }

.modul-karte-punkte li:last-child { margin-bottom: 0; }

.modul-karte .teaser-link { margin-top: auto; }

/* ===== Kernpunkte im Kopfbereich =====================================*/

.hero-fakten {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: .5rem;
    }

.hero-fakten li {
      display: flex;
      align-items: flex-start;
      gap: .6rem;
      font-size: .85rem;
      line-height: 1.5;
      color: #475569;
    }

.hero-fakten i {
      flex: 0 0 auto;
      font-size: 1.05rem;
      line-height: 1.35;
      color: #16a34a;
    }

@media (max-width: 991.98px) {
      .hero-fakten { align-items: center; }
      .hero-fakten li { text-align: left; }
    }

/* ===== Produktschau im Kopfbereich ===================================*/

.hero-schau img {
      box-shadow: 0 18px 50px rgba(30, 41, 59, .16);
      border: 1px solid #e2e8f0;
    }

/* Grundstufe: alles Laufende im Inhaltsbereich auf eine Groesse ziehen,
       danach gezielt hochstufen. Raeumt die vielen Theme-Zwischengroessen
       (fs-14, fs-15, fs-17, lead, mb-0 ...) in einem Schritt auf. */

main#content .doc-section,
    main#content .doc-section p,
    main#content .doc-section li,
    main#content .doc-section span,
    main#content .doc-section div,
    main#content .doc-section address,
    main#content .teaser-body p,
    main#content .card-body p,
    main#content .card-body li,
    main#content .card-body span {
      font-size: .85rem;      /* 17px */
      font-weight: 400;
      line-height: 1.72;
    }

/* 1 Seitentitel */

main#content h1.display-2 { font-size: 2.2rem; font-weight: 700; line-height: 1.14; }

/* 2 Abschnitt */

main#content h2.display-5,
    main#content .doc-section > h2 { font-size: 1.45rem; font-weight: 700; line-height: 1.28; }

/* 3 Modulname */

main#content .modul-titel { font-size: 1.15rem; font-weight: 700; line-height: 1.32; }

/* 4 Unterabschnitt */

main#content .doc-section h3,
    main#content .doc-section h3.h4,
    main#content .doc-section h3.h5,
    main#content .demo-zuerst .demo-titel,
    main#content .teaser-body h3 {
      font-size: .95rem; font-weight: 600; line-height: 1.4;
      margin: 2.1rem 0 .8rem;
    }

main#content .demo-zuerst .demo-titel { margin: 0 0 .4rem; }

/* 5 Einleitung */

main#content .lead,
    main#content .modul-kurz { font-size: .95rem; font-weight: 400; line-height: 1.6; }

/* 7 Nebentext: Bildtexte, Hinweise, Tabellenzellen */

main#content figcaption,
    main#content figcaption span,
    main#content .bild-kompakt-text,
    main#content .bild-kompakt-text span,
    main#content .alert,
    main#content .alert span,
    main#content .demo-hinweis { font-size: .75rem; font-weight: 400; line-height: 1.55; }

main#content .bild-hinweis { font-size: .65rem; font-weight: 400; }

/* Betonte Kleinteile */

main#content .badge { font-size: .65rem; font-weight: 600; }

main#content .teaser-link { font-size: .8rem; font-weight: 600; }

main#content .btn { font-size: .8rem; font-weight: 700; }

main#content .doc-section strong,
    main#content .doc-section b { font-weight: 600; }

main#content .doc-section p { margin-bottom: 1.15rem; }

/* Karten der Paket-Uebersicht: liegen ausserhalb von .doc-section und
       brauchen die Stufen deshalb eigens. */

main#content .card-body h3,
    main#content .card-body h3.h4,
    main#content .card-body h3.h5 { font-size: .95rem; font-weight: 600; line-height: 1.4; }

main#content .card-body .icon-list li,
    main#content .card-body p { font-size: .75rem; font-weight: 400; }

main#content .fs-15,
    main#content .fs-14,
    main#content .fs-13 { font-weight: 400; }

main#content .doc-section .fw-bold,
    main#content .card-body .fw-bold { font-weight: 600 !important; }

/* ===== Lesebreite ======================================================
       Ohne die linke Navigation liefen Textzeilen ueber 130 Zeichen.
       Laufender Text wird begrenzt, Abbildungen, Tabellen und die Demos
       nutzen die volle Breite. =============================================*/

.doc-demo {
      margin: 1.5rem 0;
      border-radius: 10px; overflow: hidden;
      border: 1px solid rgba(0,0,0,0.08);
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    }

/* Content-Card: bündelt h3 + zugehörige Texte/Bilder zu einem
       optisch klar abgegrenzten Block. Macht lange Sektionen (Kalender,
       Formulare) leichter scannbar. */

.content-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 24px 28px;
      margin: 1.5rem 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.03);
    }

.content-card h3:first-child {
      margin-top: 0;
    }

.content-card > :last-child {
      margin-bottom: 0;
    }

@media (max-width: 576px) {
      .content-card { padding: 18px 20px; }
    }

/* Teaser-Cards oben — 4 Bausteine als visuelle Einstiegspunkte
       (Abfallkalender, Abfall-ABC, Standortkarte, Formulare). Layout
       angelehnt an moin.ai/features. */

.teaser-card {
      background: #fff;
      border-radius: 14px;
      box-shadow: 0 4px 14px rgba(0,0,0,.05);
      overflow: hidden;
      height: 100%;
      transition: transform .2s ease, box-shadow .2s ease;
    }

.teaser-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 28px rgba(0,0,0,.1);
    }

.teaser-image {
      background: #fff7ed;
      padding: 28px 22px 0;
      height: 220px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
    }

.teaser-image img {
      width: auto;
      height: auto;
      max-width: max-content;
      max-height: 100%;
      border-radius: 8px 8px 0 0;
      box-shadow: 0 -4px 16px rgba(0,0,0,.08);
      object-fit: cover;
      object-position: top;
    }

.teaser-body {
      padding: 24px 22px;
      text-align: center;
    }

.teaser-body h4 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1e293b;
      margin: 0 0 10px;
    }

.teaser-body p {
      font-size: .92rem;
      color: #64748b;
      line-height: 1.55;
      margin: 0 0 16px;
    }

.teaser-link {
      color: #e55b13;
      font-weight: 600;
      font-size: .92rem;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: gap .15s ease;
    }

.teaser-link:hover {
      color: #c2410c;
      text-decoration: none;
      gap: 8px;
    }

/* ===== Modulkopf laeuft mit =========================================
       Bei einem Modul, das ueber mehrere Bildschirmhoehen laeuft, verliert
       man sonst aus dem Blick, worum es gerade geht. Der Kopf bleibt
       deshalb oben stehen, bis der naechste Abschnitt ihn hinausschiebt.
       Das macht der Browser von selbst, weil jeder Kopf in seinem eigenen
       Abschnitt liegt.

       Drei Dinge, an denen ein erster Versuch gescheitert ist:

       1. Das gehoert an .modul-kopf, nicht an die Ueberschrift darin. Ein
          haftendes Element bleibt nur innerhalb seines Elternteils stehen —
          die Ueberschrift waere nach den 177 Pixeln des Kopfes wieder mit
          hinausgescrollt.

       2. Der Abstand nach oben muss die Leiste freihalten. Sie steht beim
          Scrollen fest und liegt mit z-index 1020 darueber; ohne Abstand
          verschwindet der Kopf dahinter. 78 Pixel — ihre Hoehe im
          festgestellten Zustand, am fertigen Bild abgenommen.

       3. Kein Ein- und Ausklappen beim Kleben. Das aendert die Hoehe, die
          geaenderte Hoehe loest die Beobachtung erneut aus, und der Kopf
          flackert. Der Kopf bleibt jetzt immer gleich hoch.
   =================================================================== */
main#content .modul-kopf {
  position: sticky;
  top: 78px;
  z-index: 3;
}

/* Der Grund muss deckend sein, sonst scrollt der Text sichtbar hindurch —
   und er muss zur Sektion passen. /webmodule steht auf grau, /portal auf
   weiss. Deshalb je Sektionsart eine Angabe statt einer festen Farbe. */
main#content .bg-gray .modul-kopf     { background-color: #f6f7f9; }
main#content .bg-white .modul-kopf    { background-color: #ffffff; }
main#content .bg-light .modul-kopf    { background-color: #f6f7f9; }

/* Auf kleinen Geraeten nimmt ein mitlaufender Kopf zu viel vom ohnehin
   knappen Platz, und die Leiste steht dort anders. */
@media (max-width: 991.98px) {
  main#content .modul-kopf {
    position: static;
    background-color: transparent;
  }
}