/* ---------------------------------------------------------------------------
   HfMT Hamburg — Kurzlinks

   Diese Datei macht aus dem neutralen flatlink-Theme den Auftritt der
   Hochschule für Musik und Theater Hamburg. Sie wird nach assets/style.css
   geladen und überschreibt es; der Kern bleibt dadurch aktualisierbar. Bei
   einem Update von flatlink wird sie nicht angefasst.

   Grundlage ist das Design-System der Hochschule (Version 1.0): Budge-Palais,
   Gold als einzige Signalfarbe, viel Weißraum, große Typografie,
   asymmetrische Anschnitte. Ausdrücklich vermieden werden dort SaaS-Optik,
   runde Karten, schwere Schatten und Universitäts-Baukasten – deshalb hat
   hier nichts einen Eckenradius und nichts einen Schlagschatten. Was
   Flächen trennt, ist eine Haarlinie.

   ZUR SCHRIFT: Die Hausschrift Futura ist NICHT eingebunden. Sie ist
   lizenzpflichtig, und eine Web-Lizenz deckt das Ausliefern an Dritte nicht
   automatisch mit ab. Stattdessen steht unten ein Stapel geometrischer
   Grotesk-Schriften, die auf den jeweiligen Systemen ohnehin vorhanden sind –
   Avenir Next (macOS, iOS), Century Gothic (Windows/Office), URW Gothic
   (Linux). Sie tragen denselben Charakter, ohne dass eine Schriftdatei den
   Server verlässt. Wer es näher am Original will, kann Jost* (SIL Open Font
   License) als Datei beilegen; siehe README-HfMT.md.
   --------------------------------------------------------------------------- */

:root {
    --paper: #FFFFFF;        /* Seitengrund – Weißraum ist das Gestaltungsmittel */
    --surface: #F7F4EF;      /* Karten, Flächen: warmes Papier statt Grau */
    --ink: #14110C;          /* Text und Ränder: warmes Schwarz */
    --muted: #5E5648;        /* Sekundärtext (7,2:1 auf Weiß) */
    --line: #E0D8CA;         /* Trennlinien */
    --accent: #CE9F56;       /* HfMT-Gold: Signal, nie Tapete */
    --accent-deep: #8A6520;  /* Gold als SCHRIFT – das reine Gold hat auf Weiß
                                nur 2,4:1 und wäre als Text unlesbar (5,3:1) */
    --accent-tint: #F6EEDF;  /* Hover, markierte Zeilen */
    --on-accent: #14110C;    /* Text auf Goldfläche: dunkel, nicht weiß
                                (Weiß auf Gold wären 2,4:1) */
    --radius: 0;             /* keine runden Ecken – siehe Kopf */

    --schrift: "Avenir Next", Avenir, "Century Gothic", "URW Gothic",
               Questrial, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* Die Fakultätsfarben. Sie werden hier nirgends flächig eingesetzt –
       sie stehen bereit, um Gruppen zu kennzeichnen, wenn das einmal
       gewünscht ist (Musik, Theater, Wissenschaft & Lehre, KMM, Präsidium). */
    --fak-musik: #009DE3;
    --fak-theater: #E6007E;
    --fak-wissenschaft: #1C3F86;
    --fak-kmm: #BB0E0C;
    --fak-praesidium: #008A80;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #12100C;
        --surface: #1C1913;
        --ink: #F2EDE4;
        --muted: #A79C89;
        --line: #2E2920;
        --accent: #DDB674;   /* aufgehellt: auf dunklem Grund 10:1 */
        --accent-deep: #E8CB98;
        --accent-tint: #241F16;
        --on-accent: #12100C;
    }
}

body {
    font-family: var(--schrift);
    letter-spacing: 0.005em;
}

/* --- Typografie: groß, ruhig, mit Luft ---------------------------------- */

