/* Gemeinsames Design der externen AtlantisWeb-Doku.
   Gleicher Look wie die In-App-Hilfe (template/css/documentation.css im
   AtlantisWeb-Repo): ruhiger Hintergrund mit abstrakten Wellenbaendern,
   Inhalt auf einer opaken weissen Karte.
   Hier bewusst eigenstaendig: die --atlantis-*-Tokens aus design_2026.css
   stehen in dieser Doku nicht zur Verfuegung. */

body {
    --docu-bg-top: #eef3f8;
    --docu-bg-mid: #e4ecf4;
    --docu-bg-bottom: #dae4ef;
    --docu-anthracite: #343846;
    --docu-lightgrey: #e5e4e7;
    --docu-blue: #84b1d8;
    --docu-link: #3a6ba8;
    --docu-shadow: rgba(52, 56, 70, 0.08);
    --docu-shadow-soft: rgba(52, 56, 70, 0.05);

    margin: 0;
    font-family: arial,helvetica,sans-serif;
    line-height: 1.6;
    font-size: 13px;
    color: var(--docu-anthracite);
    background-color: var(--docu-bg-top);
}

#backgroundDiv {
    background-color: var(--docu-bg-mid);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cfilter id='s' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeGaussianBlur stdDeviation='14'/%3E%3C/filter%3E%3Cg filter='url(%23s)' fill='rgb(70,113,170)' fill-opacity='0.09'%3E%3Cpath d='M-160,250 C260,140 620,330 900,250 C1140,182 1320,150 1600,210 L1600,1060 L-160,1060 Z'/%3E%3Cpath d='M-160,470 C240,360 600,560 880,470 C1120,393 1300,360 1600,420 L1600,1060 L-160,1060 Z'/%3E%3Cpath d='M-160,690 C280,580 580,780 860,690 C1100,613 1320,580 1600,640 L1600,1060 L-160,1060 Z'/%3E%3C/g%3E%3C/svg%3E"),
        radial-gradient(140% 100% at 50% -10%, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, var(--docu-bg-top) 0%, var(--docu-bg-mid) 50%, var(--docu-bg-bottom) 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -5;
}

#outerFrame {
    width: 780px;
    max-width: 100%;
    margin: 0px auto;
    padding: 2.5rem 0 4rem;
    box-sizing: border-box;
}

/* Seiten mit einer breiten Referenz-Tabelle (Klasse wideTable, z.B. die
   Parameterliste von createNewPupil) bekommen eine breitere Karte, statt die
   Tabelle abzuschneiden oder ihre Spalten umzubrechen. */
#outerFrame:has(.wideTable) {
    width: 60rem;
}

/* Inhaltsbreite bleibt bei 700px: die Seiteninhalte rechnen mit dieser
   Breite (feste Bildbreiten, float-Layouts). */
#docuContent {
    box-sizing: border-box;
    padding: 2.5rem;
    background-color: #ffffff;
    color: var(--docu-anthracite);
    text-align: left;
    border: 1px solid var(--docu-lightgrey);
    border-radius: 0.75rem;
    box-shadow:
        0 0.125rem 0.25rem var(--docu-shadow-soft),
        0 1.25rem 2.5rem var(--docu-shadow);
}

#docuContent a {
    color: var(--docu-link);
}

#docuContent img {
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

/* Lange Code-Beispiele (API-Doku) scrollen in sich, statt aus der Karte
   herauszulaufen. */
#docuContent pre {
    overflow-x: auto;
}

#docuContent table {
    max-width: 100%;
}

/* Sprungmarken nicht an den Fensterrand kleben lassen */
#docuContent [id^="h1nr"] {
    scroll-margin-top: 1.5rem;
}