/* ===================================================================
   Die freie Anordnung im Design-Studio.

   -------------------------------------------------------------------
    WARUM DIESE DATEI GLOBAL IST UND NICHT NEBEN EINEM BAUTEIL
   -------------------------------------------------------------------
   Weil die Regeln hier absichtlich ueber Bauteilgrenzen gehen: die
   Flaeche (.start-frei) gehoert zu StartseitenBloecke, der Mantel
   (.start-teil) zu FreierTeil, und der Inhalt darin - ein Banner,
   eine Kachelspalte - wieder zu StartseitenBloecke.

   Blazors CSS-Isolation haengt an jede Regel ein Merkmal des
   Bauteils, zu dem die Datei gehoert. Eine Regel wie
   ".start-frei .start-teil > *" wuerde in der falschen Datei
   lautlos auf nichts passen - sie stuende da, waere gueltig und
   taete nichts. Das ist der schlimmste Fall: kein Fehler, nur eine
   Seite, die anders aussieht als gedacht.

   Also eine Datei, global, mit eigenem Namensraum (start-frei,
   start-teil) und an einer Stelle zu lesen.

   -------------------------------------------------------------------
    DER GEDANKE
   -------------------------------------------------------------------
   In der festen Anordnung gibt es diese Datei gar nicht: ohne
   .start-frei greift keine Regel, und FreierTeil rendert nicht
   einmal einen Mantel. Erst der Haken "frei" schaltet den Baustein
   auf Flaeche um.

   Dann zaehlt nur noch, was am Mantel steht: vier Zahlen in Prozent,
   die das Ziehskript waehrend der Bewegung und Blazor beim Loslassen
   schreiben.
   =================================================================== */

/* ------------------------------------------------------------------
   Die Flaeche

   Eine Hoehe ist nicht Geschmack, sondern Notwendigkeit: die Teile
   darin sind absolut gestellt und belegen keinen Platz mehr. Ohne
   Hoehe waere die Flaeche null hoch, und alles darin stuende
   uebereinander im Nichts.

   ---- Warum ein Seitenverhaeltnis und keine Hoehe in rem ----
   Weil eine feste Hoehe die Flaeche ihre FORM aendern laesst, sobald
   sie woanders steht. Im Studio ist der Baustein schmaler als auf
   der Startseite - das Studio sitzt in der Verwaltungsansicht, die
   Startseite nicht. Bei 40rem Hoehe waere dieselbe Flaeche dort
   breit und flach und hier schmal und hoch.

   Und damit stimmte die Vorschau nicht mehr: ein Banner auf 47
   Prozent Breite und 30 Prozent Hoehe hat in einer flachen Flaeche
   ein anderes Seitenverhaeltnis als in einer hohen. Es stuende an
   derselben Stelle und saehe trotzdem anders aus - genau das war der
   sichtbare Unterschied zwischen Studio und Startseite.

   Als Verhaeltnis ist die Flaeche ueberall gleich geformt: breiter
   heisst hoeher, im selben Mass. Dann ist die Vorschau dasselbe Bild
   in einer anderen Groesse, und jeder Prozentwert darin bedeutet an
   beiden Orten dasselbe.

   100 / 50 heisst: halb so hoch wie breit. Die Zahl kommt vom
   Baustein, weil der Griff dort sitzt - siehe BlockStil.

   overflow: hidden, damit ein Teil, der ueber den Rand gezogen wird,
   nicht in den Nachbarbaustein hineinreicht. Ueberstehen darf er -
   bis zur Kante der Flaeche. Was dahinter liegt, wird beschnitten
   und nicht in die Nachbarschaft gedrueckt. Es haelt ausserdem das
   Seitenverhaeltnis: ohne das Beschneiden koennte ein ueberlanger
   Text die Flaeche hoeher druecken, als sie sein soll.
   ------------------------------------------------------------------ */
.start-frei {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 100 / var(--frei-verhaeltnis, 50);
    overflow: hidden;
    border: 1px solid rgba(232, 181, 63, 0.3);
    border-radius: 0.5rem;
    background: rgba(232, 181, 63, 0.05);
}

/* Die Abschnitte zwischen Flaeche und Teil loesen sich auf.

   display: contents nimmt das Element aus dem Layout, ohne seine
   Kinder anzutasten: der Mantel eines Teils wird damit zum direkten
   Kind der Flaeche und stellt sich gegen DEREN Kasten - und nicht
   gegen einen Abschnitt, der selbst irgendwo sitzt.

   Namentlich aufgezaehlt und nicht als "> *": so steht hier, welche
   Abschnitte es gibt, und ein neuer faellt auf, statt stillschweigend
   mitgenommen zu werden.

   Was dabei verloren geht, ist die Kante und der Grund dieser
   Abschnitte (.stream-teaser hat beides). Das ist gewollt: in der
   freien Anordnung traegt die Flaeche selbst den Rahmen, und zwei
   Rahmen uebereinander waeren einer zu viel. */
.start-frei .public-home__header,
.start-frei .social,
.start-frei .stream-teaser,
.start-frei .stream-teaser__oben,
.start-frei .tourney-board,
.start-frei .liga-board {
    display: contents;
}

/* ------------------------------------------------------------------
   Der Mantel eines Teils

   Vier Zahlen, nichts weiter. --teil-h fehlt bei einem Teil ohne
   Hoehe; dann steht hier auto, und der Teil ist so hoch wie sein
   Inhalt.
   ------------------------------------------------------------------ */
.start-frei .start-teil {
    position: absolute;
    left: var(--teil-x, 0%);
    top: var(--teil-y, 0%);
    width: var(--teil-b, 100%);
    height: var(--teil-h, auto);
    margin: 0;
    min-width: 0;

    /* Die aufgeloesten Abschnitte lassen ihre Regeln fuer direkte
       Kinder zurueck - .stream-teaser__oben > * setzt flex und
       max-width: 32rem. Fuer ein absolut gestelltes Element ist flex
       gleichgueltig, max-width aber nicht: ein Banner, das auf 80
       Prozent gezogen wurde, blieb sonst bei 32rem stehen und man
       saehe dem Zug nicht an, warum er nicht weitergeht. */
    flex: none;
    max-width: none;
}

/* ------------------------------------------------------------------
   Eine Kachel, die noch im Fluss steht

   Sie traegt denselben Mantel wie jeder Teil - sonst haette sie
   keinen Griff und keine Kennung zum Anfassen -, steht aber noch
   dort, wo ihr Raster sie hinstellt. Erst wer sie anfasst, nimmt sie
   heraus; von da an hat sie einen Platz und faellt unter die Regel
   darueber.

   relative statt static: der Griff liegt absolut darin und braucht
   einen Bezugspunkt. Ohne ihn spraenge er an die Ecke der ganzen
   Flaeche.
   ------------------------------------------------------------------ */
.start-frei .start-teil--fliessend {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
}

/* Der Inhalt fuellt seinen Mantel.

   :first-child und nicht *, weil die Griffe spaetere Geschwister
   sind - die sollen ihre eigene Groesse behalten.

   height: 100% bei einem Mantel ohne eigene Hoehe ist 100 Prozent von
   auto, also auto. Die Zeile tut dort nichts und schadet nichts;
   dafuer steht sie nur einmal da und nicht viermal mit Bedingung. */
.start-frei .start-teil > :first-child {
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
}

/* Eine Kachel im Fluss behaelt die Masse ihres Rasters - sie soll
   aussehen wie vorher, bis jemand sie anfasst. */
.start-frei .start-teil--fliessend > :first-child {
    width: auto;
    height: auto;
}

/* Eine rollende Kachelspalte richtet sich in der freien Anordnung
   nach ihrem Mantel und nicht mehr nach --brett-hoehe: die Hoehe
   zieht man hier am Teil, und zwei Hoehen fuer dieselbe Spalte waeren
   eine zu viel. */
.start-frei .brett-rolle {
    max-height: none;
    height: 100%;
}

