/*
Theme Name: dSchuel
Theme URI: https://www.dschuel.ch
Description: Child-Theme für die Website des Vereins dSchuel, Basel.
Author: Verein dSchuel
Template: kadence
Version: 1.1.0
Text Domain: dschuel
*/

/* Eigenes CSS für Formen und Anordnungen, die sich nicht über theme.json
   abbilden lassen. Alles Farb- und Schriftbezogene gehört in theme.json,
   nicht hierher – die Werte hier greifen ausschliesslich auf die dortigen
   Preset-Variablen zurück, damit es nur eine Quelle der Wahrheit gibt.
   Was das Original wie aussehen lässt, steht in docs/design-original.md. */

/* Wix setzt bei Aufzählungen im Leitbild auf Zeilenumbrüche statt Listen.
   Damit die Umbrüche im Nachbau erhalten bleiben: */
.dschuel-umbrueche {
    white-space: pre-line;
}

/* Ausnahme von "alles Schriftbezogene gehört in theme.json": Kadences
   global.min.css enthält "h1{font-size:2em;margin:.67em 0}" – eine feste
   Normalize-Regel ohne zugehörige Customizer-Einstellung, die sich anders
   als die übrige Typografie (siehe functions.php) nicht an der Ursache
   abstellen lässt. Gleiche Spezifität (0,0,1) wie theme.json's
   "h1{font-size:var(--wp--preset--font-size--xx-large)}", aber später
   geladen – ohne diese Regel würde jede Überschrift 1. Ebene doppelt so
   gross wie in theme.json vorgesehen dargestellt. Bewusst derselbe
   theme.json-Wert (nicht neu erfunden), nur mit höherer Kaskadenposition. */
h1 {
    font-size: var(--wp--preset--font-size--xx-large);
}

/* ---------------------------------------------------------------------
   Die Schiefertafel

   Das Tafelfoto liegt über theme.json (styles.background) fest unter der
   ganzen Seite. Damit oben und unten immer ein Streifen des Holzrahmens
   sichtbar bleibt – so wie im Original – braucht die Seite eine Mindest-
   höhe; sonst schrumpft eine kurze Seite auf Bildschirmhöhe und schneidet
   den Rahmen an.
   --------------------------------------------------------------------- */
body {
    min-height: 100vh;
}

/* Kadence trennt Kopfbereich und Fusszeile mit hellen Linien vom Inhalt.
   Auf der Tafel wirken sie wie Kratzer im Bild – das Original kennt sie
   nicht. */
.site-header,
.site-footer,
.site-footer-row-container {
    border: 0;
}

/* ---------------------------------------------------------------------
   Die farbigen Kreise

   Im Original sind es Wix-Vektorformen mit absolut darüber gesetzten
   Textfeldern, 232 px im Durchmesser bei 980 px Seitenbreite. Hier tragen
   sie ihren Text selbst: eine Gruppe, die quadratisch bleibt und deren
   Ecken vollständig gerundet sind. Das überlebt – anders als eine
   nachgebaute absolute Positionierung – jede Fensterbreite und bleibt im
   Editor bearbeitbar.
   --------------------------------------------------------------------- */
.dschuel-kreis {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Der Text muss innerhalb der Rundung bleiben: ein Quadrat mit runden
       Ecken hat an den Seiten deutlich weniger Platz als in der Mitte. */
    padding: 13% 17%;
    box-sizing: border-box;
    width: 100%;
    /* 232 px ist der Durchmesser im Original (bei 980 px Seitenbreite). */
    max-width: 232px;
    margin-inline: 0;
    /* Macht die Kreisbreite für die Schriftgrösse darin messbar (cqw
       weiter unten): ein Kreis mit fünf Zeilen Text muss die Schrift
       enger setzen als einer mit einer, sonst quillt der Text über den
       Rand – genau das passierte beim Kreis mit den Infoabend-Terminen. */
    container-type: inline-size;
}

/* Im Kreis ist kein Platz für die grossen Titelgrössen der Seite. Die
   Schrift bemisst sich an der Kreisbreite, mit der Kleinschrift des
   Originals (Wix-Preset font_2, 15 px) als Obergrenze. */
