@media (max-width: 1023px) {
    .anmeldung {
        max-width: 32rem;
    }

    /* Schmal bestimmt nur die offene Seite die Kartenhöhe; zugang.js tauscht data-hoehe, wenn das Blatt alles verdeckt. */
    .zugang {
        --schraege: 12cqw;
        --rechts-ruht: 100cqw;
        --links-ruht: calc(-100cqw - 2 * var(--schraege));
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .zugang__seite[data-seite="einladung"] {
        grid-column: 1;
    }

    .zugang:not([data-hoehe="anmelden"]) [data-seite="anmelden"],
    .zugang:not([data-hoehe="einladung"]) [data-seite="einladung"],
    .zugang:not([data-hoehe="kennwort"]) [data-seite="kennwort"] {
        position: absolute;
        inset-inline: 0;
        top: 0;
    }

    .zugang__kopf {
        display: block;
        padding-inline: var(--space-6);
    }

    .zugang__inhalt {
        justify-content: flex-start;
        padding: var(--space-6);
    }

    .zugang__text {
        display: none;
    }

    .inhalt {
        padding: var(--space-4);
    }

    .seitenleiste__schliessen {
        display: flex;
    }

    .mit-skript .menue-ausloeser {
        display: flex;
    }

    [data-menue="offen"] .menue-schleier {
        display: block;
    }

    .anwendung {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
    }

    .inhalt {
        grid-column: 1;
        grid-row: 2;
    }

    /* Ohne Skript gibt es keinen Drawer: Die Leiste steht dann als gewöhnlicher Block über dem Inhalt. */
    .seitenleiste {
        position: static;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--divider-color);
    }

    .mit-skript .seitenleiste {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(20rem, 86vw);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform var(--duration-control), visibility 0s linear var(--duration-fade);
        z-index: 1002;
    }

    [data-menue="offen"] .seitenleiste {
        transform: none;
        visibility: visible;
        transition: transform var(--duration-control), visibility 0s linear 0s;
    }

    .seitenleiste {
        background: var(--bg-secondary);
        box-shadow: var(--shadow-lg);
    }

    .anwendung {
        position: relative;
    }

    .menue-ausloeser {
        grid-column: 1;
        grid-row: 1;
        z-index: 1001;
        margin: var(--space-2);
    }

    .dialogfenster {
        width: calc(100vw - 3rem);
    }

    .aktionsgruppe {
        justify-content: flex-end;
    }

  .kennzahl {
    flex: 1 1 calc((100% - 3 * var(--space-4)) / 4);
  }

  .modulkachel {
    min-width: calc(50% - var(--space-2));
  }
}

@media (max-width: 639px) {
    .zugang__kopf {
        padding-inline: var(--space-5);
    }

    .zugang__inhalt {
        padding: var(--space-5);
    }

    .dashboard-kacheln > * {
        grid-column: 1 / -1;
    }

    .kalender__raster {
        display: none;
    }

    .kalender__liste {
        display: block;
    }

    .kalender__kopf {
        flex-wrap: nowrap;
        gap: var(--space-2);
    }

    .kalender__monat {
        font-size: var(--font-size-lg);
    }

    .seitenkopf {
        flex-direction: column;
        align-items: stretch;
    }

    .seitenkopf__aktion {
        width: 100%;
    }

    .abschnittskopf {
        flex-direction: column;
        align-items: stretch;
    }

    .abschnittsaktion {
        width: 100%;
    }

  .zeile {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
  }

  .zeile__kuerzel {
    grid-column: 1;
    grid-row: 1;
  }

  .zeile__haupt {
    grid-column: 1;
    grid-row: 2;
  }

  .zeile__feld {
    grid-column: 1;
  }

  .zeile__feld--rechts {
    justify-content: flex-start;
  }

    .dialogfenster {
        width: 100vw;
        max-height: 100vh;
    }

    .dialogfenster {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        transform: none;
        top: 0;
        left: 0;
    }

    .dialogfenster__kopf {
        padding: var(--space-4);
    }

    .dialogfenster__inhalt {
        padding: var(--space-4);
    }

    .dialogfenster__aktionen {
        padding: var(--space-4);
    }

    .aktionsgruppe {
        flex-direction: column-reverse;
    }

    .aktionsgruppe .knopf {
        width: 100%;
    }

    .hilfe__inhalt {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding: var(--space-4);
    }

  .datentabelle--karten thead {
    display: none;
  }

  .datentabelle--karten tbody tr {
    display: block;
    border: 1px solid var(--divider-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    overflow: hidden;
  }

  .datentabelle--karten tbody tr:hover {
    background: transparent;
  }

  .datentabelle--karten tbody td {
    display: grid;
    grid-template-columns: minmax(10rem, 30%) 1fr;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--divider-color);
    background: var(--bg-elevated);
  }

  .datentabelle--karten tbody td:last-child {
    border-bottom: none;
  }

  .datentabelle--karten tbody td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
  }

  .datentabelle--karten tbody td:only-child {
    grid-template-columns: 1fr;
  }

  .datentabelle--karten tbody td:only-child::before {
    display: none;
  }

  .datentabelle--karten tbody th {
    display: none;
  }

  .datentabelle--karten tbody td[data-label]::after {
    content: '';
  }

  .datentabelle--karten .datentabelle__betrag {
    text-align: right;
  }

  .datentabelle--karten .sortierzeile--ziel-oben {
    border-top: 3px solid var(--accent);
    box-shadow: none;
  }

  .datentabelle--karten .sortierzeile--ziel-unten {
    border-bottom: 3px solid var(--accent);
    box-shadow: none;
  }

  .datenliste {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .datenliste dt {
    font-size: var(--font-size-sm);
  }

  .datenliste dd {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
  }

  .kennzahlen {
    flex-direction: column;
  }

  .kennzahl {
    flex: 1 1 100%;
    min-width: unset;
  }

  .datenliste {
    grid-template-columns: 1fr;
  }

  .systemstatus__zeile {
    flex-wrap: wrap;
  }

  .modulkachel {
    min-width: unset;
  }
}