/* Das Banner und der Platzhalter des Livefensters bringen 16:9 mit.
   Steht am Mantel eine Hoehe, ist sie die Vorgabe - ein
   Seitenverhaeltnis wirkt nur, solange eine der beiden Seiten offen
   ist, und soll hier nicht gegen den Zug arbeiten. */
.start-frei .stream-teaser__banner,
.start-frei .stream-teaser__platzhalter {
    aspect-ratio: auto;
}

/* ---- Das Livefenster ----

   Es bringt eigene Masse mit: hoechstens 44rem breit, mittig
   gestellt, fest 16:9. Auf der normalen Startseite ist das richtig -
   in der freien Anordnung nicht, denn dort sagt der Mantel, wie gross
   es ist.

   Ohne diese Regel war das Fenster der sichtbarste Unterschied
   zwischen Studio und Startseite: im Studio steht dort ein
   Platzhalter, der seinen Mantel ausfuellt, auf der Startseite das
   Fenster, das sich bei 44rem selbst begrenzt und in der Mitte stehen
   bleibt. Zwei verschiedene Bilder an derselben Stelle.

   Dass der Platzhalter im Studio dieselbe Klasse NICHT traegt, ist in
   Ordnung: er fuellt seinen Mantel ohnehin. Beide zeigen jetzt
   dasselbe. */
.start-frei .stream-teaser__video > .streamfenster {
    max-width: none;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
}

/* Derselbe Fall eine Ebene tiefer: der Absatz der Begruessung
   begrenzt sich auf 44rem. Im schmalen Studio greift die Grenze
   nicht, auf der breiten Startseite schon - und der Text braeche an
   anderer Stelle um. In der freien Anordnung bestimmt der Mantel die
   Breite, sonst niemand. */
.start-frei .public-home__lead {
    max-width: none;
}

/* ------------------------------------------------------------------
   Nur im Studio: die Griffe am Teil

   Im Studio ist der Inhalt fuer Klicks undurchlaessig gestellt
   (.start-block--bearbeiten > .start-block__inhalt in
   StartseitenBloecke.razor.css). Die Griffe stellen sich einzeln
   wieder durchlaessig. Deshalb kann man ziehen, ohne dass ein Klick
   auf eine Turnierkachel aus dem Studio herausnavigiert.
   ------------------------------------------------------------------ */

/* Der Bewegen-Griff liegt UEBER dem ganzen Teil und nicht an einer
   Kante: man soll einen Gegenstand dort anfassen koennen, wo man ihn
   sieht. Der gestrichelte Rand ist das Zeichen dafuer, dass hier
   etwas zu greifen ist - ohne ihn sucht man die Stelle. */
.start-teil__griff {
    position: absolute;
    z-index: 4;
    inset: 0;
    border: 1px dashed rgba(232, 181, 63, 0.26);
    border-radius: 0.3rem;
    cursor: grab;
    pointer-events: auto;

    /* Sonst scrollt das Ziehen auf dem Tablet die Seite -
       pointerdown allein genuegt dafuer nicht. */
    touch-action: none;
}

.start-teil__griff:hover {
    border-color: #e8b53f;
    background: rgba(232, 181, 63, 0.1);
}

/* Der Name erst beim Ueberfahren. Fuenf dauerhaft beschriftete
   Kaesten waeren ein Formular und keine Startseite - und man will
   beim Anordnen sehen, was man anordnet. */
.start-teil__name {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.05rem 0.35rem;
    border-radius: 0.28rem 0 0.28rem 0;
    background: rgba(13, 19, 16, 0.92);
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 120ms ease;
}

.start-teil__griff:hover .start-teil__name {
    opacity: 1;
}

/* Rand und Ecke liegen halb ausserhalb des Teils: so trifft man sie,
   ohne in die Mitte zu greifen, wo der Bewegen-Griff liegt. Sie
   stehen im Markup NACH dem Griff und haben die hoehere Lage -
   sonst waere die Kante vom Griff verdeckt und jede Groessenaenderung
   eine Verschiebung. */
.start-teil__rand,
.start-teil__ecke {
    position: absolute;
    z-index: 5;
    background: transparent;
    pointer-events: auto;
    touch-action: none;
}

/* ------------------------------------------------------------------
   Griffe in Griffen

   Hier lag der Grund, warum eine Kachel zwar ihren gestrichelten Rand
   bekam, sich aber nicht anfassen liess.

   Der Bewegen-Griff eines Teils liegt ueber dem GANZEN Teil
   (inset: 0). Die Kacheln liegen im Inhalt ihres Bausteins, also IN
   diesem Teil - und sein Griff steht im Markup nach ihnen und deckt
   sie damit vollstaendig zu. Jeder Druck landete auf dem Inhalt, nie
   auf der Kachel darunter. Man sah den Rand der Kachel, griff aber
   immer den ganzen Inhalt.

   Darum liegen Griffe INNERHALB eines Teils hoeher als die des Teils
   selbst. Der Inhalt bleibt dort greifbar, wo keine Kachel liegt -
   in den Luecken und am Rand -, und an seinen Kanten sowieso.

   ---- Warum zweimal .start-teil und ein > ----
   Der erste Versuch stand hier als ".start-teil .start-teil__griff".
   Diese Regel traf aber auch den Griff des Teils SELBST: er ist ein
   Kind seines Teils und damit auch dessen Nachkomme. Beide Griffe
   lagen danach auf 6 - und bei gleicher Lage entscheidet die
   Markupfolge. Der Griff des Inhalts steht nach den Kacheln, also
   gewann wieder er. Die Regel beschrieb genau den Zustand, den sie
   beheben sollte, und deshalb liess sich immer nur der Inhalt
   verschieben.

   Zweimal .start-teil mit Nachkommen-Schritt heisst: ein Teil, das in
   einem Teil liegt - das ist die Kachel und nie ihr Inhalt. Der
   Kind-Schritt davor stellt sicher, dass es um den Griff DIESES
   Teils geht und nicht um einen tiefer liegenden.

   10 und 11 statt 6 und 7: die Zahlen haben keinen Bezug nach
   aussen, und so bleibt Platz, falls einmal eine dritte Ebene
   dazukommt.
   ------------------------------------------------------------------ */
.start-teil .start-teil > .start-teil__griff {
    z-index: 10;
}

.start-teil .start-teil > .start-teil__rand,
.start-teil .start-teil > .start-teil__ecke {
    z-index: 11;
}

.start-teil__rand--rechts {
    top: 0;
    right: -0.3rem;
    bottom: 0;
    width: 0.6rem;
    cursor: ew-resize;
}

.start-teil__rand--unten {
    right: 0;
    bottom: -0.3rem;
    left: 0;
    height: 0.6rem;
    cursor: ns-resize;
}

.start-teil__ecke {
    right: -0.35rem;
    bottom: -0.35rem;
    width: 0.9rem;
    height: 0.9rem;
    cursor: nwse-resize;
}

.start-teil:hover > .start-teil__rand,
.start-teil:hover > .start-teil__ecke {
    border-radius: 0.2rem;
    background: rgba(232, 181, 63, 0.38);
}

.start-teil__rand:hover,
.start-teil__ecke:hover {
    background: #e8b53f !important;
}

/* ------------------------------------------------------------------
   Die Hilfslinien

   Zwei Linien je Flaeche, von Blazor gerendert und leer. Das Skript
   sagt ihnen nur, wo sie stehen und ob sie zu sehen sind.

   Dass sie im Markup stehen und nicht vom Skript angelegt werden, ist
   kein Zufall: alles innerhalb eines Bausteins gehoert Blazor, und
   ein Element, das ein Skript dort einhaengt, kann beim naechsten
   Rendern im Weg stehen. Zwei leere Linien kosten nichts.

   Die Farbe ist absichtlich keine der Hausfarben. Eine goldene Linie
   auf einer goldgerahmten Flaeche waere ein Teil der Gestaltung -
   diese Linie soll aussehen, als haette sie dort nichts zu suchen,
   denn genau das stimmt: sie ist Werkzeug und nicht Inhalt.
   ------------------------------------------------------------------ */