h1 {
    font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-weight: 600;
    text-wrap: balance;
    margin: 0 0 0.7rem;
}
h2 {
    font-size: 1.35rem;
    letter-spacing: -0.015em;
    font-weight: 600;
}
h3 { letter-spacing: -0.01em; }

/* Kleine Auszeichnungen editorial: Versalien, weit gesperrt. */
.who, .site-head nav a.who {
    font-family: var(--schrift);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
}

/* --- Kopfzeile: Logo trägt den Namen ------------------------------------ */

.site-head { border-bottom: 1px solid var(--line); padding: 1.5rem 0 1.2rem; }
/* Das Logo trägt Silhouette, Wortmarke und Ortsangabe übereinander – zu klein
   skaliert wird die unterste Zeile unleserlich. */
.brand-logo { height: 3.2em; max-width: 15rem; }

/* Der Name steht bereits im Logo. Sichtbar wäre er doppelt – für
   Vorleseprogramme und für den Fall, dass das Bild nicht lädt, bleibt er
   trotzdem im Dokument. */
.brand-name {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
    /* Das Logo liegt in Gold auf Transparenz vor und steht auch dunkel gut;
       die Silhouette bekommt nur etwas mehr Leuchtkraft. */
    .brand-logo { filter: brightness(1.12); }
}

.site-head nav a {
    letter-spacing: 0.01em;
}
.site-head nav a:hover { color: var(--accent-deep); }

/* --- Der Palais als Wasserzeichen --------------------------------------- */

/* Das prägendste Element der Hochschule, aber leise: Es steht hinter dem
   ersten Block, angeschnitten am rechten Rand, in einer Deckkraft, die auf
   Papier gerade noch zu ahnen ist. Nie hinter Fließtext – nur dort, wo die
   Seite ohnehin Luft hat. */
.hero {
    position: relative;
    padding: 3.5rem 0 2.5rem;
}
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -14%;
    top: -1.5rem;
    width: min(52%, 30rem);
    aspect-ratio: 2000 / 1319;
    background: url("palais.png") right top / contain no-repeat;
    opacity: 0.10;
    pointer-events: none;
}
@media (prefers-color-scheme: dark) {
    .hero::before { opacity: 0.16; }
}
@media (max-width: 720px) {
    /* Am Handy hat die Seite die Luft nicht – dort stört das Motiv nur. */
    .hero::before { display: none; }
    .hero { padding: 2rem 0 1.5rem; }
}

/* --- Der Pinselzug hinter dem Akzentwort -------------------------------- */

/* Tritt an die Stelle, an der das neutrale Theme farbigen Text setzt. Der Zug
   liegt HINTER dem Wort, nicht darunter: Ein Unterstrich ist eine Auszeichnung,
   ein hinterlegter Pinselzug ist eine Geste – jemand hat die Stelle markiert.
   Dieselbe Rolle spielt bei 1337.kiwi der schiefe Markerstrich.

   Der Zug ist der HINTERGRUND des Wortes, kein Kasten dahinter. Das ist der
   Unterschied, auf den es ankommt: Bricht die Überschrift um, zerfällt ein
   Inline-Element in mehrere Zeilenfragmente, und einen Hintergrund bekommt
   jedes davon einzeln – jede Zeile also ihren eigenen Zug. Ein absolut
   gesetztes Pseudo-Element kennt nur EIN Rechteck über alle Fragmente hinweg
   und läge am Handy schräg über dem Umbruch. Aus demselben Grund
   box-decoration-break: clone – ohne das wird die Dekoration über die
   Fragmente hinweg aufgeschnitten statt je Fragment wiederholt.

   `100% 100%` streckt das Bild auf jedes Fragment: Bei einem kurzen Wort steht
   der Zug steiler als bei einem langen, so wie von Hand gezogene Striche
   aussehen. Die ausgefransten Kanten des PNG bleiben dabei erhalten – deshalb
   ein Bild und keine Fläche.

   Seitlich läuft er über den Text hinaus wie ein echter Marker; über negative
   Ränder, damit der Textfluss dadurch nicht verrutscht. Schrift bleibt --ink
   auf Gold (7,8:1), nicht Weiß – Weiß auf Gold wären 2,4:1. */