@media (max-width: 479px) {
    .seitenkopf {
        padding: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .abschnittskopf {
        padding: var(--space-3);
        margin-bottom: var(--space-4);
    }

  .filterleiste {
    flex-direction: column;
  }

  .filterleiste__suche {
    flex: 1 1 100%;
  }

  .filterklappe {
    flex: 1 1 100%;
  }

  .filterklappe__tafel {
    left: 0;
    right: 0;
    width: 100%;
  }

  .monatswahl {
    flex: 0 1 auto;
  }

  .monatswahl__tafel {
    left: 50%;
    right: auto;
    width: 18rem;
    grid-template-columns: 1fr;
  }

  .monatswahl__jahre {
    height: calc(4 * var(--target-min) + 6px + var(--space-3));
    padding: var(--space-3) 0 0;
    border-left: 0;
    border-top: 1px solid var(--divider-color);
  }

    .knopf {
        font-size: var(--font-size-sm);
        padding: 0 var(--space-3);
    }

  .symbole-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }

  .dashboard-hinweis {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }

  .dashboard-hinweis__titel {
    font-size: var(--font-size-sm);
  }

  .dashboard-hinweis__beschreibung {
    font-size: var(--font-size-xs);
  }
}

/* CMS-Kacheln wie im SH-Halbleitershop: ab 36rem Breite der Übersicht zwei, ab 64rem drei nebeneinander */
@container (min-width: 36rem) {
    .cms-kacheln {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 64rem) {
    .cms-kacheln {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* CMS-Seiten wie im SH-Halbleitershop: @xl = 36rem, @4xl = 56rem, @5xl = 64rem Breite der Seite */
@container (min-width: 36rem) {
    .cms-mail__bausteine {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 56rem) {
    .cms-titel h1 {
        font-size: 30px;
        line-height: 1;
    }

    .cms-karte {
        padding: 1.75rem 2rem 2rem;
    }

    .cms-kopf {
        flex-wrap: nowrap;
        margin-bottom: 22px;
    }

    .cms-mail {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .cms-vorschau {
        grid-column-start: 2;
        padding: 1.25rem;
    }

    .cms-markdown__kopf {
        display: grid;
        grid-template-columns: 170px 1fr 1fr;
        gap: 1.5rem;
    }

    .cms-markdown__zeile {
        grid-template-columns: 170px 1fr 1fr;
        gap: 1.5rem;
    }
}

@container (min-width: 64rem) {
    .cms-mail {
        grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1.35fr);
    }

    .cms-mail--info {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .cms-vorschau {
        grid-column-start: auto;
    }

    .cms-mail__bausteine {
        grid-template-columns: minmax(0, 1fr);
    }

    .cms-info {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    }

    .cms-faelle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marke {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .marke__info--logo {
        grid-column: 1;
        grid-row: 1;
        padding-right: 2.5rem;
    }

    .marke__laden--logo {
        grid-column: 1;
        grid-row: 2;
        padding-right: 2.5rem;
    }

    .marke__info--icon {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        padding-top: 0;
        padding-left: 2.5rem;
        border-top: 0;
        border-left: 1px solid var(--divider-color);
    }

    .marke__laden--icon {
        grid-column: 2;
        grid-row: 2;
        padding-left: 2.5rem;
        border-left: 1px solid var(--divider-color);
    }
}