.start-fuehrung {
    position: absolute;
    z-index: 6;
    background: #ff5ec4;
    box-shadow: 0 0 4px rgba(255, 94, 196, 0.6);
    opacity: 0;
    pointer-events: none;
}

/* Der halbe Pixel zurueck: so liegt die Linie MITTIG auf der Zahl
   und nicht einen Pixel daneben. Bei einer Linie, deren ganzer Sinn
   das genaue Treffen ist, faellt das auf. */
.start-fuehrung--senkrecht {
    top: 0;
    bottom: 0;
    width: 1px;
    margin-left: -0.5px;
}

.start-fuehrung--waagerecht {
    right: 0;
    left: 0;
    height: 1px;
    margin-top: -0.5px;
}

.start-fuehrung--an {
    opacity: 1;
}

/* Die Zahlen in der Ecke, waehrend gezogen wird.

   Sie beantworten die Frage, die man beim Ziehen immer hat: steht das
   jetzt genau gleich? Eingerastet heisst dieselbe Zahl, und hier
   steht sie. */
.start-frei__anzeige {
    position: absolute;
    z-index: 7;
    right: 0.3rem;
    bottom: 0.3rem;
    padding: 0.12rem 0.45rem;
    border-radius: 0.25rem;
    background: rgba(13, 19, 16, 0.92);
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    opacity: 0;
    pointer-events: none;
}

.start-frei__anzeige--an {
    opacity: 1;
}

/* ------------------------------------------------------------------
   Das Telefon

   Hier endet die freie Anordnung, und das ist keine Einschraenkung,
   sondern der Grund, warum sie ueberhaupt verantwortbar ist.

   Prozent halten die Verhaeltnisse, aber nicht die Lesbarkeit: eine
   Textspalte auf dreissig Prozent von zwölfhundert Pixeln ist eine
   Spalte, dieselben dreissig Prozent von dreihundertsechzig sind
   vier Buchstaben pro Zeile. Deshalb loest sich die Flaeche auf
   kleinen Schirmen auf und die Teile stehen untereinander - in der
   Reihenfolge, in der sie im Markup stehen, also in der des
   Bausteins.

   Die Anordnung aus dem Studio gilt damit fuer Schirme ab 48rem.
   Darunter gilt, was immer galt.
   ------------------------------------------------------------------ */
@media (max-width: 48rem) {
    .start-frei {
        display: flex;
        height: auto;

        /* Das Verhaeltnis faellt hier weg: die Teile stehen wieder
           untereinander und machen die Flaeche so hoch, wie sie
           zusammen sind. */
        aspect-ratio: auto;
        overflow: visible;
        flex-direction: column;
        gap: 0.9rem;
        padding: 0.9rem;
    }

    /* Und das Fenster bekommt seine eigenen Masse zurueck. */
    .start-frei .stream-teaser__video > .streamfenster {
        height: auto;
        margin: 0 auto 0.4rem;
        aspect-ratio: 16 / 9;
    }

    .start-frei .start-teil {
        position: static;
        width: auto;
        height: auto;
    }

    .start-frei .start-teil > :first-child {
        height: auto;
    }

    /* Die Kachelspalte bekommt ihre Grenze zurueck - ohne sie rollte
       sie nicht mehr, sondern waere so lang wie ihr Inhalt. */
    .start-frei .brett-rolle {
        height: auto;
        max-height: 60vh;
    }

    /* Keine Griffe, wo nichts zu ziehen ist. Ein Rahmen um jeden
       Teil, der sich nicht bewegen laesst, waere nur ein Gitter -
       und Hilfslinien ohne Flaeche, auf der sie helfen koennten,
       waeren zwei Striche quer durch den Baustein. */
    .start-teil__griff,
    .start-teil__rand,
    .start-teil__ecke,
    .start-fuehrung,
    .start-frei__anzeige {
        display: none;
    }
}

/* ===================================================================
   Das Studio auf den uebrigen Seiten

   Alles bis hierher gehoert der freien Anordnung der Startseite. Was
   jetzt folgt, ist das Wenigere, das die anderen Seiten brauchen:
   Abschnitte umsortieren, breiter machen, aus- und einschalten.

   Global und nicht neben einem Bauteil - aus demselben Grund wie
   oben: Seitenbereich, Baustein und der Inhalt darin gehoeren drei
   verschiedenen Bauteilen, und Blazors Isolation haengt jede Regel an
   genau eines davon.

   Die Startseite bringt dieselben Klassennamen in ihrem eigenen,
   isolierten CSS mit. Deren Regeln tragen ein Merkmal und gewinnen
   deshalb, wo beide etwas sagen - die Startseite bleibt also, wie sie
   ist, und diese Regeln greifen auf den Seiten, die kein eigenes CSS
   dafuer haben.
   =================================================================== */

/* Das Raster des Studios - nur, wenn die Seite keines mitbringt.

   Bringt sie eines mit (start-bloecke--fremd), bleibt es ihres: eine
   Seite soll nach dem Einbau genauso aussehen wie vorher, solange
   niemand etwas angeordnet hat. Zum Umsortieren genuegt ein
   Elternteil, das "order" beachtet, und das tut jedes Raster und jede
   Flexzeile. */
.start-bloecke:not(.start-bloecke--fremd) {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
}

/* Die Reihenfolge.

   Der einzige Weg, der hier geht: die Abschnitte stehen im Markup
   ihrer Seite, und keine Schleife kann sie umsortieren. 0 heisst
   "wie im Markup" - das ist der Zustand ohne gespeicherte Anordnung,
   und deshalb sieht eine Seite ohne Datei genau so aus wie ohne das
   Studio. */
.start-block {
    order: var(--platz, 0);
    min-width: 0;
}

/* Die Breite - und der Unterschied zwischen eigenem und fremdem
   Raster.

   Im Raster des Studios ist ein Abschnitt ohne Einstellung ganz
   breit: dort stapeln sich Abteilungen untereinander, und ein
   Sechstel waere ein Streifen.

   In einem Raster, das die Seite mitbringt, bekommt er gar keine
   Breite: dort hat die Seite schon entschieden, wie breit ihre Karten
   sind, und eine Vorgabe von hier wuerde das Aussehen aendern, bevor
   jemand etwas angeordnet hat. Erst wer eine Breite einstellt,
   ueberschreibt die der Seite. */
.start-bloecke:not(.start-bloecke--fremd) > .start-block {
    grid-column: span var(--spalten, 6);
}

.start-bloecke--fremd > .start-block--breit {
    grid-column: span var(--spalten);
}

/* ---- Nur im Studio ------------------------------------------------

   Dieselbe Handschrift wie auf der Startseite: eine Leiste ueber dem
   Abschnitt, und der Abschnitt darunter wird fuer Klicks
   undurchlaessig. Ohne das navigierte ein Klick auf eine Kachel aus
   dem Studio heraus, waehrend man eigentlich verschieben wollte. */
.start-block--bearbeiten {
    position: relative;
    padding: 2.4rem 0.5rem 0.5rem;
    border: 1px dashed rgba(232, 181, 63, 0.35);
    border-radius: 0.45rem;
    background: rgba(232, 181, 63, 0.03);
}

.start-block--bearbeiten > .start-block__inhalt {
    pointer-events: none;
}

.start-block--bearbeiten > .start-block__leiste {
    position: absolute;
    top: 0.3rem;
    right: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.68rem;
}

/* Der Griff ist das einzige, was zieht - und gross genug, um ihn mit
   dem Finger zu treffen. */
.start-block--bearbeiten .start-block__griff {
    padding: 0 0.3rem;
    color: #e8b53f;
    cursor: grab;
    letter-spacing: -0.15em;
    user-select: none;
}

