/* ==========================================================================
   Öffentliche Verzeichnis-Seiten: EIN Baukasten für Lehrkraftprofil
   (/u/<slug>) und Schulprofil (/schule/<slug>) – später auch die Galerie.
   (Neubewertung 02.10.2026, docs/neubewertung_oeffentliche_seiten_2026-10-02.html)

   Linie: ruhig und flach. Weiße Kopfkarte, normale fette Schrift, EINE Farbe
   (die Marke), eine Werkzeugzeile, dieselben Kacheln. Keine Farbflächen, keine
   Muster, keine extrafette Schrift.
   ⚠️ font-weight nie über 700: „Inter" ist nur benannt, nicht eingebunden –
   Windows nimmt Arial, und 800 wird dort zu „Arial Black" (Plakatschrift).

   Präfix is- („Inhaltsseite") statt neuer Tailwind-Klassen: Tailwind ist
   vorkompiliert. Eingebunden über die Makros in templates/_inhaltsseite.html –
   dort steht auch der Cache-Buster (CSS und JS gemeinsam hochzählen).
   Verhalten: static/js/inhaltsseite.js.
   ========================================================================== */
.is-seite, .is-farben {
    --is-marke: #006C84;
    --is-marke-tief: #004e60;
    --is-marke-hell: #6EB0BC;
    --is-tinte: #1e293b;
    --is-tinte-2: #475569;
    --is-leise: #64748b;
    --is-linie: #e2e8f0;
}
.is-seite { max-width: 80rem; margin: 0 auto; padding: 14px 14px 48px; }
@media (min-width: 640px) { .is-seite { padding: 22px 24px 56px; } }
/* [hidden] muss gewinnen: .is-knopf u. a. setzen display und stehen in der
   Kaskade hinter Tailwinds [hidden]-Regel – „Link verschicken" war sonst auch
   dort sichtbar, wo der Browser nichts verschicken kann. */
