/* ====================================================================== bauteile.css — was auf MEHR ALS EINER Seite steht. Ein Bauteil ist ein Abschnitt in dieser Datei, keine eigene Datei. Bis zum 09.09.2026 war jedes eine: rahmen.css, inhaltsbox.css, burger.css, knopf.css, zeiger.css, chivels.css, boxrahmen.css, kalender.css. Acht Dateien, die vier verschiedenen Ordnungen folgten - mal ein Bauteil, mal eine Schrift, mal eine Seite. Reys Urteil dazu: „Das macht doch null komma null Sinn." DIE REIHENFOLGE DER ABSCHNITTE IST DIE KASKADE. Sie ist die heutige Ladereihenfolge der acht Dateien und darf nicht umgestellt werden: Der Burger hebt Regeln der Menü-Ecke auf und steht deshalb hinter ihr. Wer einen Abschnitt verschiebt, verschiebt Aussehen. Was hier NICHT hingehört: alles mit genau einem Nutzer. Das gehört der Seite und steht in ihrer Datei. ====================================================================== */ /* ==== Bauteil: Rahmen ==================================================== Der Seitenrahmen mit seinen vier Ecken. Liegt zuerst, weil alles andere in ihm sitzt. Stand bis zum 09.09.2026 in rahmen.css. */ /* ---- Der Rahmen: Ecken, Kanten und ihr Auftritt ----------------------- Diese Datei gehört zu jeder Seite, auf der ein .deco-frame steht - Startseite, interner Bereich, Musikseiten, Designsystem. Ihr Gegenstück ist rahmen.js, das die Teile einhängt. Warum eine eigene Datei. Bis zum 07.09.2026 stand der Rahmen in fünf HTML-Dateien wörtlich nebeneinander; zwei davon vermerken in ihrem eigenen Kommentar, sie seien "wörtlich aus index.html". Solange sich nichts ändert, fällt das nicht auf. An dem Tag, an dem die Ecken einschweben lernten, wäre dieselbe Änderung fünfmal zu machen gewesen - und beim ersten vergessenen Ort liefe sie auseinander. Der Inhalt ist unverändert aus public/index.html herausgeschnitten, nicht abgeschrieben. Geändert wurde genau eines: die Animation gilt jetzt für jeden Seitenrahmen, nicht mehr nur für den der Startseite. Was die Seite mitbringen muss, weil es ihr gehört und nicht dem Bauteil: --frame-color, --frame-mid, --frame-faint, --line, --cnr-u. Die Zeiten der Bewegung stehen hier - sie gehören zur Bewegung. */ :root { /* Startanimation der vier Ecken. Der Weg ist laenger als der Abstand des Rahmens zum Bildrand (--frame-inset, 2.8vmin) plus der Teil des Ornaments, der nach aussen steht (--cnr-u * .5): die Ecke beginnt also ausserhalb des Bildes und kommt herein, statt im Bild aus dem Nichts zu erscheinen. Die Zeit ist bewusst laenger als die des Menues (--fahrt, .5s) - das Menue reagiert auf einen Klick und darf nicht warten lassen, die Ecken empfangen jemanden. */ --ecken-weg: 4.2vmin; --ecken-zeit: .95s; /* Eigene Kurve statt der --fahrkurve der Startseite: die haben nur index.html und der interne Bereich, und eine Datei, die überall gilt, kann sich nicht auf ein Token verlassen, das es nur zweimal gibt. Der Wert ist derselbe. */ --ecken-kurve: cubic-bezier(.22, .9, .3, 1); /* ---- Die Winkel --------------------------------------------------- Rey am 07.09.2026: *„Was wäre, wenn wir innen einfach nur eine Ecken Linie machen. Gradient zu Transparenz, nur eben deutlich kürzer. Innenliegend. Dafür der ganze Schnörkelkack weg."* --eck-arm Länge eines Schenkels. Ein FESTER Wert, kein Anteil: ein Winkel ist eine Geste an der Ecke, und die ist an einer breiten Box nicht breiter als an einer schmalen. Der Deckel in Prozent greift nur, damit ein kleiner Kasten nicht doch zum Rechteck zugezogen wird. --eck-einzug Wie weit der Winkel INNERHALB der Kante sitzt. Genau das meint „innenliegend": er markiert die Ecke, statt sie nachzuzeichnen. */ --eck-arm: min(40px, 22%); --eck-einzug: 7px; } /* Am Seitenrahmen darf der Winkel groesser ausfallen. Ein Zeichen muss im Verhaeltnis zu dem stehen, was es markiert: 40px an einer Box von 690px sind eine Ecke, dieselben 40px an einem Rahmen von 1900px sind ein Fussel. */ .rahmen, .frame-overlay { --eck-arm: min(96px, 24%); } /* ---- Rahmen ------------------------------------------------------- Standard-Container, nicht nur fuer die Startseite: jede Content-Box nutzt dieselbe Klasse. Die durchgehende Linie ist der border des Elements selbst, die Ecken sitzen halb darueber. Die vier Ecken haengt buildFrames() ein – im Markup steht deshalb nur das eine Element. */ /* Die Kanten sind kein border. Ein border kann keinen Verlauf tragen, und jede Kante soll von der Ecke zur Mitte hin ausduennen: zur Mitte hin laeuft die Linie auf Null aus - dort ist nichts mehr, und das ist Absicht: der Rahmen soll die Ecken zeigen, nicht ein Rechteck ziehen. Sie sind seit dem 07.09.2026 auch kein Hintergrundbild des Rahmens mehr, sondern gehoeren den ECKEN. Jede der vier Ecken traegt zwei kurze Auslaeufer - einen waagerechten Richtung Kantenmitte, einen senkrechten -, die im Durchsichtigen enden. In Ruhe sieht das aus wie vorher; der Unterschied ist, woran es haengt. Eine Ecke kann sich nur bewegen, wenn ihre Linien mit ihr gehen, und ein Hintergrundbild des Rahmens geht nirgendwohin. Ohne diese Zerlegung gibt es die Einschweb-Animation weiter unten nicht. */ .deco-frame { position: relative; } .deco-frame > span { position: absolute; } /* ---- Die vier Eckgruppen ------------------------------------------- Eine Gruppe je Ecke, jede ein Viertel des Rahmens gross. Sie ist der Bezugsrahmen fuer die zwei Kantenstuecke (100 % = halbe Rahmenkante) UND das Teil, das sich bewegt - Ornament und Linien in einem Element, sonst laufen sie beim Einschweben auseinander. Die Ecke selbst sitzt darin an derselben Stelle wie vorher: die Gruppe hat an ihrer Ecke den Nullpunkt, den vorher der Rahmen hatte. */ .deco-frame > .eck-gruppe { position: absolute; width: 50%; height: 50%; /* Eine Gruppe legt sich ueber ein Viertel des Rahmeninhalts. Ohne das hier finge sie in einer Inhaltsbox die Klicks darauf ab. Was bedienbar ist, schaltet es einzeln wieder an - .ecken-knopf und .menue-feld tun das. */ pointer-events: none; } .eck-gruppe.top { top: 0; } .eck-gruppe.bottom { bottom: 0; } .eck-gruppe.left { left: 0; } .eck-gruppe.right { right: 0; } /* Die zwei Auslaeufer. Sie sitzen an den beiden Kanten, die sich in dieser Ecke treffen, und sind jeweils genau halb so lang wie die ganze Rahmenkante - zwei gegenueberliegende Ecken ergeben zusammen wieder die volle Kante. Die Verlaufsmarken sind die alten, nur auf die halbe Strecke umgerechnet: aus 14 % / 44 % einer ganzen Kante werden 28 % / 88 % einer halben. Das Bild in Ruhe ist damit dasselbe wie vor der Zerlegung, Pixel fuer Pixel. */ .eck-gruppe > .rahmen-kante { position: absolute; } .eck-gruppe.top > .rahmen-kante { top: 0; } .eck-gruppe.bottom > .rahmen-kante { bottom: 0; } .eck-gruppe.left > .rahmen-kante { left: 0; } .eck-gruppe.right > .rahmen-kante { right: 0; } .rahmen-kante.waagerecht { width: 100%; height: var(--line); } .rahmen-kante.senkrecht { width: var(--line); height: 100%; } .eck-gruppe.left > .rahmen-kante.waagerecht { background-image: linear-gradient(to right, var(--frame-color), var(--frame-mid) 28%, var(--frame-faint) 88%); } .eck-gruppe.right > .rahmen-kante.waagerecht { background-image: linear-gradient(to left, var(--frame-color), var(--frame-mid) 28%, var(--frame-faint) 88%); } .eck-gruppe.top > .rahmen-kante.senkrecht { background-image: linear-gradient(to bottom, var(--frame-color), var(--frame-mid) 28%, var(--frame-faint) 88%); } .eck-gruppe.bottom > .rahmen-kante.senkrecht { background-image: linear-gradient(to top, var(--frame-color), var(--frame-mid) 28%, var(--frame-faint) 88%); } /* ---- Der Winkel: das neue Eckzeichen ------------------------------- Er ERSETZT das alte Ornament, er ersetzt nicht den Rahmen. Rey am 07.09.2026, nachdem der Rand versehentlich mitgefallen war: *„Der eigentliche Rahmen drum herum bleibt aber. Also die Ecken sollen zusätzlich sein, zum eigentlichen Rahmen. Nur die Ecken eben anders."* Zwei kurze Linien, die sich innerhalb der Ecke treffen und nach innen ins Durchsichtige auslaufen. Sie haengen an der Gruppe und nicht am Ankerelement .corner: Die Gruppe hat ihren Nullpunkt genau auf der Rahmenecke, .corner sitzt absichtlich ein Stueck ausserhalb - ein Winkel von dort aus waere wieder aussen statt innen. Warum als ::before/::after und nicht als zwei weitere Elemente: Sie sollen mit der Gruppe einschweben, ohne dass rahmen.js etwas davon wissen muss. Was in der Gruppe steht, faehrt mit ihr. */ .eck-gruppe::before, .eck-gruppe::after { content: ""; position: absolute; pointer-events: none; } .eck-gruppe::before { width: var(--eck-arm); height: var(--line); } .eck-gruppe::after { width: var(--line); height: var(--eck-arm); } .eck-gruppe.top::before, .eck-gruppe.top::after { top: var(--eck-einzug); } .eck-gruppe.bottom::before, .eck-gruppe.bottom::after { bottom: var(--eck-einzug); } .eck-gruppe.left::before, .eck-gruppe.left::after { left: var(--eck-einzug); } .eck-gruppe.right::before, .eck-gruppe.right::after { right: var(--eck-einzug); } .eck-gruppe.left::before { background-image: linear-gradient(to right, var(--frame-color), transparent); } .eck-gruppe.right::before { background-image: linear-gradient(to left, var(--frame-color), transparent); } .eck-gruppe.top::after { background-image: linear-gradient(to bottom, var(--frame-color), transparent); } .eck-gruppe.bottom::after { background-image: linear-gradient(to top, var(--frame-color), transparent); } /* ---- Was von der Ecke uebrig ist ---------------------------------- Bis zum 07.09.2026 sass hier ein Ornament: ein Quadrat komplett ausserhalb der Ecke, dazu zwei ineinandergreifende Winkel aus je zwei Rahmenseiten - eine Treppe aus sechs Linien je Ecke, mal vier. Rey hat es abbestellt: *„Ich glaube, die sind zu laut. ... Dafuer der ganze Schnoerkelkack weg."* Die Zeichnung machen jetzt allein die beiden kurzen Auslaeufer oben. Das Element bleibt trotzdem stehen, leer und unsichtbar, und das ist kein Ueberbleibsel: Die Startseite haengt ihr Eckmenue daran ein (baueEcke() sucht `.eck-gruppe > .corner.top.left`), und seine Lage ist der Nullpunkt fuer Knopf und Menuefeld. Wer es entfernt, nimmt der Startseite ihre Navigation - deshalb bleiben Position und Groesse auf den Werten, die sie hatten. Nur gezeichnet wird nichts mehr. */ .deco-frame .corner { position: absolute; width: calc(var(--cnr-u) * .5); height: calc(var(--cnr-u) * .5); } .deco-frame .corner.left { left: calc(var(--cnr-u) * -.5); } .deco-frame .corner.right { right: calc(var(--cnr-u) * -.5); } .deco-frame .corner.top { top: calc(var(--cnr-u) * -.5); } .deco-frame .corner.bottom { bottom: calc(var(--cnr-u) * -.5); } /* Die Rauten auf den Kantenmitten sind raus. Sie sassen genau dort, wo die Linie ohnehin am schwaechsten ist, und waren damit vier Marken ohne etwas zu markieren - und sie haben verhindert, dass die Kante dort auf Null laufen konnte. */ /* ---- Die Ecken schweben ein ---------------------------------------- Beim Laden kommt jede Ecke aus IHRER Richtung: die obere linke von oben links, die untere rechte von unten rechts. Diagonal, weil eine Ecke aus zwei Richtungen zugleich besteht - waagerecht allein waere ein Schieben, senkrecht allein ein Fallen. Vier Richtungen, aber nur ein @keyframes: die Vorzeichen stehen als Eigenschaften an der Gruppe, und var() im transform loest sie je Element auf. Vier fast gleiche Keyframe-Bloecke waeren vier Orte, an denen dieselbe Dauer und dieselbe Kurve auseinanderlaufen kann. Der Lauf endet auf transform: none. Waehrend er laeuft, ist die Gruppe ein eigener Stapelkontext - danach nicht mehr, und die z-index der Menueteile zaehlen wieder gegen den Rahmen wie vorher. Deshalb kein fill-mode forwards mit einem Restwert. Es laeuft auf jeder Seite, aber nur am SEITENRAHMEN: auf der Startseite heisst der .frame-overlay, sonst .rahmen. Die Inhalts- kaesten des internen Bereichs tragen dasselbe Bauteil und bleiben bewusst still - der Rahmen empfaengt jemanden, ein Kasten ist Inhalt, und acht gleichzeitig einschwebende Kaesten waeren Unruhe statt Ankunft. */ .frame-overlay > .eck-gruppe, .rahmen > .eck-gruppe { animation: ecke-ein var(--ecken-zeit) var(--ecken-kurve) both; } .eck-gruppe.left { --weg-x: calc(var(--ecken-weg) * -1); } .eck-gruppe.right { --weg-x: var(--ecken-weg); } .eck-gruppe.top { --weg-y: calc(var(--ecken-weg) * -1); } .eck-gruppe.bottom { --weg-y: var(--ecken-weg); } @keyframes ecke-ein { from { opacity: 0; transform: translate(var(--weg-x), var(--weg-y)); } /* Deckend, bevor die Ecke steht: erst kommt sie an, dann sieht man sie ankommen. Ein Verlauf ueber die ganze Strecke liesse sie am Ende noch aufhellen, wenn sie sich schon nicht mehr bewegt. */ 60% { opacity: 1; } to { opacity: 1; transform: none; } } /* Wer Bewegung abbestellt hat, bekommt den Rahmen fertig hingestellt. */ @media (prefers-reduced-motion: reduce) { .frame-overlay > .eck-gruppe, .rahmen > .eck-gruppe { animation: none; } } /* ---- Warum die Kanten "rahmen-kante" heissen und nicht "kante" ------- Weil diese Datei auf JEDER Seite gilt und "kante" dort schon vergeben war: der interne Bereich nennt seit langem seine Listeneintraege so (border-left plus padding). Beim Umzug hierher haben die Rahmenkanten diese Regel geerbt und wurden vierzehn Pixel dick - auf dem Schirm ein zweiter, fetter Rahmen neben dem feinen. Rey hat es sofort gesehen. Ein .deco-frame davor haette es nicht geheilt, im Gegenteil: die Inhaltskaesten des internen Bereichs SIND .deco-frame, und ihre Listeneintraege stehen darin. Die Regel haette dann die Eintraege zerstoert statt die Kanten zu retten. Ein Bauteil, das ueberall gilt, braucht Namen, die ueberall frei sind. */ /* ==== Bauteil: Inhaltsbox ================================================ Die Kästen, in denen Inhalt steht. Stand bis zum 09.09.2026 in inhaltsbox.css. */ /* ==================================================================== DIE INHALTSBOX — das Bauteil für alles abseits der Startseite Gebaut am 07.09.2026 für den internen Bereich, auf Reys Auftrag über Livia: ein Content-Box-Design für alles abseits der Startseite. Es stand seither ausschließlich in server/intern.html. ── WARUM ES JETZT HIER STEHT ─────────────────────────────────── Board-Aufgabe 22: „Inhaltsbox auf weitere Bereiche ausdehnen … Das Bauteil steht bisher nur in server/intern.html; wenn es mehrfach gebraucht wird, gehört es an eine gemeinsame Stelle statt in jede Seite kopiert." Genau das ist mit der Über-uns-Ansicht eingetreten. Es ist dieselbe Lehre, die rahmen.js gezogen hat, als derselbe Dreizeiler in sechs Fassungen im Haus lag. ── WAS HIER STEHT UND WAS NICHT ──────────────────────────────── Hier steht das Bauteil: Linie, Ecken, der Titel auf der Oberkante, die Abstände. NICHT hier steht, was eine einzelne Seite daraus macht — im internen Bereich etwa die weichgezeichnete Bildschicht hinter jeder Box (.inhaltsbox::before, gestellt von grundStellen()). Die hängt am dortigen Hintergrundbild und hätte auf der Startseite, wo ein Video läuft, nichts zu suchen. Die vier Eckornamente hängt rahmen.js ein — jede Box trägt deshalb auch .deco-frame. ==================================================================== */ /* Die Maße stehen im :root und nicht an der Box selbst: --box-saum ist auch der Abstand, den Dinge NEBEN einer Box einhalten (die Leiste über dem Board etwa), und der bräuchte sonst eine zweite Zahl, die auseinanderläuft. --eckstein ist das Quadrat an der Titellücke: dort, wo eine Linie mitten im Raum aufhört. --box-saum ist der Platz, den das Bauteil AUSSERHALB seiner Linie braucht — das Ornament ragt hinaus, der Titel um seine halbe Versalhöhe. Er ist zugleich der Abstand zwischen zwei Spalten. --box-innen war am 07.09. zweimal Thema: erst 16px, dann 28px, dann Reys „Ne, mach mal bitte 40px". Die 40 sind auf seiner Messgrundlage 1920×1080 gemeint — dort sind 3.7vmin genau 39,96px. Ein fester Wert stünde hier falsch: jedes Maß dieser Seiten wächst mit dem Fenster. Die Linie ist NICHT die Leitfarbe. Rey am 07.09.: „Die Farbe der Rahmen zieht zu viel Aufmerksamkeit." Kupfer ist der Akzent für Menüstrich, Raute und Knopf — nicht die Umrandung von zwanzig Kästen gleichzeitig. */ :root { --eckstein: calc(var(--cnr-u, 1.6vmin) * .5); --box-saum: clamp(14px, 1.9vmin, 26px); --box-innen: clamp(1.5rem, 3.7vmin, 3.4rem); --box-grund: rgba(36, 26, 19, .86); --box-linie: #6E5340; } .inhaltsbox { position: relative; /* Ein einziger Griff: Rand, Eckornamente und Titellinie holen ihre Farbe alle aus --frame-color. Hier umgesetzt gilt der leisere Ton für alles, was zur Box gehört — und nur dafür. */ --frame-color: var(--box-linie); /* --cnr-u stellt nur noch den Nullpunkt des leeren Eck-Ankers; gezeichnet wird die Ecke vom Winkel INNERHALB der Linie. */ --cnr-u: 16px; margin: var(--box-saum); padding: var(--box-innen); background: var(--box-grund); border: var(--line, 1px) solid var(--frame-color); border-top: 0; /* Eigener Stapelkontext, damit eine Grundschicht mit z-index:-1 unter den Inhalt rutscht, statt hinter die ganze Seite zu fallen. */ isolation: isolate; } /* Ohne Titel gibt es nichts zu unterbrechen — dann schließt die Linie oben durch. */ .inhaltsbox:not(:has(> .inhaltsbox-titel)) { border-top: var(--line, 1px) solid var(--frame-color); } /* Die Kantenausläufer des gemeinsamen Rahmen-Bauteils bleiben aus: hier zieht der border die Linie durch. Übrig bleibt der Winkel innerhalb der Ecke. */ .inhaltsbox > .eck-gruppe > .rahmen-kante { display: none; } /* ---- Der Grund: das Kopfbild ein zweites Mal (08.09.2026) ---------- Unten in der Box liegt dasselbe Bild noch einmal - gezoomt, ins Braune gefaerbt, stark durchscheinend und an der Unterkante ausgerichtet. Der Kasten hat damit oben sein Bild und unten dessen Nachklang, statt unten nichts. ── WAS HIER VORHER STAND ─────────────────────────────────────── An dieser Stelle lag den Nachmittag ueber ein ICON aus der Sammlung (`.inhaltsbox.wappen`, Rezept aus design.md, Abschnitt 8: Bildmarke, entsaettigt, halbtransparent). Vier Fassungen, jede auf einen Zuruf - eingepasst und unten sitzend, dann lauter, dann ueber die ganze Box gefuellt, dann nur noch die untere Haelfte. Am Ende hat Rey die Icons ganz herausgenommen, als seine eigenen Kopfbilder dazukamen: „Die Wappen nehmen wir raus. Allerdings nehmen wir die gleichen Hintergrundbilder nochmal, etwas gezoomt, braun eingefaerbt, transparent (stark) und Position bottom." Das ist der bessere Zusammenhang: Ein zweites, fremdes Motiv im selben Kasten ist ein zweites Thema. Dasselbe Bild noch einmal ist eine Wiederholung - sie traegt, ohne etwas Neues zu behaupten. Die Regeln von Abschnitt 8 gelten unveraendert weiter: entsaettigen (sonst konkurriert die Farbe mit dem Text) und eine weiche Kante zum Text hin. Nur das Motiv ist ein anderes. ── DIE GRIFFE ────────────────────────────────────────────────── --grundbild die Quelle, als url(); ohne sie passiert nichts --grundbild-deckkraft wie deutlich --grundbild-saettigung 0 waere grau, 1 das Original --grundbild-zoom Hoehe, Anteil der Flaeche; >100% heisst gezoomt */ .inhaltsbox.grundbild::after { content: ""; /* Die untere Haelfte der Box, an ihrer Unterkante ausgerichtet. KEIN `overflow: hidden` an der Box - der Boxtitel sitzt AUF der Oberkante und waere zur Haelfte weg. Angeschnitten wird ueber den Bildausschnitt (der Zoom), nicht ueber einen Deckel. */ position: absolute; top: 50%; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; background: var(--grundbild) center bottom / auto var(--grundbild-zoom, 150%) no-repeat; opacity: var(--grundbild-deckkraft, .12); /* Braun statt bunt: sepia legt den Tonwert auf die Leitfarbe des Hauses, saturate nimmt der Vorlage ihre eigene Farbe. */ filter: saturate(var(--grundbild-saettigung, .25)) sepia(.8) brightness(.85); /* Die Oberkante MUSS weich sein, sonst liegt bei der halben Boxhoehe eine waagerechte Kante quer durch den Kasten - und die liest sich als Fehler, nicht als Bild. */ mask: linear-gradient(to top, #000 58%, transparent 100%); -webkit-mask: linear-gradient(to top, #000 58%, transparent 100%); } /* ---- Der Titel: die vierte Seite der Box --------------------------- Drei Seiten zieht der border. Die obere kann er nicht ziehen, weil dort der Titel steht und eine Lücke braucht, deren Breite erst der Text kennt. Also eine Flex-Zeile über die volle Breite: links und rechts ein Stück Linie mit dem Eckstein an seinem inneren Ende, dazwischen der Titel. Die Lücke ergibt sich, sie wird nicht gesetzt. */ .inhaltsbox-titel { position: absolute; z-index: 1; margin: 0; /* Auf der Linie, nicht darüber: die Zeile sitzt auf der Oberkante der Box und wird um ihre halbe Höhe hochgezogen. */ top: 0; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: clamp(.6rem, .9vmin, 1.1rem); /* Rey am 07.09.: die Titel nehmen zu wenig Präsenz ein. Sie sind die Aufschrift des Kastens, nicht sein Kleingedrucktes — also Grundgröße wie der Fließtext, nicht Beiwerk. Am selben Abend noch einmal nachgelegt: *„Auf Über uns sind die Titel in den Boxen zu klein. Hier bitte mal einen etwas größeren Standard."* Grundgröße war zu wenig — der Titel steht AUF der Oberkante, also in einer Zeile für sich, und teilt sich seine Höhe mit nichts. Ein Fünftel darüber trägt weit genug, ohne dass die Sperrung die schmalen Kästen sprengt. */ font-family: var(--font-btn); font-weight: 700; font-size: calc(var(--schrift, var(--fs-body, 1.0625rem)) * 1.2); letter-spacing: .18em; text-transform: uppercase; color: var(--bone); line-height: 1; text-shadow: var(--menue-schatten, 0 1px 3px rgba(0, 0, 0, .9), 0 0 14px rgba(0, 0, 0, .55)); } .inhaltsbox-titel::before, .inhaltsbox-titel::after { content: ""; flex: 1 1 0; min-width: 0; height: var(--eckstein); background-repeat: no-repeat; background-image: linear-gradient(var(--frame-color), var(--frame-color)), linear-gradient(var(--frame-color), var(--frame-color)); background-size: 100% var(--line, 1px), var(--eckstein) var(--eckstein); } /* Das Viereck jeweils am INNEREN Ende — dort hört die Linie auf. */ .inhaltsbox-titel::before { background-position: left center, right center; /* Die Sperrung hängt hinter dem letzten Buchstaben als Leerraum und macht die rechte Lücke breiter. Die linke bekommt ihn dazu, sonst steht der Titel sichtbar aus der Mitte. */ margin-right: .18em; } .inhaltsbox-titel::after { background-position: right center, left center; } /* ==== Bauteil: Burger ==================================================== Das Blatt, das auf schmalen Geräten aus der Ecke wird. Es hebt Regeln der Ecke auf und muss deshalb HINTER ihr stehen. Stand bis zum 09.09.2026 in burger.css. */ /* ---- Das Burger-Menü: eine Navigation für die ganze Seite ------------- Gehört zu jeder Seite, die burger.js einbindet – Startseite, interner Bereich, Musikseiten. Ihr Gegenstück ist burger.js, das den Knopf und die Schale einhängt und die vorhandenen Menüteile hineinzieht. ── WARUM ES DIESE DATEI GIBT ────────────────────────────────────── Rey am 07.09.2026: „Ein schlichtes Burger-Menü für die GESAMTE Seite, auf allen Seiten. Der Login-Bereich soll sich im Menü verbergen, gar nicht auf der normalen Seite sichtbar sein." Der Anlass war ein handfester Schaden: Auf dem Telefon lagen die Kontozeile („Willkommen, Rey ◆ Abmelden") und der Menüknopf („MENÜ") an derselben Stelle übereinander – beide oben, einer links, einer rechts, und auf 390 px ist rechts gleich links. Zu lesen war „WillkoMENÜmen, Rey", zu bedienen nichts. Genau das ist der Grund, warum der Login-Bereich hier nicht bloß umbricht, sondern ganz von der Seite verschwindet: Zwei Dinge, die um dieselbe Ecke streiten, löst man nicht mit mehr Platz, sondern indem eines woanders hingeht. Vorher gab es an zwei Stellen einen Notbehelf – auf der Startseite („DAS TELEFON") und im internen Bereich („SCHMAL"). Beide haben dasselbe Problem verschieden gelöst. Das ist hier zusammengeführt. ── WARUM DAS AUSSEHEN HIER NOCH EINMAL STEHT ────────────────────── Die umgezogenen Teile bringen ihr Aussehen NICHT mit. Es hängt an ihrem alten Ort: `.frame-overlay .ecken-inhalt a` auf der Startseite, `.menue-feld .ecken-inhalt a` im internen Bereich. Im Blatt greift keine der beiden Regeln mehr, und der erste Versuch sah entsprechend aus – blaue Standardverweise und ein weißer Systemknopf mitten im Kupfer. Das ist keine Doppelung aus Versehen, sondern der Punkt: Das Menü ist auf allen Seiten dasselbe, also steht sein Aussehen an einer Stelle und nicht in jeder Seite noch einmal anders. Was die Seite mitbringen muss, weil es ihr gehört: --frame-color, --frame-inset, --bone, --muted, --font-btn, --line. Rückfallwerte stehen überall dabei – eine Datei, die auf vier Seiten gilt, kann sich auf kein Token verlassen, das es nur auf dreien gibt. ==================================================================== */ /* ---- Der Knopf ------------------------------------------------------- Drei Striche, oben links, innerhalb der Rahmenlinie. Er liegt fest am Fenster (position: fixed) und nicht in der Bühne: Auf der Startseite trägt ein Vorfahr einen `filter`, und ein solcher Vorfahr wird zum Bezugsrahmen für „fixed" – deshalb hängt der Knopf am , wohin burger.js ihn setzt, und nicht im Rahmen. z-index 200: über dem Schleier der Schale (100), über allem, was die Seiten an Rahmen und Feldern stapeln (höchstens 20). */ .burger-knopf { all: unset; position: fixed; top: calc(var(--frame-inset, 10px) + 12px); left: calc(var(--frame-inset, 10px) + 12px); z-index: 200; display: none; /* schmal wird es block, siehe unten */ box-sizing: border-box; width: 46px; height: 46px; /* Touch-Ziel: über 44 px, sonst trifft es niemand */ padding: 13px 9px; cursor: pointer; } /* Zwei Pixel, nicht einer. Die Rahmenlinie ist haardünn, weil sie sich zurückhalten soll; dieser Knopf ist das Gegenteil – er ist der einzige Weg in die Navigation und muss gefunden werden. Derselbe Gedanke wie beim Startknopf: „der Button ist das Element, das gefunden werden muss, Rahmen und Ornamente dürfen dagegen fein bleiben." */ .burger-knopf i { display: block; height: 2px; border-radius: 1px; background: var(--frame-color, #DE9B72); /* Der Knopf steht über bewegtem Video. Eine dünne Linie verschwindet dort in jeder hellen Stelle – derselbe Grund, aus dem die Nachrichtenpunkte der Startseite einen Schatten tragen. */ box-shadow: 0 1px 3px rgba(0, 0, 0, .95); transition: transform .28s ease, opacity .2s ease, background .2s ease; } .burger-knopf i + i { margin-top: 6px; } .burger-knopf:hover i, .burger-knopf:focus-visible i { background: var(--copper-bright, #F2C4A2); } .burger-knopf:focus-visible { outline: var(--line, 1px) solid var(--copper-bright, #F2C4A2); } /* Offen wird aus dem Burger ein Kreuz: der obere Strich fährt auf die Mitte und dreht, der untere spiegelbildlich, der mittlere geht weg. 8px ist die halbe Strecke zwischen erstem und drittem Strich. */ .burger-offen .burger-knopf i:nth-child(1) { transform: translateY(8px) rotate(45deg); } .burger-offen .burger-knopf i:nth-child(2) { opacity: 0; } .burger-offen .burger-knopf i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ---- Die Schale ------------------------------------------------------ Der dunkle Schleier über der ganzen Fläche. Er ist bewusst fast deckend: Dahinter läuft ein Video, und eine Liste über bewegtem Bild liest sich nicht. Am breiten Schirm gibt es ihn nicht – dort ist das Feld klein genug, dass der Verlauf im Feld selbst reicht. */ .burger-schale { position: fixed; inset: 0; z-index: 100; display: none; /* Fast schwarz, nicht halb durchsichtig. Bei .82 stand die Liste über dem laufenden Video, und der Startknopf der Seite las sich mitten durch die Menüpunkte. Ein Rest Bild bleibt – gerade genug, dass man merkt, wohin man zurückkommt. */ background: rgba(9, 6, 4, .975); opacity: 0; transition: opacity .32s ease; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .burger-schale[hidden] { display: none; } /* ---- Das Blatt ------------------------------------------------------ Die Spalte mit den umgezogenen Teilen. Sie beginnt unter dem Knopf und nimmt die Breite, die da ist – „Breite nutzen schlägt Scrollen" gilt auch hier: Ein Menü, durch das man scrollen muss, ist eines zu viel. Ein Deckel steht trotzdem drin, damit auf einem Tablet quer die Einträge nicht auf einer Zeile von 900 px auseinanderfallen. */ .burger-blatt { box-sizing: border-box; min-height: 100%; max-width: 620px; padding: calc(var(--frame-inset, 10px) + 72px) calc(var(--frame-inset, 10px) + 22px) calc(var(--frame-inset, 10px) + 32px); display: flex; flex-direction: column; gap: 1.9rem; font-family: var(--font-btn, 'Cinzel', Georgia, serif); color: var(--bone, #F3F5F6); opacity: 0; transform: translateY(-10px); transition: opacity .3s ease .06s, transform .34s cubic-bezier(.22, .9, .3, 1) .06s; } /* ---- Nur auf dem Telefon -------------------------------------------- Ab welcher Breite, entscheidet burger.js: Es setzt die Klasse `burger-da` ans , sobald seine eigene Grenze greift. Warum nicht `@media` mit fester Zahl: Die Startseite schaltet bei 900 px um, der interne Bereich bei 1000 – dort steht neben dem Inhalt eine Navigationsspalte, die früher eng wird. Eine Datei für beide kann die Zahl deshalb nicht selbst kennen, und eine Media Query kann keine Variable lesen. */ .burger-da .burger-knopf { display: block; } /* `:not([hidden])` ist kein Zierrat. Ohne es gewinnt diese Regel gegen `.burger-schale[hidden]` weiter oben – gleiche Spezifität, und die spätere sticht. Die Schale wäre dann zwar durchsichtig, läge aber über der ganzen Seite und finge jeden Klick ab: Ein geschlossenes Menü, das die Seite unbedienbar macht, wäre genau der Fehler, den es beheben soll. */ .burger-da .burger-schale:not([hidden]) { display: block; } .burger-offen .burger-schale { opacity: 1; } .burger-offen .burger-blatt { opacity: 1; transform: none; } /* Solange offen, scrollt die Seite dahinter nicht mit. */ .burger-offen, .burger-offen body { overflow: hidden; } /* ==================================================================== DIE UMGEZOGENEN TEILE Alles ab hier gilt NUR im Blatt. Der erste Teil hebt auf, was an der Ecke gilt; der zweite setzt, was dort an einem Selektor hing, den es hier nicht gibt. Die Regeln sind absichtlich am Blatt aufgehängt und nicht an einer Bildschirmbreite: Was im Blatt liegt, ist im Blatt – unabhängig davon, welche Media Query die Seite sonst mitbringt. ==================================================================== */ /* Ein Fach je Herkunftsecke – links die Navigation, rechts der Login. Ein leeres Fach nimmt keinen Platz: Auf der Startseite ist das rechte Fach leer, solange der Server noch nicht geantwortet hat. */ .burger-fach { display: block; } .burger-fach:empty { display: none; } /* Eine Linie zwischen Navigation und Login. Sie sagt, dass hier etwas anderes anfängt – dieselbe Aufgabe wie der Trenner vor „Leitung" in der Liste, und dieselbe Zurückhaltung. */ .burger-fach + .burger-fach { border-top: var(--line, 1px) solid rgba(222, 155, 114, .2); padding-top: 1.7rem; } /* Absolute Lage aufheben. An der Ecke sitzt jedes dieser Teile auf einer gemessenen Koordinate (--menue-oben, --feld-oben, style.top); hier stehen sie einfach untereinander. */ .burger-blatt .ecken-knopf, .burger-blatt .ecken-konto, .burger-blatt .menue-feld { position: static; inset: auto; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: auto; margin: 0; transform: none; opacity: 1; visibility: visible; pointer-events: auto; } /* Der gezeichnete Winkel, der Grund und der Schweif gehören zur Auftrittsbewegung an der Ecke. Im Blatt gibt es keine Ecke, an der etwas entlangfahren könnte. */ .burger-blatt .menue-riss, .burger-blatt .menue-grund, .burger-blatt .menue-schweif, .burger-blatt .zielrahmen, .burger-blatt .roll { display: none; } /* Das Feld ist im Blatt immer offen. An der Ecke hängt seine Sichtbarkeit an `.corner.offen` bzw. `.menue-feld.gezogen`; beides setzt eine Messung, die hier nicht läuft. Genau daran war die Navigation des internen Bereichs am 07.09. vorhanden und trotzdem unsichtbar: Die Einträge standen auf opacity 0 und warteten auf eine Klasse, die nie kam. */ .burger-blatt .menue-feld { clip-path: none; -webkit-clip-path: none; -webkit-mask-image: none; mask-image: none; padding: 0; background: none; border: 0; } .burger-blatt .menue-feld .ecken-inhalt li, .burger-blatt .menue-feld .ecken-inhalt > * { opacity: 1; transform: none; } /* ---- Die Einträge --------------------------------------------------- Linksbündig untereinander, nicht rechtsbündig wie an der Ecke: Eine Liste, die man mit dem Daumen abfährt, beginnt links, wo auch der Text beginnt. Touch-Ziele über 44 px – ein 21 px hohes Wort trifft niemand. `display: block` auf dem Verweis, nicht `inline-block`: So ist die ganze Zeilenbreite anklickbar und nicht nur das Wort. */ .burger-blatt .ecken-inhalt { margin: 0; padding: 0; list-style: none; text-align: left; display: block; columns: auto; } .burger-blatt .ecken-inhalt > * { margin: 0; } .burger-blatt .ecken-inhalt li { position: relative; } .burger-blatt .ecken-inhalt a { display: block; padding: .42em 0; font-family: var(--font-btn, 'Cinzel', Georgia, serif); font-size: clamp(1.3rem, 5.6vw, 1.75rem); line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--bone, #F3F5F6); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); cursor: pointer; transition: color .25s; } .burger-blatt .ecken-inhalt a:hover { color: var(--frame-color, #DE9B72); } /* Der Trenner vor einer Gruppe bleibt – er sagt, dass hier etwas anderes anfängt (Leitung, Admin). Nur der Weg dorthin ist ein anderer: an der Ecke ein Abstand nach oben, hier eine Linie über die Blattbreite. */ .burger-blatt .ecken-inhalt li.trenn { margin-top: .6rem; padding-top: .6rem; border-top: var(--line, 1px) solid rgba(222, 155, 114, .2); } .burger-blatt .ecken-inhalt li.trenn::before { display: none; } .burger-blatt .ecken-inhalt li[hidden] { display: none; } /* Die aktive Seite. An der Ecke ist es ein Strich, der von rechts heranfährt; hier eine Raute davor – links, wo die Zeile beginnt. */ .burger-blatt .ecken-inhalt a.aktiv::after { display: none; } .burger-blatt .ecken-inhalt a.aktiv { color: var(--copper-bright, #F2C4A2); padding-left: 1.15em; } .burger-blatt .ecken-inhalt a.aktiv::before { content: ""; position: absolute; left: .1em; top: 50%; width: .4em; height: .4em; margin-top: -.2em; background: var(--frame-color, #DE9B72); transform: rotate(45deg); } /* ---- Die Überschriften ---------------------------------------------- „MENÜ" und „LOGIN" sind an der Ecke Knöpfe, die ein Feld aufziehen. Im Blatt ist alles schon offen – dort sind sie Überschriften, und ein Klick darauf soll nichts zuklappen. `pointer-events: none` gilt deshalb nur für den Klappknopf (den mit aria-expanded), nicht für die Kontozeile: Die ist im Markup derselbe Baustein, trägt aber „Abmelden" und den Weg zur Startseite in sich. */ .burger-blatt button.ecken-knopf[aria-expanded] { all: unset; pointer-events: none; display: block; margin-bottom: .9rem; font-family: var(--font-btn, 'Cinzel', Georgia, serif); font-size: .8rem; letter-spacing: .34em; text-transform: uppercase; color: var(--muted, #9C8878); } .burger-blatt button.ecken-knopf[aria-expanded]::after, .burger-blatt button.ecken-knopf[aria-expanded]::before { display: none; } /* Die Wortmarke des internen Bereichs bleibt auf der Seite stehen – sie ist die Identität der Seite, kein Menüpunkt. Zieht sie jemand doch ins Blatt, soll sie wenigstens nicht wie eine Überschrift aussehen. */ .burger-blatt .ecken-marke { font-size: 1.4rem; } /* ---- Die Kontozeile ------------------------------------------------- An der Ecke ist sie EINE Zeile mit nowrap – das ist dort richtig und hier die Ursache dafür, dass die halbe Zeile links aus dem Bild stand. Im Blatt darf sie umbrechen, und ihre Teile stehen als Reihe mit Abstand. */ .burger-blatt .ecken-konto { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; white-space: normal; gap: .4em .9em; font-family: var(--font-btn, 'Cinzel', Georgia, serif); font-size: 1.05rem; letter-spacing: .1em; color: var(--bone, #F3F5F6); cursor: default; } .burger-blatt .ecken-konto a, .burger-blatt .ecken-konto button { all: unset; cursor: pointer; padding: .4em 0; font: inherit; letter-spacing: inherit; color: inherit; transition: color .25s; } .burger-blatt .ecken-konto a:hover, .burger-blatt .ecken-konto button:hover { color: var(--frame-color, #DE9B72); } /* „Abmelden" ist eine Handlung, der Gruß daneben eine Aussage. Zwei Farben in der Zeile, nicht drei – so steht es auch an der Ecke. */ .burger-blatt .ecken-konto .ecken-abmelden { color: var(--frame-color, #DE9B72); } .burger-blatt .ecken-konto .ecken-abmelden:hover { color: var(--copper-bright, #F2C4A2); } /* Die Rolle ist eine Nebenangabe (nur im internen Bereich). */ .burger-blatt .ecken-konto .rolle { color: var(--muted, #9C8878); font-size: .82em; letter-spacing: .18em; text-transform: uppercase; } /* Die Raute zwischen den Teilen der Zeile. */ .burger-blatt .ecken-raute { width: .42em; height: .42em; align-self: center; background: var(--frame-color, #DE9B72); transform: rotate(45deg); opacity: .7; } /* ---- Die Anmeldemaske ----------------------------------------------- Volle Breite statt der gemessenen Feldbreite von der Ecke. Die Felder sind Eingaben – auf dem Telefon ist alles unter 44 px Höhe eine Zumutung, und ein zu kleines Feld lässt iOS beim Antippen hineinzoomen. Genau davor schützt die Schriftgröße von 16 px. */ .burger-blatt .login-maske { display: block; width: 100%; } .burger-blatt .login-feld { display: block; margin: 0 0 1rem; font-family: var(--font-body, 'Jost', system-ui, sans-serif); } .burger-blatt .login-feld > span { display: block; margin-bottom: .3rem; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted, #9C8878); } .burger-blatt .login-feld input { display: block; width: 100%; box-sizing: border-box; min-height: 46px; padding: .5em .7em; font: inherit; font-size: 16px; color: var(--bone, #F3F5F6); background: rgba(10, 14, 19, .74); border: var(--line, 1px) solid rgba(242, 196, 162, .35); border-radius: 0; appearance: none; -webkit-appearance: none; } .burger-blatt .login-feld input:focus { outline: none; border-color: var(--frame-color, #DE9B72); } .burger-blatt .login-los { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 46px; margin-top: 1.1rem; padding: .6em 1em; text-align: center; cursor: pointer; font-family: var(--font-btn, 'Cinzel', Georgia, serif); font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bone, #F3F5F6); background: rgba(10, 14, 19, .74); border: var(--line, 1px) solid rgba(242, 196, 162, .5); transition: color .25s, border-color .25s, background .25s; } .burger-blatt .login-los:hover { color: var(--frame-color, #DE9B72); border-color: var(--frame-color, #DE9B72); } /* Die FLÄCHE ist königsblau: Der Knopf gehört nicht dieser Seite, sondern Blizzard, und blau ist die Farbe, unter der Battle.net bekannt ist – das sagt es ohne Beschriftung. Der Rand bleibt kupfergold wie überall sonst; so bleibt der Knopf ein Teil dieser Seite und wird nicht zum Fremdkörper. Wörtlich dieselbe Begründung wie an der Ecke. */ .burger-blatt .login-bnet { display: block; width: 100%; box-sizing: border-box; min-height: 46px; margin-top: .9rem; padding: .7em 1em; text-align: center; text-decoration: none; font-family: var(--font-btn, 'Cinzel', Georgia, serif); font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: #DCE6FF; border: var(--line, 1px) solid var(--frame-color, #DE9B72); background: linear-gradient(180deg, rgba(74, 107, 216, .58), rgba(38, 60, 148, .42)), rgba(8, 11, 22, .88); text-shadow: 0 1px 3px rgba(0, 0, 0, .95); transition: color .25s, border-color .25s, background .25s; } .burger-blatt .login-bnet:hover { color: #FFFFFF; border-color: #F2C4A2; } .burger-blatt .login-bnet[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* Solange nebenan das Anmeldefenster steht, ist hier nichts zu tun – das soll man sehen. */ .burger-blatt .login-bnet.wartet { color: #A9B6D8; cursor: progress; } .burger-blatt .login-maske.wartet .login-feld, .burger-blatt .login-maske.wartet .login-los { opacity: .35; pointer-events: none; } .burger-blatt .login-hinweis { margin: .9rem 0 0; font-family: var(--font-body, 'Jost', system-ui, sans-serif); font-size: .92rem; line-height: 1.5; color: var(--bone, #F3F5F6); } .burger-blatt .login-hinweis.schlecht { color: #F2A98C; } .burger-blatt .login-hinweis[hidden] { display: none; } /* ---- Ruhe bewahren -------------------------------------------------- Wer im System weniger Bewegung eingestellt hat, bekommt das Menü ohne Fahrt – aber vollständig sichtbar. Das ist kein Detail: Ein Menü, das seine Sichtbarkeit an eine Animation hängt, ist ohne Animation weg. */ @media (prefers-reduced-motion: reduce) { .burger-schale, .burger-blatt, .burger-knopf i { transition: none; } .burger-blatt { transform: none; } } /* ==== Bauteil: Knopf ===================================================== Die Platte mit den Zierecken. Stand bis zum 09.09.2026 in knopf.css. */ /* ---- Der Knopf ------------------------------------------------------- Diese Datei gehört zu jeder Seite, auf der ein .btn steht - Startseite, interner Bereich, Musikseiten, Designsystem. Ihr Gegenstück ist knopf.js, das die Form zeichnet und die Verläufe einhängt. Warum eine eigene Datei. Bis zum 09.09.2026 stand der Knopf in vier HTML-Dateien nebeneinander, und die Zeichenfunktion dazu ein viertes Mal in zwei Skripten - zwei davon vermerken im eigenen Kommentar, sie seien "wörtlich der Baustein der Startseite". Wörtlich waren sie es längst nicht mehr: Reys Änderung vom 07.09. (höher, schmaler, mit reserviertem Rand) hatte nur der interne Bereich mitbekommen, die Startseite stand noch auf der Fassung davor. Genau das ist der Grund für dieselbe Zusammenlegung, die der Rahmen am 07.09. bekommen hat. DIE FORM, seit dem 09.09.2026: ein Achteck - ein Rechteck mit vier gebrochenen Ecken. Davor war es ein Sechseck mit 45°-Spitzen und einer Raute auf jeder Spitze. Reys Befund an dem Tag: "Das Alte ist mir zu auffällig und platzraubend." Platzraubend war es messbar, und die Ursache lag nicht in der Breite der Platte: Spitze (halbe Höhe) und Raute standen ÜBER die Fläche hinaus, und damit sie nirgends abgeschnitten wurden, reservierte der Knopf sich links und rechts je rund eine Knopfhöhe - bei 18 px Schrift sind das zweimal 49 px, an denen nichts steht. Drei Knöpfe in einer Zeile belegten so 891 px. Die neue Form bleibt vollständig INNERHALB ihrer Fläche; derselbe Satz Knöpfe braucht 590 px und ist 30 statt 49 px hoch. Die Entwürfe, aus denen gewählt wurde, stehen weiter unter /werkzeuge/knopf-entwurf.html. Auffällig war die Vorgabe, nicht die Ausnahme: Der Knopf war der einzige schwere Baustein im sonst feinen System. Das dreht sich um - leise ist jetzt der Normalfall, .schwer die Ausnahme für den einen Auftritt, der gefunden werden MUSS. Was die Seite mitbringen muss, weil es ihr gehört und nicht dem Bauteil: --btn-size, --font-btn, --copper, --copper-bright, --copper-deep, --outline. Alles Übrige rechnet in em daran. */ .btn { /* all: unset steht ZUERST - im Original stand es hinter display:flex und hat es wieder zurückgesetzt. */ all: unset; position: relative; /* Eigener Stapelkontext, damit das SVG mit z-index:-1 hinter den Text rutscht, ohne hinter die Seite zu fallen. Ohne das liegt die Form ÜBER der Beschriftung: positionierte Nachfahren werden nach dem Inline-Inhalt gemalt. */ isolation: isolate; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-btn); font-weight: 700; font-size: var(--btn-size, 1rem); letter-spacing: .1em; text-transform: uppercase; color: var(--copper); text-shadow: var(--menue-schatten, 0 1px 2px rgba(0, 0, 0, .8)); /* Kein margin-inline mehr. Das war der reservierte Rand für Spitze und Raute; beide gibt es nicht mehr, und die Achteckform endet an der eigenen Kante. */ height: 2.05em; padding: 0 1.15em; cursor: pointer; transition: color 180ms ease; } .btn:hover, .btn.is-hover { color: var(--copper-bright); } .btn:active, .btn.is-active { color: var(--copper-deep); } .btn:focus-visible { color: var(--copper-bright); outline: 1px dashed var(--copper-bright); outline-offset: .4em; } .btn[disabled] { opacity: .38; cursor: default; } .btn > svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; /* hinter die Beschriftung */ pointer-events: none; } /* Die Kontur ist EIN . Setzt man sie aus Elementen mit border zusammen, treffen an den acht Übergängen zwischen Waagerechter und Schräge zwei getrennte Rahmen stumpf aufeinander - CSS verbindet Rahmenseiten nur INNERHALB eines Elements auf Gehrung. Übrig bliebe eine sichtbare Stufe, links und rechts unterschiedlich stark, weil die Knopfbreite vom Text abhängt und auf krummen Pixelwerten landet. */ .btn > svg .grund { fill: rgba(30, 21, 15, .55); stroke: none; transition: fill 180ms ease; } .btn > svg .kern { fill: none; stroke: rgba(222, 155, 114, .62); transition: stroke 180ms ease; } .btn > svg .glanz { display: none; } .btn:hover > svg .grund, .btn.is-hover > svg .grund { fill: rgba(222, 155, 114, .10); } .btn:hover > svg .kern, .btn.is-hover > svg .kern { stroke: var(--copper-bright); } /* ---- Die schwere Fassung --------------------------------------------- Dieselbe Form mit Körper, Glanzkante und kräftiger Kontur. Sie ist die Ausnahme, nicht die Vorgabe: ein Auftritt je Ansicht, dort wo genau ein Element gefunden werden MUSS. Aufgebaut wie die Icons, in drei Lagen: Körper mit vertikalem Verlauf (kein Volleton, damit Tiefe entsteht), dicke Außenkontur in --outline, darin ein dünnerer Kupferstrich. Weil SVG-Striche mittig auf dem Pfad liegen, ergibt sich daraus von selbst dunkler Rand außen und Kupfer im Kern - ohne zweiten Pfad. Dazu die Glanzkante nur an der Oberkante: bei allen Icons kommt das Licht von schräg oben, das macht aus der Fläche eine Platte. */ .btn.schwer { color: var(--copper-bright); text-shadow: 0 2px 3px rgba(0, 0, 0, .8); } .btn.schwer > svg .grund { fill: url(#knopf-koerper); stroke: var(--outline); } .btn.schwer > svg .kern { stroke: url(#knopf-kupfer); } .btn.schwer > svg .glanz { display: block; fill: none; stroke: var(--copper-bright); opacity: .45; } .btn.schwer:hover > svg .grund, .btn.schwer.is-hover > svg .grund { fill: url(#knopf-koerper-hell); } .btn.schwer:active > svg .grund, .btn.schwer.is-active > svg .grund { fill: url(#knopf-koerper-tief); } .btn.schwer:hover, .btn.schwer.is-hover { color: #FFF3E4; } @media (prefers-reduced-motion: reduce) { .btn, .btn > svg .grund, .btn > svg .kern { transition: none; } }