.start-block--bearbeiten .start-block__name {
    color: #e8b53f;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.start-block--bearbeiten .start-block__haken {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: rgba(217, 212, 200, 0.75);
}

/* Ohne .start-block--bearbeiten davor, und das aus zwei Gruenden.

   Erstens stehen zwei Auswahlen gar nicht in einem Baustein: die
   Spaltenzahl im Reihenpult und der Sprung in der Seitenleiste. Beide
   trugen die Klasse und bekamen trotzdem das Aussehen des Browsers -
   ein helles Kaestchen in einer dunklen Leiste.

   Zweitens kam .start-block__wahl--an gegen diese Regel nicht an:
   (0,1,0) gegen (0,2,0). Der Haken "Frei" trug die Klasse fuer
   "eingeschaltet" und sah aus wie ausgeschaltet. */
.start-block__wahl {
    padding: 0.05rem 0.25rem;
    border: 1px solid rgba(232, 181, 63, 0.3);
    border-radius: 0.25rem;
    background: rgba(13, 19, 16, 0.9);
    color: #d9d4c8;
    font-family: inherit;
    font-size: inherit;
}

/* Die Spaltenzahl in der Leiste - sie sagt, was der Rand gerade
   gezogen hat. Ohne sie zieht man blind. */
.start-block--bearbeiten .start-block__breite {
    margin-left: auto;
    color: rgba(232, 181, 63, 0.75);
    letter-spacing: 0.05em;
}

/* Ausgeschaltet: zu sehen, aber erkennbar nicht dabei. Ganz
   ausblenden wuerde heissen, dass man ihn nicht wieder einschalten
   kann. */
.start-block--aus > .start-block__inhalt {
    opacity: 0.35;
}

.start-block--zieht {
    opacity: 0.5;
}

.start-block--ziel {
    outline: 2px dashed #e8b53f;
    outline-offset: 3px;
}

/* Der Griff am rechten Rand, halb darueber und halb darunter: so
   trifft man ihn, ohne in den Inhalt zu klicken.

   touch-action: none, damit das Ziehen auf dem Tablet nicht die Seite
   scrollt - pointerdown allein genuegt dafuer nicht. */
.start-block--bearbeiten > .start-block__rand--rechts {
    position: absolute;
    z-index: 3;
    top: 2.2rem;
    right: -0.35rem;
    bottom: 0.4rem;
    width: 0.7rem;
    background: transparent;
    cursor: ew-resize;
    touch-action: none;
}

.start-block--bearbeiten:hover > .start-block__rand--rechts {
    border-radius: 0.2rem;
    background: rgba(232, 181, 63, 0.35);
}

.start-block--bearbeiten > .start-block__rand--rechts:hover {
    background: #e8b53f;
}

/* ---- Die Leiste der Seite ---------------------------------------- */
.studio-leiste {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    border: 1px solid rgba(232, 181, 63, 0.3);
    border-radius: 0.4rem;

    /* Deckend und nicht durchscheinend: was darunter hindurchrollt,
       soll die Knoepfe nicht unlesbar machen. */
    background: #0d1310;
}

.studio-leiste__text {
    display: flex;
    min-width: 14rem;
    flex: 1 1 20rem;
    flex-direction: column;
}