.is-seite [hidden], .is-farben [hidden] { display: none !important; }
/* Rückmeldungen („Link kopiert!") über dem Fenster zeigen, nicht darunter */
#toast { z-index: 70; }
.is-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Hinweisbalken (Vorschau, „dein Profil") ───────────────────────────── */
.is-hinweis {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
    border-radius: 12px; padding: 10px 14px; margin-bottom: 14px;
    font-size: 14px; line-height: 1.45;
    background: #f1f5f9; border: 1px solid var(--is-linie); color: var(--is-tinte-2);
}
.is-hinweis.warn { background: #fffbeb; border-color: #fde68a; color: #78350f; }
.is-hinweis b { color: var(--is-tinte); font-weight: 700; }
.is-hinweis.warn b { color: #78350f; }
.is-hinweis-text { flex: 1 1 260px; min-width: 0; }
.is-mini {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
    font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 10px;
    background: #fff; border: 1px solid #cbd5e1; color: var(--is-tinte-2); text-decoration: none;
}
.is-mini:hover { border-color: var(--is-marke); color: var(--is-marke); }
.is-hinweis.warn .is-mini { border-color: #fcd34d; color: #78350f; }

/* ── Kopf ──────────────────────────────────────────────────────────────── */
.is-kopf {
    background: #fff; border: 1px solid var(--is-linie); border-radius: 14px;
    padding: 16px; margin-bottom: 14px;
    display: grid; column-gap: 14px; row-gap: 10px; align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "bild wer" "text text" "akt akt";
}
.is-kopf > * { min-width: 0; }
.is-bild {
    grid-area: bild; width: 56px; height: 56px; flex: none; object-fit: cover;
    background: var(--is-marke); color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 22px; font-weight: 700;
}
.is-bild.rund { border-radius: 50%; }
.is-bild.eck { border-radius: 12px; }
.is-bild.logo { background: #fff; border: 1px solid var(--is-linie); object-fit: contain; padding: 3px; }
.is-wer { grid-area: wer; }
.is-name { margin: 0 0 2px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--is-tinte); overflow-wrap: anywhere; }
.is-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 13.5px; color: var(--is-leise); }
.is-meta > span, .is-meta > a { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.is-meta a { color: var(--is-leise); text-decoration: none; }
.is-meta a:hover { color: var(--is-marke); text-decoration: underline; }
.is-meta b { color: var(--is-tinte-2); font-weight: 700; }
.is-bestaetigt { color: var(--is-marke); }
.is-gut { color: #15803d; font-weight: 700; }
.is-textbereich { grid-area: text; }
.is-text {
    margin: 0; max-width: 74ch; white-space: pre-line; overflow-wrap: anywhere;
    color: var(--is-tinte-2); font-size: 14.5px; line-height: 1.5;
}
/* Drei Zeilen: am Rechner passt der Text (bis 240 Zeichen) immer ganz hinein,
   am Handy steht der Rest hinter „Mehr anzeigen". */
.is-text.is-zu { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.is-mehr { background: none; border: 0; padding: 2px 0 0; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--is-marke); }
.is-mehr:hover { text-decoration: underline; }
.is-aktionen { grid-area: akt; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.is-aktionen .is-knopf { margin-left: auto; }
.is-knopf {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap;
    font-size: 13.5px; font-weight: 700; line-height: 1; padding: 10px 14px; border-radius: 10px;
    background: #fff; color: var(--is-marke); border: 1px solid #cbd5e1; text-decoration: none;
}
.is-knopf:hover { border-color: var(--is-marke); background: #f8fafc; }
.is-knopf.voll { background: var(--is-marke); border-color: var(--is-marke); color: #fff; }
.is-knopf.voll:hover { background: var(--is-marke-tief); border-color: var(--is-marke-tief); }
/* kleine Kanal-Knöpfe: Symbol, bei der Website mit Adresse */
.is-kanal {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; min-width: 36px; padding: 0 10px;
    justify-content: center; border-radius: 10px; border: 1px solid var(--is-linie); background: #fff;
    color: var(--is-leise); text-decoration: none; font-size: 13px; max-width: 220px;
}
.is-kanal span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-kanal:hover { border-color: var(--is-marke); color: var(--is-marke); }
.is-knopf:focus-visible, .is-mini:focus-visible, .is-kanal:focus-visible, .is-chip:focus-visible,
.is-suche input:focus-visible, .is-wahl summary:focus-visible, .is-wahl-liste a:focus-visible,
.is-umschalter button:focus-visible {
    outline: 3px solid var(--is-marke-hell); outline-offset: 2px;
}
@media (min-width: 768px) {
    .is-kopf {
        padding: 18px 20px; column-gap: 16px; row-gap: 8px; align-items: start;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "bild wer akt" "bild text text";
    }
    .is-bild { width: 72px; height: 72px; font-size: 28px; }
    .is-name { font-size: 22px; }
    .is-aktionen { flex-wrap: nowrap; }
    .is-aktionen .is-knopf { margin-left: 0; }
}

/* ── „Von Schulspace"-Kasten (Beispielprofile) ─────────────────────────── */
.is-system {
    border-radius: 14px; padding: 16px 18px; margin-bottom: 14px;
    background: #f1f7f8; border: 1px solid #cfe3e8;
}

/* ── Werkzeugzeile: Suche, Umschalter, Chips (Rechner) bzw. Auswahlknöpfe (Handy) ── */
.is-leiste { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.is-leiste > * { min-width: 0; }
.is-suche { position: relative; flex: 0 1 260px; }
.is-suche input {
    width: 100%; height: 38px; padding: 0 12px 0 34px; border-radius: 10px; font-size: 14px;
    border: 1px solid var(--is-linie); background: #fff; color: var(--is-tinte);
}
.is-suche input::placeholder { color: #94a3b8; }
.is-suche input:focus { border-color: var(--is-marke); outline: none; box-shadow: 0 0 0 3px rgba(110, 176, 188, .35); }
.is-suche .is-lupe { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; font-size: 13px; }

.is-umschalter { flex: none; display: inline-flex; background: #f1f5f9; border-radius: 10px; padding: 3px; gap: 2px; }
.is-umschalter button {
    border: 0; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--is-leise);
    padding: 6px 12px; border-radius: 8px; line-height: 1.3;
}
.is-umschalter button.an { background: #fff; color: var(--is-marke); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }

/* Genau EINE Zeile Chips: was nicht passt, bricht in die (abgeschnittene)
   zweite Zeile um und steht in der Liste hinter „+ N weitere". */
.is-chips { flex: 1 1 0; display: flex; flex-wrap: wrap; gap: 6px; height: 34px; overflow: hidden; align-content: flex-start; }
.is-chip {
    height: 34px; display: inline-flex; align-items: center; white-space: nowrap;
    font-size: 13px; font-weight: 600; padding: 0 12px; border-radius: 999px;
    background: #fff; color: var(--is-tinte-2); border: 1px solid var(--is-linie); text-decoration: none;
}
.is-chip:hover { border-color: var(--is-marke); color: var(--is-marke); }
/* die Chipzeile schneidet ab (overflow) – der Fokusring liegt deshalb innen */
.is-chip:focus-visible { outline-offset: -3px; }
.is-chip.an { background: var(--is-marke); border-color: var(--is-marke); color: #fff; }

/* Auswahlknopf + aufklappende Liste. Am Rechner „+ N weitere" hinter den
   Chips, am Handy der ganze Filter (ohne Chips). */
.is-wahl { position: relative; flex: none; }
.is-wahl summary {
    list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
    display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px;
    border-radius: 10px; border: 1px solid var(--is-linie); background: #fff;
    font-size: 13.5px; font-weight: 600; color: var(--is-tinte-2);
}
.is-wahl summary::-webkit-details-marker { display: none; }
.is-wahl summary:hover, .is-wahl[open] summary { border-color: var(--is-marke); color: var(--is-marke); }
.is-wahl summary i { font-size: 11px; transition: transform .15s; }
.is-wahl[open] summary i { transform: rotate(180deg); }
.is-wahl-text { overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
/* Breite nach dem längsten Eintrag (max-content): sonst nimmt die Liste die
   Breite des schmalen Knopfes als Maß und bricht mitten im Wort um. */
.is-wahl-liste {
    position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
    width: max-content; min-width: 220px; max-width: min(420px, 86vw);
    max-height: min(64vh, 452px); overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid var(--is-linie); border-radius: 12px; padding: 5px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
    scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
}
.is-wahl-liste::-webkit-scrollbar { width: 10px; }
.is-wahl-liste::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
.is-wahl-liste::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 3px solid #fff; }
.is-wahl-liste a {
    display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none;
    font-size: 14px; line-height: 1.35; color: var(--is-tinte-2); overflow-wrap: break-word; hyphens: auto;
}
.is-wahl-liste a:hover { background: #f1f5f9; color: var(--is-tinte); }
.is-wahl-liste a.an { font-weight: 700; color: var(--is-marke); background: #eef7f8; }
.is-treffer { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--is-leise); white-space: nowrap; }
.is-treffer b { color: var(--is-tinte); font-weight: 700; }
.is-treffer a {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 50%; color: var(--is-leise); text-decoration: none; border: 1px solid var(--is-linie); background: #fff; font-size: 11px;
}
.is-treffer a:hover { color: var(--is-marke); border-color: var(--is-marke); }

@media (min-width: 768px) {
    /* Rechner: Chips der Dimension, auf der der Umschalter steht; die andere ist aus.
       Die Liste gibt es nur als „+ N weitere" (das Skript blendet sie aus,
       wenn alle Chips in die Zeile passen). */
    .is-leiste[data-dim="zg"] [data-fuer="fach"], .is-leiste[data-dim="fach"] [data-fuer="zg"] { display: none; }
    .is-wahl .is-handy { display: none; }
    .is-wahl.is-passt { display: none; }
    .is-wahl-liste.viele { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; max-width: min(620px, 86vw); }
    .is-wahl-liste.viele a:first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    /* Handy: keine Chips, kein Umschalter – Suche und zwei Auswahlknöpfe in einer Zeile */
    .is-leiste { gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
    .is-chips, .is-umschalter { display: none; }
    .is-suche { flex: 1 1 108px; min-width: 108px; }
    .is-wahl .is-breit { display: none; }
    .is-wahl summary { padding: 0 10px; gap: 5px; }
    .is-wahl-text { max-width: 96px; }
    .is-wahl.an summary { background: var(--is-marke); border-color: var(--is-marke); color: #fff; }
    .is-wahl { position: static; }
    .is-wahl-liste { left: 0; right: 0; width: auto; min-width: 0; max-width: none; max-height: 60vh; }
    .is-treffer { flex-basis: 100%; margin: 2px 0 0 2px; }
}

/* ── Abschnitte + Raster ───────────────────────────────────────────────── */
.is-abschnitt { margin-bottom: 24px; scroll-margin-top: 96px; }
.is-abschnitt-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.is-abschnitt-kopf h2 { font-size: 15px; font-weight: 700; color: var(--is-tinte); margin: 0; }
.is-anzahl { font-size: 12px; font-weight: 600; color: var(--is-leise); background: #eef2f6; border-radius: 999px; padding: 1px 8px; }
.is-abschnitt-kopf::after { content: ""; flex: 1; height: 1px; background: var(--is-linie); }
.is-abschnitt-kopf .is-nur { order: 3; font-size: 12px; color: var(--is-leise); white-space: nowrap; }
.is-abschnitt-text { font-size: 14px; color: var(--is-leise); margin: -4px 0 12px; max-width: 70ch; }
.is-raster { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
@media (max-width: 640px) {
    .is-abschnitt-kopf { flex-wrap: wrap; row-gap: 4px; }
    .is-abschnitt-kopf .is-nur { white-space: normal; flex-basis: 100%; }
    /* Handy: Kacheln ohne reservierte Leerflächen (im Raster am Rechner halten
       sie die Reihen gleich hoch, in EINER Spalte sind sie nur Luft). */
    .is-raster { gap: 12px; }
    .is-raster > div > .p-5 { padding: 14px 16px; }
    .is-raster h3, .is-raster p { min-height: 0 !important; }
    .is-raster p[aria-hidden="true"] { display: none; }
    .is-raster p.line-clamp-3 { -webkit-line-clamp: 2; }
}

/* ── Leerzustände ──────────────────────────────────────────────────────── */
.is-leer {
    background: #fff; border: 1px dashed #cbd5e1; border-radius: 14px;
    padding: 36px 20px; text-align: center; color: var(--is-tinte-2);
}
.is-leer i.is-leer-bild { font-size: 34px; color: #cbd5e1; display: block; margin-bottom: 10px; }
.is-leer h2 { font-size: 16px; font-weight: 700; color: var(--is-tinte); margin: 0 0 6px; }
.is-leer p { font-size: 14.5px; margin: 0 auto 16px; max-width: 46ch; }
.is-fuss { text-align: center; margin: 8px 0 0; }
.is-fuss a { color: #94a3b8; text-decoration: none; font-size: 12.5px; }
.is-fuss a:hover { color: var(--is-tinte-2); text-decoration: underline; }

/* ── Fenster (Teilen, Zur Sammlung) ────────────────────────────────────── */
/* Hintergrund wie beim QR-Fenster der Kacheln: dunkel und leicht verschwommen */
.is-dialog-grund {
    position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center;
    padding: 16px; background: rgba(0, 0, 0, .7);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.is-dialog-grund.offen { display: flex; }
.is-dialog {
    background: #fff; border-radius: 16px; width: 100%; max-width: 380px; padding: 16px 18px 18px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .3); text-align: left;
    max-height: calc(100vh - 32px); overflow-y: auto;
}
/* Teilen: groß, damit der QR-Code groß ist. Die Höhe folgt der Breite
   (QR-Code quadratisch + rund 60 px für Kopf und Adresse) – deshalb begrenzt
   die Fensterhöhe die Breite, statt dass das Fenster rollen muss. */
.is-dialog.gross { max-width: clamp(300px, calc(100vh - 150px), 540px); }
/* Kopf: Titel links, X rechts – kein „Schließen" am unteren Rand */
.is-dialog-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.is-dialog h2 { font-size: 17px; font-weight: 700; color: var(--is-tinte); margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* Teilen: Titel mittig über dem QR-Code, darüber klein, WAS geteilt wird;
   das X sitzt frei in der Ecke und schiebt den Titel nicht aus der Mitte. */
.is-kopf-mitte { position: relative; justify-content: center; text-align: center; margin-bottom: 14px; }
.is-kopf-mitte > .is-titelblock { min-width: 0; padding: 0 38px; }
.is-kopf-mitte > .is-x, .is-kopf-mitte > .sl-dialog-zu { position: absolute; top: -2px; right: 0; margin: 0; }
.is-art { display: block; font-size: 12.5px; font-weight: 600; color: var(--is-leise); margin-bottom: 2px; }
.is-kopf-mitte h2 { font-size: 18px; line-height: 1.3; }
.is-dialog-unter { font-size: 13.5px; color: var(--is-leise); margin: 0; }
/* Symbol-Knöpfe: klein und ruhig; Bedeutung über title/aria-label */
.is-symbol {
    width: 36px; height: 36px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; border: 1px solid var(--is-linie); background: #fff; color: var(--is-tinte-2);
    font-size: 15px; cursor: pointer; text-decoration: none;
}
.is-symbol:hover { border-color: var(--is-marke); color: var(--is-marke); }
.is-symbol.voll { background: var(--is-marke); border-color: var(--is-marke); color: #fff; }
.is-symbol.voll:hover { background: var(--is-marke-tief); border-color: var(--is-marke-tief); color: #fff; }
.is-symbol.is-x { border-color: transparent; color: var(--is-leise); margin: -4px -6px -4px 0; }
.is-symbol.is-x:hover { background: #f1f5f9; border-color: transparent; color: var(--is-tinte); }
.is-symbol:focus-visible { outline: 3px solid var(--is-marke-hell); outline-offset: 2px; }
.is-symbole { display: flex; gap: 6px; flex: none; }
/* Zwei Karten: was man teilt – und rechts daneben, was man damit tun kann */
.is-teil { border: 1px solid var(--is-linie); border-radius: 12px; }
/* QR-Code mittig (unter dem Titel), die Knöpfe als schmale Spalte rechts
   daneben, senkrecht mittig. Links ein gleich breiter, leerer Platzhalter –
   sonst stünde der Code nicht in der Mitte. Rahmen wie im QR-Fenster der Kacheln. */
.is-teil-qr {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items: center; column-gap: 8px;
    padding: 10px; margin-bottom: 10px; box-shadow: inset 0 2px 4px rgba(15, 23, 42, .05);
}
.is-qr { grid-column: 2; width: 100%; height: auto; aspect-ratio: 1; display: block; }
.is-teil-qr .is-symbole { grid-column: 3; flex-direction: column; }
.is-adresse {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px;
    background: #f8fafc; text-align: left;
    border: 1px solid var(--is-linie); border-radius: 12px;
}
.is-adresse > span { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; color: var(--is-tinte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is-adresse > span[onclick] { cursor: pointer; }
/* beschrifteter Knopf an der Adresse (Einstellungsseite) */
.is-adresse > button:not(.is-symbol) { flex: none; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; font-weight: 700; color: var(--is-marke); cursor: pointer; }
@media (max-width: 767px) {
    /* Finger statt Maus: etwas größere Ziele */
    .is-symbol { width: 40px; height: 40px; font-size: 16px; }
    /* Handy: schmalere Ränder, damit der QR-Code trotz Mitte groß bleibt */
    .is-teil-qr { grid-template-columns: 40px minmax(0, 1fr) 40px; column-gap: 4px; padding: 6px; }
    .is-dialog-grund { padding: 10px; }
    .is-dialog.gross { padding: 14px 12px; }
}
.is-liste { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; margin: 0; }
.is-liste button {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 11px 14px; border-radius: 10px; border: 1px solid var(--is-linie); background: #fff; cursor: pointer;
    font-size: 14.5px; font-weight: 600; color: var(--is-tinte-2);
}
.is-liste button:hover { background: #f8fafc; border-color: var(--is-marke); }

@media print { .is-leiste, .is-aktionen, .is-hinweis { display: none !important; } }