.dschuel-kreis :where(h1, h2, h3, h4, h5, h6) {
    font-size: clamp(0.72rem, 6.2cqw, var(--wp--preset--font-size--small));
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    color: inherit;
}

.dschuel-kreis p {
    font-size: clamp(0.72rem, 6.2cqw, var(--wp--preset--font-size--small));
    line-height: 1.35;
    margin: 0;
}

.dschuel-kreis :where(p + p, h2 + p, p + h2) {
    margin-top: 0.35em;
}

/* Links im Kreis stehen auf hellem Grund und brauchen darum die dunkle
   Textfarbe des Kreises statt der hellen Kreidefarbe aus theme.json. */
.dschuel-kreis a {
    color: inherit;
    text-decoration: underline;
}

/* Die vier Kreise der Startseite stehen im Original versetzt nebeneinander,
   nicht in einer Reihe. Ein Raster mit zwei Spalten und einem Versatz der
   zweiten Spalte bildet das nach und fällt auf schmalen Fenstern von selbst
   auf eine Spalte zurück. */
.dschuel-kreisfeld {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 3rem;
    justify-items: center;
    margin-block: 3rem;
}

.dschuel-kreisfeld > .dschuel-kreis:nth-child(even) {
    margin-top: 3.5rem;
}

@media (max-width: 600px) {
    .dschuel-kreisfeld {
        grid-template-columns: minmax(0, 1fr);
    }

    .dschuel-kreisfeld > .dschuel-kreis:nth-child(even) {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------------------
   Aufzählungen

   Das Leitbild des Originals stellt seine vier Aufzählungen paarweise
   nebeneinander – 11 bis 16 Einträge je Liste, die einspaltig gesetzt eine
   sehr lange Seite ergäben. Zwei Spalten je Aufzählung bilden die Dichte des
   Originals nach und fallen auf schmalen Fenstern von selbst auf eine Spalte
   zurück. "break-inside" verhindert, dass ein mehrzeiliger Eintrag über die
   Spaltengrenze zerrissen wird.
   --------------------------------------------------------------------- */
.dschuel-aufzaehlung {
    columns: 2;
    column-gap: 3rem;
}

.dschuel-aufzaehlung li {
    break-inside: avoid;
}

@media (max-width: 600px) {
    .dschuel-aufzaehlung {
        columns: 1;
    }
}

/* ---------------------------------------------------------------------
   Das Personenraster der Teamseite

   Das Original stellt zwölf Personen in vier Spalten: Porträt im Hochformat,
   darunter der Name, darunter die Funktion. Der erste Nachbau reihte
   dieselben Personen untereinander – die Seite war dadurch sechsmal so lang
   (16 475 statt 2 754 Pixel) und verlor die Übersicht, die das Raster gibt.

   Die Spaltenzahl kommt als Variable aus dem Markup (aus
   content/team-raster.json), nicht als fester Wert – ändert das Original
   sein Raster, ändert sich diese Datei nicht.
   --------------------------------------------------------------------- */
.dschuel-team {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2rem);
    align-items: start;
    margin-block: 2.5rem;
}

/* Die Spaltenzahl kommt als Klasse aus dem Markup (aus
   content/team-raster.json), damit sie sich mit dem Original ändern kann,
   ohne dass diese Datei angefasst werden muss. Vier ist der Wert des
   Originals und zugleich der Rückfall oben. */
.dschuel-team--spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dschuel-team--spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dschuel-team--spalten-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dschuel-team--spalten-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Die Zelle ist ein Raster mit fester Bildzeile: Porträt, Name, Funktion.
   Ohne das rutscht die Zeile einer Person ohne Foto nach oben und die
   Namen fluchten nicht mehr – im Original stehen sie alle auf einer
   Höhe, auch bei Ilayda Saltic, die kein Foto hat. */
.dschuel-person {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0.5rem;
}

/* Platzhalter für die fehlende Bildzeile, damit das Raster sie mitzählt. */
.dschuel-person:not(:has(figure))::before {
    content: "";
    display: block;
    aspect-ratio: 3 / 4;
}

/* Alle Porträts auf dasselbe Hochformat bringen. Die Originaldateien sind
   unterschiedlich beschnitten (Handyfotos neben Studioaufnahmen); ohne
   festes Verhältnis franst die Zeile aus und das Raster wirkt schief. */
.dschuel-person figure {
    margin: 0;
}

.dschuel-person img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.dschuel-person__name {
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.25;
    color: var(--wp--preset--color--kreide-hell);
    margin: 0;
}

/* Die Funktion steht im Original kleiner und zurückhaltender als der Name –
   sie ordnet ein, sie ist nicht die Hauptinformation der Zelle. */
.dschuel-person__funktion {
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--wp--preset--color--kreide);
    opacity: 0.78;
    margin: 0;
}