.studio-leiste__text strong {
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.studio-leiste__text span {
    color: rgba(217, 212, 200, 0.62);
    font-size: 0.8rem;
}

.studio-leiste__knoepfe {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.studio-leiste__offen {
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Die Auswahl, mit der es zur naechsten Seite geht.

   Sie steht zwischen Knoepfen und soll so hoch sein wie sie. Schrift
   und Masse deshalb hier: die Klasse .start-block__wahl erbt beides
   von der Bausteinleiste, und die gibt es an dieser Stelle nicht. */
.studio-sprung {
    padding: 0.2rem 0.45rem;
    color: #d9d4c8;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    cursor: pointer;
}

.studio-sprung:hover:not(:disabled) {
    border-color: #e8b53f;
}

/* Die Liste selbst zeichnet das System - nur die Farbe laesst sich
   mitgeben, sonst stuende schwarz auf schwarz. */
.studio-sprung option {
    background: #0d1310;
    color: #d9d4c8;
}

/* ------------------------------------------------------------------
   Die Pulte der Uebersicht: Farben und Menueband

   Beide klappen, beide stehen zu. Der Kopf ist ein Knopf in der
   Ueberschrift - umgekehrt waere es kein gueltiges HTML, und ohne
   Ueberschrift verliert die Seite ihre Gliederung.

   Kein <details>: dort kann der Browser beide gleichzeitig aufmachen,
   und "eines zur Zeit" waere nur mit einem Skript zu halten. Zwei
   Zeilen Blazor tun dasselbe ohne Skript.
   ------------------------------------------------------------------ */
.studio-pult__titel {
    margin: 0;
}

.studio-pult__kopf {
    display: flex;
    width: 100%;
    padding: 0;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    background: transparent;
    color: #e8b53f;

    /* Der Knopf erbt die Schrift nicht von sich aus - ohne diese vier
       Zeilen stuende dort die Schrift des Betriebssystems statt der
       Ueberschrift. */
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.studio-pult__kopf:hover,
.studio-pult__kopf:focus-visible {
    color: #ffe08a;
}

/* Der Pfeil in fester Breite: ohne sie ruckt die Ueberschrift beim
   Klappen um einen Punkt zur Seite, weil ▸ und ▾ nicht gleich breit
   sind. */
.studio-pult__pfeil {
    display: inline-block;
    width: 0.9rem;
    flex: 0 0 auto;
    font-size: 0.8rem;
    text-align: center;
}

/* Zugeklappt braucht der Kasten keine Luft nach unten - sonst sehen
   zwei geschlossene Pulte aus wie zwei leere Kaesten. */
.studio-pult:has(> .studio-pult__titel [aria-expanded="false"]) {
    padding-bottom: 0.7rem;
}

/* ------------------------------------------------------------------
   Das Menueband in der Uebersicht

   Eine Liste und kein Raster: je Taste ein Textfeld, eine Auswahl und
   ein Haken, und die drei gehoeren in eine Zeile. Auf dem Telefon
   brechen sie um - drei Spalten in 320 Pixeln waere jede Spalte zu
   schmal fuer ihren Inhalt.
   ------------------------------------------------------------------ */
.studio-band {
    margin: 1.2rem 0 1.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(232, 181, 63, 0.25);
    border-radius: 0.45rem;
    background: rgba(232, 181, 63, 0.04);
}

.studio-band h2 {
    margin-bottom: 0.3rem;
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-band__gruppe {
    margin: 0.9rem 0 0.4rem;
    color: rgba(217, 212, 200, 0.75);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.studio-band__liste {
    display: grid;
    margin-bottom: 0.8rem;
    gap: 0.35rem;
}

.studio-band__zeile {
    display: flex;
    padding: 0.3rem 0.4rem;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    border: 1px solid rgba(232, 181, 63, 0.14);
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.22);
}

/* Das Textfeld nimmt den Platz, die Auswahl bleibt so breit, wie ihr
   laengster Eintrag braucht. */
.studio-band__zeile > input[type="text"],
.studio-band__zeile > input:not([type]) {
    min-width: 8rem;
    flex: 1 1 10rem;
}

.studio-band__zeile > select {
    width: auto;
    flex: 0 0 auto;
}

/* ---- Der Griff ----
   Nur er ist ziehbar, nicht die Zeile: ein ziehbares Elternteil
   frisst in Chrome die Klicks seiner Kinder, und in der Zeile stehen
   ein Textfeld und ein Haken.

   touch-action: none, damit das Ziehen auf dem Tablet nicht die Seite
   scrollt - dieselbe Zeile wie an den Griffen der Bausteine. */
.studio-band__griff {
    flex: 0 0 auto;
    padding: 0 0.15rem;
    color: #e8b53f;
    font-size: 0.95rem;
    letter-spacing: -0.15em;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.studio-band__griff:active {
    cursor: grabbing;
}

/* Die Nummer in fester Breite: ohne sie ruecken die Textfelder
   zwischen einstelligen und zweistelligen Plaetzen hin und her. */
.studio-band__platz {
    width: 1.4rem;
    flex: 0 0 auto;
    color: rgba(217, 212, 200, 0.5);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.72rem;
    text-align: right;
}

/* Gezogen und Ziel - dieselben zwei Zeichen wie an den Bausteinen,
   damit beides dieselbe Sprache spricht. */
.studio-band__zeile--zieht {
    opacity: 0.5;
}

.studio-band__zeile--ziel {
    outline: 2px dashed #e8b53f;
    outline-offset: 2px;
}

.studio-band__haken {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.3rem;
    color: rgba(217, 212, 200, 0.8);
    font-size: 0.78rem;
    cursor: pointer;
}

/* „immer" steht an den beiden Tasten, die bleiben muessen. Gedaempft,
   damit es wie eine Auskunft aussieht und nicht wie ein Knopf, der
   nicht geht. */
.studio-band__immer {
    flex: 0 0 auto;
    color: rgba(217, 212, 200, 0.45);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------
   Das Hintergrundbild eines Bausteins

   Global und nicht in StartseitenBloecke.razor.css: das Markup des
   Bausteins steht in Baustein.razor, und eine gekapselte Regel der
   NACHBARDATEI traefe dort nichts. Dieselbe Falle wie bei den
   uebrigen .start-block-Regeln, die deshalb auch hier stehen.

   Als eigene Schicht und nicht als background am Baustein: die
   Deckkraft gilt nur fuer das Bild. Stuende sie am Baustein, waere
   auch der Text halb durchsichtig - und ein Bild, das man durch die
   Schrift sieht, ist kein Hintergrund, sondern eine Stoerung.
   ------------------------------------------------------------------ */
.start-block--bild {
    position: relative;
}

.start-block--bild::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background-image: var(--bild);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: var(--bild-deck, 0.18);
    content: "";

    /* Klicks gehen durch: die Schicht liegt ueber dem Baustein, aber
       sie ist nur Farbe. Ohne diese Zeile waere jeder Knopf darunter
       unerreichbar. */
    pointer-events: none;
}

/* Der Inhalt ueber das Bild. Ohne eine Stapellage saesse er bei
   gleicher Lage hinter der Schicht - sie steht im Markup vor ihm. */
.start-block--bild > * {
    position: relative;
    z-index: 1;
}

/* Gekachelt: fuer Muster. Keine Vergroesserung, sonst waere aus dem
   Muster ein Bild geworden. */
.start-block--bild-kacheln::before {
    background-repeat: repeat;
    background-size: auto;
}

/* Oben angesetzt: das Bild behaelt seine Form und sitzt am oberen
   Rand. Fuer ein Bild, das beschnitten seinen Sinn verliert. */
.start-block--bild-oben::before {
    background-position: top center;
    background-size: contain;
}

/* ------------------------------------------------------------------
   Der Bildwaehler des Studios

   Derselbe Aufbau wie der Bannerwaehler der Streamplanung - dort
   stehen die Regeln gekapselt bei ihrer Seite, hier global, weil
   dieser Dialog aus Seitenbereich kommt und auf jeder gestaltbaren
   Seite auftaucht.
   ------------------------------------------------------------------ */
.studio-bildwahl {
    position: fixed;
    z-index: 1100;
    display: flex;
    padding: 1.2rem;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(4, 7, 5, 0.82);
}

.studio-bildwahl__fenster {
    display: flex;
    width: min(60rem, 100%);
    max-height: min(44rem, 92vh);
    padding: 1rem 1.1rem 1.2rem;
    flex-direction: column;
    gap: 0.7rem;
    border: 1px solid rgba(232, 181, 63, 0.35);
    border-radius: 0.5rem;
    background: #0d1310;
}

.studio-bildwahl__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.studio-bildwahl__kopf h2 {
    margin: 0;
    color: #fcf8ed;
    font-size: 1.05rem;
}

.studio-bildwahl__marke {
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.studio-bildwahl__hoch,
.studio-bildwahl__suche {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.studio-bildwahl__hoch > :first-child,
.studio-bildwahl__suche > :first-child {
    min-width: 12rem;
    flex: 1 1 14rem;
}

.studio-bildwahl__hinweis {
    margin: 0;
    color: rgba(217, 212, 200, 0.62);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Die Flaeche rollt, das Fenster nicht: sonst waere der Knopf
   "Schliessen" irgendwo unterhalb von sechzig Bildern. */
.studio-bildwahl__koerper {
    min-height: 8rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.studio-bildwahl__leer {
    margin: 0;
    padding: 1.5rem 0;
    color: rgba(217, 212, 200, 0.55);
    font-size: 0.85rem;
    text-align: center;
}

.studio-bildwahl__raster {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.studio-bildwahl__kachel {
    display: flex;
    padding: 0.3rem;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid rgba(232, 181, 63, 0.2);
    border-radius: 0.35rem;
    background: rgba(0, 0, 0, 0.3);
    color: #d9d4c8;
    cursor: pointer;
}

.studio-bildwahl__kachel:hover {
    border-color: #e8b53f;
    background: rgba(232, 181, 63, 0.1);
}

.studio-bildwahl__kachel--an {
    border-color: #e8b53f;
    background: rgba(232, 181, 63, 0.18);
}

.studio-bildwahl__kachel img {
    width: 100%;
    height: 5.5rem;
    border-radius: 0.25rem;
    object-fit: cover;
}

.studio-bildwahl__ohne {
    display: flex;
    height: 5.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(217, 212, 200, 0.5);
    font-size: 0.7rem;
    text-align: center;
}

.studio-bildwahl__titel {
    overflow: hidden;
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------
   Die Farben der Ligen

   Ein Kasten in der Uebersicht des Studios, vor der Liste der Seiten:
   eine Farbe gilt ueberall, eine Anordnung nur auf ihrer Seite.
   ------------------------------------------------------------------ */
.studio-farben {
    margin: 1.2rem 0 1.8rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(232, 181, 63, 0.25);
    border-radius: 0.45rem;
    background: rgba(232, 181, 63, 0.04);
}

.studio-farben h2 {
    margin-bottom: 0.3rem;
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.studio-farben__reihe {
    display: flex;
    margin: 0.8rem 0;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.studio-farben__feld {
    display: flex;
    min-width: 11rem;
    padding: 0.5rem 0.7rem;
    flex: 1 1 11rem;
    flex-direction: column;
    gap: 0.3rem;
    border: 1px solid rgba(232, 181, 63, 0.18);
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.25);
}

.studio-farben__feld > span {
    color: #f5f4f2;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Der Waehler so breit wie das Feld und hoch genug fuer den Finger -
   der Browser gibt ihm sonst die Groesse eines Knopfs von 1998. */
.studio-farben__feld input[type="color"] {
    width: 100%;
    height: 2.2rem;
    padding: 0;
    border: 1px solid rgba(232, 181, 63, 0.3);
    border-radius: 0.3rem;
    background: transparent;
    cursor: pointer;
}

.studio-farben__feld small {
    color: rgba(217, 212, 200, 0.6);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.7rem;
}

.studio-farben__knoepfe {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.studio-farben__meldung {
    margin: 0.6rem 0 0;
    color: #e2573f;
    font-size: 0.8rem;
}

.studio-verlauf {
    margin: 1.5rem 0;
}

.studio-verlauf__liste {
    display: grid;
    margin: 0;
    padding: 0;
    gap: 0.3rem;
    list-style: none;
}

.studio-verlauf__liste li {
    display: flex;
    padding: 0.4rem 0.6rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    border: 1px solid rgba(232, 181, 63, 0.16);
    border-radius: 0.3rem;
}

.studio-verlauf__liste span {
    color: rgba(217, 212, 200, 0.75);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.76rem;
}

/* ===================================================================
   Was aus StartseitenBloecke.razor.css hierher wandern musste

   Die Startseite rendert ihre Bausteine seit dem Zusammenlegen nicht
   mehr selbst - das tun Seitenbereich und Baustein. Blazors
   CSS-Isolation haengt jede Regel an das Bauteil, zu dessen Datei sie
   gehoert; die Regeln fuer .start-bloecke und .start-block trafen
   dort also nichts mehr.

   Sie stehen jetzt hier, unisoliert, und gelten fuer jede gestaltbare
   Seite. In StartseitenBloecke.razor.css sind die entsprechenden
   Regeln wirkungslos geworden - sie sind dort als solche
   gekennzeichnet und koennen weg.
   =================================================================== */

/* Die Zahlen, die eine Kachelspalte braucht. Sie erben nach unten,
   deshalb stehen sie am Raster und nicht an jeder Reihe einzeln.

   --brett-hoehe ist die Hoehe, ab der eine Spalte rollt; sie
   entspricht ungefaehr fuenf Kacheln. */
.start-bloecke {
    --kachel-breite: 17rem;
    --brett-luecke: 0.9rem;
    --brett-hoehe: 46rem;
}

/* Zwei Werte: zwischen den Zeilen mehr Luft als zwischen zwei
   Bausteinen, die nebeneinander stehen. */
.start-bloecke:not(.start-bloecke--fremd) {
    gap: 2rem 1.4rem;
}

/* Was kein Baustein ist, nimmt die ganze Zeile. Eine Meldung wie
   "Wird geladen ..." steht sonst in einem Sechstel und sieht aus wie
   ein Fehler. */
.start-bloecke:not(.start-bloecke--fremd) > *:not(.start-block) {
    grid-column: 1 / -1;
}

.start-block__griff:active {
    cursor: grabbing;
}

.start-block__leer {
    padding: 1.6rem 1rem;
    border: 1px dashed rgba(217, 212, 200, 0.2);
    border-radius: 0.35rem;
    color: rgba(217, 212, 200, 0.5);
    text-align: center;
}

.start-block__rand,
.start-block__ecke {
    position: absolute;
    z-index: 3;
    background: transparent;
    touch-action: none;
}

.start-block__rand--unten {
    right: 0.9rem;
    bottom: -0.35rem;
    left: 0.4rem;
    height: 0.7rem;
    cursor: ns-resize;
}

.start-block__ecke {
    position: absolute;
    z-index: 3;
    background: transparent;
    touch-action: none;
}

.start-block--bearbeiten:hover .start-block__rand,
.start-block--bearbeiten:hover .start-block__ecke {
    background: rgba(232, 181, 63, 0.35);
    border-radius: 0.2rem;
}

.start-block__rand:hover,
.start-block__ecke:hover {
    background: #e8b53f !important;
}

.start-block__wahl--an {
    border-color: #e8b53f;
    background: rgba(232, 181, 63, 0.18);
    color: #fcf8ed;
}

.start-block__texte {
    position: relative;
    z-index: 2;
    display: grid;
    margin-bottom: 0.8rem;
    padding: 0.6rem 0.7rem;
    gap: 0.5rem;
    border: 1px solid rgba(232, 181, 63, 0.3);
    border-radius: 0.35rem;
    background: #12161a;
}

.start-block__feld {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.start-block__feld > span {
    color: rgba(217, 212, 200, 0.62);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.start-block__feld input,
.start-block__feld textarea {
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: 1px solid rgba(232, 181, 63, 0.25);
    border-radius: 0.25rem;
    background: #0b0f0d;
    color: #f5f4f2;
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.start-block__feld input:focus,
.start-block__feld textarea:focus {
    border-color: #e8b53f;
    outline: none;
}

.start-block__feldhinweis {
    margin: 0;
    color: rgba(217, 212, 200, 0.5);
    font-size: 0.74rem;
}


/* ---- Schmale Schirme ----

   Unter 64rem eine Spalte, und bei einer Spalte gibt es keine
   Bruchteile mehr: ohne die zweite Regel stuende ein Baustein mit
   drei Sechsteln auf dem Telefon in einer Spalte von halber Breite -
   also in der Haelfte einer Haelfte.

   Die Einstellung bleibt gespeichert und gilt wieder, sobald der
   Schirm breit genug ist. Sie wird hier uebergangen, nicht
   verworfen. */
@media (max-width: 64rem) {
    .start-bloecke:not(.start-bloecke--fremd) {
        grid-template-columns: minmax(0, 1fr);
    }

    .start-block,
    .start-block--breit {
        grid-column: 1 / -1;
    }
}

/* ===================================================================
   Die Handysicht

   -------------------------------------------------------------------
    WARUM ES EINE STUFE DAZWISCHEN GIBT
   -------------------------------------------------------------------
   Das Studio schreibt seine Zahlen als Inline-Stil an den Baustein -
   anders ginge es nicht, denn jeder Baustein hat seine eigenen. Ein
   Inline-Stil schlaegt aber jede Regel aus einer Datei, auch die aus
   einer Medienabfrage. Aus einer Medienabfrage heraus laesst sich
   --pro-reihe also gar nicht ueberschreiben.

   Deshalb schreibt das Studio ZWEI Zahlen hin - --pro-reihe und
   --pro-reihe-handy - und hier faellt die Entscheidung, welche gilt.
   Verbraucht wird nur --reihe; die Kachelspalte in
   StartseitenBloecke.razor.css liest ausschliesslich diese.

   -------------------------------------------------------------------
    WAS OHNE EINSTELLUNG GILT
   -------------------------------------------------------------------
   Eine Karte je Reihe. Nicht die Zahl vom Schreibtisch: vier
   Turnierkarten nebeneinander sind auf einem Telefon vier Streifen zu
   siebzig Pixeln, und das war genau der Fehler, der diese Sicht
   noetig gemacht hat. Wer auf dem Telefon zwei nebeneinander will,
   stellt das dort ein.
   =================================================================== */
.start-block {
    --reihe: var(--pro-reihe, 1);
}

@media (max-width: 48rem) {
    .start-block {
        --reihe: var(--pro-reihe-handy, 1);
    }

    /* Und die Kacheln nehmen die Breite, die da ist.

       Am Schreibtisch ist eine Kachel hoechstens --kachel-breite
       breit; das haelt die Spalte zusammen, wenn daneben noch etwas
       steht. Auf einem Telefon steht daneben nichts, und 272 Pixel in
       einem 325 Pixel breiten Baustein sehen aus wie ein Fehler. */
    .start-bloecke .brett-rolle.brett-rolle {
        grid-template-columns: repeat(var(--reihe, 1), minmax(0, 1fr));
    }
}

/* Die Hoehe der rollenden Spalte auf schmalen Schirmen.

   Der Klassenname steht zweimal, und das ist kein Versehen: die Regel
   in StartseitenBloecke.razor.css traegt durch Blazors Isolation ein
   zusaetzliches Merkmal und waere sonst staerker. Zwei Klassen gegen
   Klasse-plus-Merkmal ist gleich stark, und diese Datei wird spaeter
   geladen - also gewinnt sie.

   Ohne eingestellte Hoehe gilt none, und dann rollt dort nichts: auf
   einem Telefon rollt ohnehin die ganze Seite. */
@media (max-width: 64rem) {
    .start-bloecke .brett-rolle.brett-rolle {
        max-height: var(--brett-hoehe-handy, none);
        overflow-y: auto;
    }
}

/* Auf dem Telefon ausgeblendet.

   Im Studio bleibt der Baustein stehen und wird nur blass - sonst
   koennte man ihn dort nicht wieder einschalten. Das ist dieselbe
   Entscheidung wie bei "sichtbar". */
@media (max-width: 48rem) {
    .start-block--aus-handy:not(.start-block--bearbeiten) {
        display: none;
    }

    .start-block--bearbeiten.start-block--aus-handy
        > .start-block__inhalt {
        opacity: 0.35;
    }
}

/* ------------------------------------------------------------------
   Die Vorschau in der Handysicht

   Dieselben Regeln wie oben, nur an einer Klasse statt an einer
   Medienabfrage. Noetig, weil eine Medienabfrage die Breite des
   FENSTERS misst und nicht die des Kastens: ohne diese Regeln
   stellte man im Studio fuer ein Telefon ein und saehe dabei einen
   Schreibtisch.

   Die Doppelung ist der Preis dafuer. Sie steht direkt untereinander,
   damit auffaellt, wenn eine von beiden nachgezogen werden muss.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   REIHEN

   Ohne angelegte Reihen steht hier nichts und die Seite laeuft wie
   bisher: sechs Spalten, umlaufende Bausteine.

   Mit Reihen wechselt das Raster auf ZWOELF Grundspalten. Nicht, weil
   zwoelf feiner waere, sondern weil sich zwoelf durch 1, 2, 3, 4 und
   6 teilt - und das sind die Teilungen, die eine Reihe haben darf.
   Eine Reihe aus drei Spalten belegt je vier Grundspalten, eine aus
   vier je drei. Ohne gemeinsames Vielfaches liessen sich Drittel und
   Viertel nicht in demselben Raster ausdruecken.

   Die Zeile steht ausdruecklich am Baustein (--reihe-nr) und wird
   nicht dem Umlauf ueberlassen. Sonst rutschte der erste Baustein der
   naechsten Reihe in die Luecke einer nicht ganz gefuellten Reihe und
   saesse in der falschen Zeile - und zwar genau dann, wenn jemand
   gerade dabei ist, eine Reihe zu fuellen.

   Die Reihenfolge innerhalb einer Reihe macht weiter "order": die
   Bausteine stehen im Markup ihrer Seite, und keine Schleife kann sie
   umsortieren. Das Raster verteilt sie in der Reihenfolge, die order
   vorgibt.
   ------------------------------------------------------------------ */
.start-bloecke--reihen:not(.start-bloecke--fremd) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.start-bloecke--reihen:not(.start-bloecke--fremd) > .start-block {
    grid-row: var(--reihe-nr, 1);
    grid-column: span var(--grundspalten, 12);
}

/* Was kein Baustein ist, bleibt ueber die ganze Breite - und in einer
   eigenen Zeile hinter allen Reihen, damit es keine Zeile besetzt,
   in die ein Baustein gehoert. */
.start-bloecke--reihen:not(.start-bloecke--fremd) > *:not(.start-block) {
    grid-row: auto;
    grid-column: 1 / -1;
}

.studio-sicht {
    display: inline-flex;
    margin-right: 0.4rem;
    gap: 0.2rem;
}

.start-bloecke.start-bloecke--handysicht {
    max-width: 26rem;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
}

.start-bloecke--handysicht > .start-block,
.start-bloecke--handysicht > .start-block--breit {
    grid-column: 1 / -1;
}

/* Auf dem Telefon gibt es keine Reihen mehr - eine Reihe aus drei
   Spalten waere dort drei Streifen von zwei Zentimetern. Alles steht
   untereinander, in der Reihenfolge der Reihen und darin der
   Bausteine.

   Doppelter Klassenname, damit es die Reihenregeln oben schlaegt: die
   sind drei Klassen stark, und ein einfaches Umschreiben waere
   schwaecher. */
.start-bloecke--handysicht.start-bloecke--handysicht > .start-block {
    grid-row: auto;
    grid-column: 1 / -1;
}

.start-bloecke--handysicht .start-block {
    --reihe: var(--pro-reihe-handy, 1);
}

.start-bloecke--handysicht .brett-rolle.brett-rolle {
    grid-template-columns: repeat(var(--reihe, 1), minmax(0, 1fr));
}

.start-bloecke--handysicht .brett-rolle.brett-rolle {
    max-height: var(--brett-hoehe-handy, none);
    overflow-y: auto;
}

.start-bloecke--handysicht .start-block--aus-handy
    > .start-block__inhalt {
    opacity: 0.35;
}

/* In der Handysicht loest sich auch die freie Flaeche auf - genau wie
   auf einem echten Telefon. Sonst zeigte die Vorschau eine Anordnung,
   die es dort gar nicht gibt. */
.start-bloecke--handysicht .start-frei {
    display: flex;
    height: auto;
    aspect-ratio: auto;
    overflow: visible;
    flex-direction: column;
    gap: 0.9rem;
    padding: 0.9rem;
}

.start-bloecke--handysicht .start-teil {
    position: static;
    width: auto;
    height: auto;
}

.start-bloecke--handysicht .start-teil__griff,
.start-bloecke--handysicht .start-teil__rand,
.start-bloecke--handysicht .start-teil__ecke,
.start-bloecke--handysicht .start-fuehrung,
.start-bloecke--handysicht .start-frei__anzeige {
    display: none;
}

/* ------------------------------------------------------------------
   SCHMAL ALLEIN IST NOCH KEIN TELEFON

   Hier lag der Fehler, wegen dem sich in der Handysicht Karten
   uebereinander schoben.

   Die Vorschau macht den Kasten schmal - 26rem, die Breite eines
   Telefons. Was sie nicht macht: das FENSTER schmal. Und genau daran
   haengen die Regeln der Seiten selbst: @media (max-width: 48rem)
   fragt nach dem Fenster und nicht nach dem Kasten. In einem 26rem
   breiten Kasten in einem 1400 Pixel breiten Fenster greift keine
   einzige davon.

   Was dabei herauskam, war schlimmer als eine falsche Vorschau. "Mein
   Bereich" stellt sein Konto-Raster auf minmax(16rem, 24rem) 1fr und
   macht daraus auf dem Telefon eine Spalte. Ohne diese Umstellung
   blieben in 26rem die zwei Spalten stehen: die erste nahm ihre 16rem,
   der zweiten blieben knapp drei Zentimeter - und die Karten darin,
   die ihrerseits 17rem breit sein wollen, liefen aus ihrer Spalte
   heraus ueber den Nachbarn. Das waren die uebereinanderliegenden
   Kacheln.

   Hier stehen deshalb die Telefonregeln der gestaltbaren Seiten noch
   einmal - an der Handysicht statt an einer Fensterbreite. Doppelter
   Klassenname fuer die Spezifitaet: die Regeln der Seiten tragen die
   Scope-Kennung der Blazor-Isolierung und waeren sonst gleich stark.

   WER EINER SEITE EINE NEUE TELEFONREGEL GIBT, GEHOERT HIERHER.
   Container-Abfragen (@container) waeren der Weg, der das ueberfluessig
   macht - dann fragte die Regel nach ihrem Kasten und nicht nach dem
   Fenster. Das ist ein Umbau der Seitenstile und kein Fehlerfix; bis
   dahin diese Liste.
   ------------------------------------------------------------------ */

/* Mein Bereich: das Konto-Raster wird einspaltig. Die eine Zeile, an
   der es gehangen hat. */
.start-bloecke--handysicht .mine__account.mine__account {
    grid-template-columns: minmax(0, 1fr);
}

/* Startseite: eine Turnierkachel nimmt die ganze Breite. */
.start-bloecke--handysicht .tourney-tile.tourney-tile {
    flex: 1 1 100%;
    max-width: none;
}

.start-bloecke--handysicht .partner.partner {
    align-items: flex-start;
}

/* Die Kachelseiten - Liga, Organisation, Admin. */
.start-bloecke--handysicht .hub__kacheln.hub__kacheln {
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.start-bloecke--handysicht .hub__todo.hub__todo {
    grid-template-columns: minmax(0, 1fr);
}

/* Wer ist spielbereit: der Hinweis rutscht unter den Schalter. */
.start-bloecke--handysicht .anwesend__hinweis.anwesend__hinweis {
    flex-basis: 100%;
}

/* Der Riegel darunter, falls doch etwas durchrutscht: was in der
   Handysicht breiter sein will als der Kasten, wird gestaucht statt
   herausgelassen. Das macht eine vergessene Regel haesslich - aber es
   laesst sie nicht mehr in den Nachbarbaustein laufen, und genau das
   war das Schlimme daran. */
.start-bloecke--handysicht .start-block__inhalt {
    min-width: 0;
    overflow-x: clip;
}


/* ------------------------------------------------------------------
   Das Reihenpult

   Es steht ueber der Vorschau und nicht in ihr: eine Reihe ist kein
   Baustein, sie hat keinen Inhalt und keinen Platz im Raster. Sie
   dort zu zeichnen hiesse, eine Zeile zu erfinden, die auf der
   fertigen Seite gar nicht existiert.
   ------------------------------------------------------------------ */
.studio-reihen {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
    padding: 0.7rem 0.9rem;
    gap: 0.5rem 0.8rem;
    align-items: center;
    border: 1px solid rgba(232, 181, 63, 0.25);
    border-radius: 0.4rem;
    background: rgba(232, 181, 63, 0.04);
}

.studio-reihen__titel {
    color: #e8b53f;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.studio-reihe {
    display: flex;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    align-items: center;
    border: 1px solid rgba(232, 181, 63, 0.2);
    border-radius: 0.3rem;
    background: rgba(0, 0, 0, 0.25);
}

.studio-reihe__nr {
    min-width: 1.2rem;
    color: #ffe08a;
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-weight: 800;
    text-align: center;
}

.studio-reihe__zahl {
    color: rgba(217, 212, 200, 0.5);
    font-family: "Cascadia Mono", "Consolas", monospace;
    font-size: 0.68rem;
    white-space: nowrap;
}

.studio-reihe__weg {
    padding: 0 0.3rem;
    border: 0;
    background: transparent;
    color: rgba(217, 212, 200, 0.55);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.studio-reihe__weg:hover:not(:disabled) {
    color: #e2573f;
}

.studio-reihen__hinweis {
    flex-basis: 100%;
    margin: 0;
    color: rgba(217, 212, 200, 0.55);
    font-size: 0.78rem;
    line-height: 1.35;
}


/* ==================================================================
   DER SCHMALE SCHIRM SCHLAEGT DIE BREITE - ENDLICH AUCH WIRKLICH

   Hier lag der Fehler, wegen dem auf dem Telefon Kaesten
   nebeneinander standen und sich ueberlagerten.

   Weiter oben steht seit jeher diese Regel in der Medienabfrage fuer
   64rem:

       .start-block,
       .start-block--breit { grid-column: 1 / -1; }

   Sie hat nie gegriffen. Eine Klasse ist sie stark. Die Regel, die
   sie ueberschreiben soll, ist drei Klassen stark:

       .start-bloecke:not(.start-bloecke--fremd) > .start-block
           { grid-column: span var(--spalten, 6); }

   Eine Medienabfrage aendert an der Spezifitaet nichts - sie sagt nur
   WANN eine Regel gilt, nicht wie stark. Drei Klassen schlagen eine,
   egal in welcher Abfrage sie stehen.

   Was dabei herauskam, war schlimmer als eine ignorierte Regel. Das
   Raster steht auf dem Telefon auf EINER Spalte; ein Baustein mit
   "zwei von sechs" verlangt aber trotzdem zwei. Das Raster legt sich
   dafuer stillschweigend weitere Spalten an, und die Bausteine
   stehen wieder nebeneinander - in einem Kasten, der nur fuer einen
   gedacht war. Nachgemessen auf der laufenden Seite bei 400 Pixeln:
   drei Bausteine mit 348, 22 und 258 Pixeln. Der mit 22 war der
   zerquetschte Streifen.

   Auf der Startseite ist es nie aufgefallen, weil dort alle
   Bausteine ueber die ganze Breite stehen - sechs von sechs, und
   sechs mal dasselbe sieht aus wie eine Spalte. Erst "Mein Bereich"
   mit seinen gemischten Breiten hat es gezeigt.

   Darum steht die Regel hier noch einmal, gleich stark wie die, die
   sie schlagen soll, und am Ende der Datei - damit sie auch die
   Reihenregeln weiter oben mitnimmt. Auf dem Telefon gibt es weder
   Spalten noch Reihen: alles steht untereinander.
   ================================================================== */
@media (max-width: 64rem) {
    .start-bloecke:not(.start-bloecke--fremd) > .start-block,
    .start-bloecke--reihen:not(.start-bloecke--fremd) > .start-block,
    .start-bloecke--fremd > .start-block--breit {
        grid-row: auto;
        grid-column: 1 / -1;
    }
}


/* ==================================================================
   DIE AUSRICHTUNG

   Eine Einstellung je Baustein: links, mittig, rechts. Sie wirkt auf
   den Inhalt und nicht auf den Baustein selbst - der steht in seiner
   Rasterspalte, und wo die liegt, sagt die Breite.

   text-align und nicht justify-items: der Wert soll bis in die
   Ueberschrift, den Vorspann und die Beschriftung jeder Kachel
   durchreichen, und das tut nur die vererbbare Eigenschaft. Die
   Kacheln selbst fuellen weiter ihre Spur - eine halbe Kachel in der
   Mitte waere keine Ausrichtung, sondern ein Loch daneben.

   Ohne Einstellung steht hier nichts, und dann gilt, was die Seite
   von sich aus macht. Das ist wichtig: eine Vorgabe von hier wuerde
   das Aussehen aendern, bevor jemand etwas eingestellt hat.
   ================================================================== */
.start-block__inhalt {
    text-align: var(--ausricht, inherit);
}

/* ---- Und die Kacheln ----

   text-align richtet Text aus, nicht Kaesten. Dafuer braucht es die
   Ausrichtung des Behaelters - und die heisst je nach Bauart anders.
   Darum drei Gruppen und nicht eine Regel fuer alles.

   Der Wert ist in allen dreien derselbe: start, center oder end.
   Diese drei gelten in Rastern wie in Flexzeilen; flex-start und
   flex-end waeren in einem Raster still ungueltig.

   Ohne eingestellte Ausrichtung steht nirgends etwas und alles
   bleibt, wie es ist.

   Die Listen sind namentlich und nicht geraten: es sind die
   Kachelbehaelter der gestaltbaren Seiten. Wer einen dazubaut,
   gehoert in die passende Gruppe. */

/* 1. Raster, die ihre Spalten selbst zaehlen - repeat(auto-fill,
      minmax(.., 1fr)). Ihre Spuren fuellen die Breite immer ganz
      aus, und was eine Zeile ganz ausfuellt, kann man nicht
      ausrichten: da ist kein Platz, in den etwas ruecken koennte.
      Deshalb werden sie zur Flexzeile - die Kacheln sind dann so
      breit, wie ihr Inhalt es verlangt. Die Luecken bleiben, weil
      gap in beiden Verfahren dasselbe bedeutet. */
.start-block--ausgerichtet .hub__kacheln,
.start-block--ausgerichtet .hub__todo,
.start-block--ausgerichtet .social__row,
.start-block--ausgerichtet .mine__grid,
.start-block--ausgerichtet .mine__blocklinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--ausricht-platz, start);
}

/* 2. Die rollende Kachelspalte. Sie BLEIBT ein Raster: wie viele
      Karten nebeneinander stehen, ist eine eigene Einstellung
      (--reihe), und eine Flexzeile wuerde sie stillschweigend
      uebergehen. Ausgerichtet wird deshalb innerhalb der Spur. */
.start-block--ausgerichtet .brett-rolle,
.start-block--ausgerichtet .liga-spalte {
    justify-items: var(--ausricht-platz, stretch);
}

/* 3. Die Turnierspalte steht untereinander - eine Flexspalte. Dort
      ist die Breite die QUERachse, und quer richtet align-items aus.
      justify-content haette dort die Karten nach unten geschoben. */
.start-block--ausgerichtet .tourney-grid {
    align-items: var(--ausricht-platz, start);
}