.hero .accent {
    color: var(--ink);
    -webkit-box-decoration-break: clone;
    -moz-box-decoration-break: clone;
    box-decoration-break: clone;
    margin: 0 -0.18em 0 -0.14em;
    padding: 0.06em 0.18em 0.1em 0.14em;
    background: url("pinsel.png") center / 100% 100% no-repeat;
}
@media (prefers-color-scheme: dark) {
    /* Im Dunkeln entfällt der Zug, und das Wort trägt das Gold selbst.

       Der Grund liegt in der Eigenschaft, die den Zug ausmacht: Er deckt das
       Wort absichtlich nicht vollständig, Buchstaben ragen heraus. Auf hellem
       Grund ist das folgenlos – was übersteht, steht auf Papier. Auf dunklem
       Grund führt es in eine Zwickmühle: --ink ist hier hell (#F2EDE4), und
       helle Schrift auf vollem Gold wäre kaum lesbar; die Schrift dunkel zu
       setzen hilft aber auch nicht, denn dann verschwände das Überstehende
       im Grund.

       Bis zum 25.08.2026 legte sich hier eine Lasur in Papierfarbe über das
       Bild und nahm dem Gold die Kraft – 6,5:1 zur hellen Schrift. Den Zug
       wegzulassen ist einfacher und liest sich besser: --accent-deep ist die
       Rolle „Akzent als Schrift" und steht auf dem dunklen Grund mit 12,1:1.

       Die Geste geht nicht verloren, sie wechselt das Mittel: hell markiert,
       dunkel hervorgehoben. */
    .hero .accent {
        background-image: none;
        color: var(--accent-deep);
        /* Ohne Zug braucht es die seitliche Überlänge nicht mehr – sie
           gehört zum Marker, nicht zum Wort. */
        margin: 0;
        padding: 0;
    }
}

/* --- Flächen: eckig, ohne Schatten -------------------------------------- */

.card {
    border-radius: 0;
    box-shadow: none;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 1.6rem 1.7rem;
}
/* Die Architektur-Ecke als Kennzeichen der hervorgehobenen Fläche. Sie sitzt
   dort, wo sonst ein Schlagschatten wäre: oben rechts, angeschnitten. */
.card.highlight {
    position: relative;
    background: var(--surface);
    border-color: var(--accent);
    overflow: hidden;
}
.card.highlight::after {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 5.5rem; height: 5.5rem;
    background: url("ecke.png") right top / contain no-repeat;
    opacity: 0.5;
    pointer-events: none;
}

/* --- Bedienelemente ----------------------------------------------------- */

.btn, button, input, select, textarea {
    border-radius: 0;
    font-family: inherit;
}
.btn {
    border: 1px solid var(--ink);
    letter-spacing: 0.02em;
}
.btn:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
    .btn-primary:hover { color: var(--paper); }
}

input:focus, select:focus, textarea:focus, .btn:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent-deep);
    outline-offset: 2px;
}

/* --- Meldungen: die Linie trägt die Farbe, nicht die Fläche ------------- */

.flash {
    border-radius: 0;
    border-left: 3px solid var(--accent);
}
.flash-ok { border-left-color: var(--fak-praesidium); }
.flash-err { border-left-color: var(--fak-kmm); }

/* --- Tabellen ----------------------------------------------------------- */

th {
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.7rem;
    color: var(--muted);
    font-weight: 600;
}
tr:hover td { background: var(--accent-tint); }

/* --- Fußzeile ----------------------------------------------------------- */

.site-foot {
    border-top: 1px solid var(--line);
    margin-top: 4rem;
}
.site-foot a:hover { color: var(--accent-deep); }