@media (max-width: 900px) {
    .dschuel-team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .dschuel-team {
        grid-template-columns: minmax(0, 1fr);
        max-width: 260px;
    }
}

/* Vereinsvorstand und Gründerinnen: zwei Spalten, ohne dass es nach
   Tabelle aussieht. Das Original setzt sie mit geschützten Leerzeichen auf
   Abstand – hier tragen sie ein Raster, damit ein längerer Name nichts
   verschiebt. */
.dschuel-paarliste {
    margin-block: 1rem 2.5rem;
}

.wp-block-table.dschuel-paarliste table,
.dschuel-paarliste table {
    border-collapse: collapse;
    border: 0;
    width: auto;
    max-width: 100%;
}

/* WordPress' Tabellen-Blockstil setzt die Rahmen über
   ".wp-block-table td" – derselbe Selektorrang, aber früher geladen.
   Deshalb hier mit der Figur davor, statt mit !important. */
.wp-block-table.dschuel-paarliste td,
.dschuel-paarliste td {
    border: 0;
    padding: 0.18rem 2.5rem 0.18rem 0;
    vertical-align: top;
    word-break: normal;
}

/* Die linke Spalte ordnet ein (Rolle, Name), die rechte trägt die Aussage –
   im Original ist sie darum etwas zurückgenommen. */
.dschuel-paarliste td:first-child {
    color: var(--wp--preset--color--kreide-hell);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .dschuel-paarliste td {
        display: block;
        padding-right: 0;
    }

    .dschuel-paarliste td:last-child {
        padding-bottom: 0.7rem;
        opacity: 0.8;
    }
}

/* ---------------------------------------------------------------------
   Seitentitel

   Im Original steht der Titel gross und fein auf der Tafel, daneben der
   Farbkreis der Seite – ein reines Schmuckelement ohne Text, darum im
   Markup aria-hidden.
   --------------------------------------------------------------------- */
.dschuel-seitentitel {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 4vw, 3rem);
    margin-block: clamp(2rem, 6vw, 4rem) 2.5rem;
}

.dschuel-seitentitel .dschuel-kreis--schmuck {
    width: clamp(90px, 14vw, 170px);
    max-width: none;
    flex: 0 0 auto;
    padding: 0;
}

.dschuel-seitentitel h1 {
    margin: 0;
}

/* ---------------------------------------------------------------------
   Die Schnürlischrift des Slogans

   Im Original eine hochgeladene, lizenzpflichtige Schweizer Schulschrift
   ("Helvetia Verbundene"); hier die frei lizenzierte Sacramento, in
   theme.json als Familie "schnuerli" geführt. Ein Wechsel der Ersatzschrift
   betrifft nur jenen Eintrag, nicht diese Regel.

   Schreibschriften wirken bei gleicher Punktgrösse deutlich kleiner als
   eine Grotesk – daher der Aufschlag gegenüber der Titelgrösse.
   --------------------------------------------------------------------- */
.dschuel-handschrift {
    font-family: var(--wp--preset--font-family--schnuerli);
    font-size: calc(var(--wp--preset--font-size--xx-large) * 1.35);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    color: var(--wp--preset--color--kreide-hell);
    margin-block: clamp(2rem, 7vw, 4.5rem) 1rem;
}

/* ---------------------------------------------------------------------
   Die Tafelfläche hinter dem Inhalt

   Das Hintergrundfoto (body, siehe theme.json) zeigt eine Tafel in einem
   Holzrahmen und ist auf Fensterhöhe skaliert. Eine Seite, die länger ist
   als das Fenster, läuft damit über den unteren Rand der Tafel hinaus –
   ihr Text stünde dann kreidehell auf hellem Holz und wäre unlesbar. Genau
   das passierte mit den drei Schlusszeilen der Startseite.

   Der Inhaltsbereich bekommt darum eine eigene, beliebig hohe Tafelfläche:
   ein aus demselben Foto geschnittener Ausschnitt ohne Rahmen, gespiegelt
   vervierfacht und dadurch nahtlos kachelbar. Oben und unten läuft er weich
   aus, sodass die Holzstreifen des Fotos sichtbar bleiben – der Eindruck
   des Originals (Holz, Tafel, Holz) bleibt also erhalten, unabhängig davon,
   wie lang eine Seite wird.
   --------------------------------------------------------------------- */
/* Kadences Inhaltscontainer heisst #inner-wrap (nicht .site-content – der
   Selektor griff ins Leere, und die Tafelfläche fehlte dadurch auf jeder
   Seite; sichtbar wurde es erst bei langen Seiten, deren Text unten auf dem
   hellen Holz stand). */
#inner-wrap,
.site-header {
    position: relative;
}

/* Kurze Seiten (etwa "Passivmitgliedschaft", die nur aus Titel und einem
   Absatz besteht) hätten sonst einen handbreiten Streifen Tafel und
   darunter nur noch Holz. Die Mindesthöhe hält die Tafel über den ganzen
   ersten Bildschirm, so wie im Original. */
#inner-wrap {
    min-height: 62vh;
}

/* Die Fläche liegt in einem eigenen Element hinter dem Inhalt, nicht als
   Hintergrund des Inhaltsbereichs selbst: Eine Maske wirkt auf das ganze
   Element samt seiner Kinder – der weiche Auslauf oben und unten würde
   sonst auch den Text ausblenden, nicht nur die Tafelfläche. */
#inner-wrap::before,
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("assets/bilder/tafel-flaeche.webp");
    background-repeat: repeat;
    background-size: 900px auto;
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0,
        #000 90px,
        #000 calc(100% - 90px),
        transparent 100%
    );
    mask-image: linear-gradient(
        180deg,
        transparent 0,
        #000 90px,
        #000 calc(100% - 90px),
        transparent 100%
    );
}

/* Die Inhaltsbreite von 980 px stammt vom Wix-Original (siehe
   functions.php) und gilt bei Kadence auch für den Kopfbereich. Für Logo
   und acht Menüpunkte reicht sie nicht: das Menü brach in eine zweite Zeile
   um. Der Kopfbereich – im Original gibt es ihn in dieser Form gar nicht –
   bekommt darum mehr Platz als der Inhalt. */
#masthead .site-container {
    max-width: 1280px;
}

/* Der Überhang nach unten sorgt dafür, dass der weiche Auslauf der Maske
   erst NACH dem letzten Textblock beginnt – sonst stehen die Schlusszeilen
   einer Seite in der auslaufenden Fläche und damit wieder auf hellem Holz.
   Nur für den Inhalt: am Kopfbereich würde derselbe Überhang die ersten
   Zeilen der Seite zudecken. */
#inner-wrap::before {
    bottom: -110px;
}

/* Der Kopfbereich liegt im Original auf dem oberen Holzstreifen – dort ist
   das Menü in Kreideweiss aber nicht zu lesen. Die Tafelfläche reicht darum
   bis unter ihn und läuft nur nach oben hin weich aus, sodass über dem Menü
   ein Streifen Holz stehen bleibt. */
.site-header::before {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 46px);
    mask-image: linear-gradient(180deg, transparent 0, #000 46px);
}

/* ---------------------------------------------------------------------
   Fusszeile

   Sie steht am Seitenende auf dem hellen Holzstreifen des Hintergrundfotos,
   wo heller Text verschwindet. Das Original hat dort gar keine Fusszeile –
   Impressum und Datenschutzerklärung sind rechtlich nötige Zutaten des
   Nachbaus. Ein schmaler dunkler Streifen trägt sie, statt die Textfarbe
   gegen den Rest der Seite zu verbiegen.
   --------------------------------------------------------------------- */
.site-footer {
    background: rgba(20, 19, 17, 0.72);
}