/* ===========================================================================
Navigation
---------------------------------------------------------------------------
Symbol steht, beim Darüberfahren klappt es nach hinten weg und die
Beschriftung kippt von unten hoch. Die Klappmechanik kommt unverändert aus
flip.css – dieselbe Datei wie im Icon-Flip-Baustein, damit es nur eine
Quelle für den Effekt gibt.
Hier drin steht nur, was für die Navigation anders ist: Größe, Schrift und
die Symbole selbst.
Einbinden:
=========================================================================== */
/* --- Schrift --------------------------------------------------------------
Der eigene Schnitt der Band. Bold und ausgefüllt, wie festgelegt.
font-display: swap zeigt sofort eine Ersatzschrift, statt den Text
unsichtbar zu lassen, bis die Datei da ist. */
@font-face {
font-family: "UeberIch";
src: url("schrift/UeberIch-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "UeberIch";
src: url("schrift/UeberIch-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "UeberIch Outline";
src: url("schrift/UeberIchOutline-Bold.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* --- Größe ----------------------------------------------------------------
Abgeleitet aus dem Logo, nicht frei gegriffen.
Gemessen an "Über Ich Logo Abstract 1 Komplett": Ein Punkt hat 490 px
Außendurchmesser bei 4043 px Logobreite, also 12,1 % davon. Bei einem Logo
von min(50vw, 880px) ergibt das min(6.05vw, 106px) je Punkt.
Die Symbole sollen etwas größer sein als die Punkte – Faktor 1,2:
min(7.3vw, 128px)
Dadurch stehen Symbole und Logo in einem festen Verhältnis zueinander,
auf jedem Bildschirm gleich. */
.nav {
--symbol-groesse: min(7.3vw, 128px);
--nav-abstand: 3rem;
/* Schriftgröße der Beschriftung, als Anteil der Symbolgröße.
Achtung beim Einstellen: Die Versalhöhe beträgt nur rund 72 % der
nominellen Schriftgröße. Bei --text-faktor: 1 sind die Buchstaben also
etwa so hoch wie 72 % des Symbols, nicht gleich hoch. Wer Schrift und
Symbol optisch gleich groß haben will, braucht ungefähr 1.4. */
--text-faktor: .6;
/* Fangbereich: unsichtbarer Rand um jedes Symbol, der das Aufklappen
bereits auslöst. Dadurch steht der Mauszeiger beim Erscheinen der
Beschriftung nicht mitten darauf, und die Symbole sind leichter zu
treffen.
Darf höchstens die HÄLFTE des Abstands betragen – sonst überlappen
sich die Fangbereiche benachbarter Symbole und es klappt das falsche
auf. Bei --nav-abstand: 2.2rem sind 1.1rem die Obergrenze. */
--fangbereich: 1.4rem;
/* Hell statt dunkel. Auf dem Magenta ergibt fast Schwarz nur 2,3:1
Kontrast – beim großen Logo reicht das, bei dünnen Strichen auf 87 px
sind die Symbole damit praktisch unsichtbar. Fast Weiß liegt bei 6,4:1. */
--nav-farbe: #f4f0f8;
display: flex;
flex-wrap: wrap;
gap: var(--nav-abstand);
justify-content: center;
align-items: flex-start;
color: var(--nav-farbe);
}
/* Die Kachel richtet sich nach dem SYMBOL, nicht nach dem Text.
Die Beschriftung ist davon gelöst (siehe unten) und darf beliebig breit
werden, ohne die Anordnung zu beeinflussen. Vorher hing die Kachelbreite
am längsten Wort – bei großer Schrift wurde daraus eine 618 px breite
Kachel für ein 87 px großes Symbol, und jedes Symbol stand in einer
eigenen Zeile. */
.nav .flip {
--hoehe: var(--symbol-groesse);
--breite: calc(var(--symbol-groesse) * 1.15);
--symbol: calc(var(--symbol-groesse) * .86);
--fg: currentColor;
--akzent: currentColor;
}
/* Der Fangbereich. Ein unsichtbares Feld, das über die Kachel hinausragt.
Weil es ein Kindelement des Links ist, zählt das Überfahren als Hover
auf der Kachel – das Aufklappen wird also schon davor ausgelöst. */
.nav .flip { position: relative; }
.nav .flip::before {
content: "";
position: absolute;
inset: calc(var(--fangbereich) * -1);
}
/* Zum Sichtbarmachen beim Einstellen. */
.nav--fang-zeigen .flip::before {
outline: 1px dashed currentColor;
outline-offset: -1px;
opacity: .35;
}
/* Ohne Zeigegerät gibt es kein Hover – dort ist der Fangbereich sinnlos
und würde nur die Klickfläche der Nachbarn überlagern. */
@media (hover: none) {
.nav .flip::before { display: none; }
}
/* Das Symbol selbst: Strichzeichnung, Farbe kommt über currentColor. */
.nav .flip__flaeche svg {
width: var(--symbol);
height: var(--symbol);
overflow: visible; /* die Konturen liegen teils auf der Kante */
}
/* Beschriftung: von der Kachelbreite GELÖST.
width: max-content lässt sie genau so breit werden, wie der Text braucht;
left: 50% mit translateX(-50%) hält sie dabei mittig über dem Symbol.
Dadurch ist die Schriftgröße frei wählbar, ohne dass die Anordnung der
Symbole sich ändert.
Für die Klappbewegung ist das folgenlos – die Würfeltiefe kommt aus der
Höhe. Die Beschriftung ragt beim Aufklappen über die Kachel hinaus; da
immer nur eine Kachel gleichzeitig aufklappt, überlagert sie höchstens
kurz die Nachbarn. */
.nav .flip__flaeche--text {
inset: 0 auto 0 50%;
width: max-content;
transform: translateX(-50%) rotateX(-90deg) translateZ(calc(var(--hoehe) / 2));
font-family: "UeberIch", ui-sans-serif, system-ui, sans-serif;
font-weight: 700;
font-size: calc(var(--symbol-groesse) * var(--text-faktor));
letter-spacing: .04em;
text-transform: uppercase;
color: currentColor;
line-height: 1;
}
/* Auf schmalen Bildschirmen enger setzen. Die Beschriftung steht dort
ohnehin dauerhaft unter dem Symbol, weil es kein Hover gibt – das
regelt flip.css selbst. */
@media (hover: none) {
/* Ohne Hover steht die Beschriftung fest unter dem Symbol. Die Ablösung
von oben würde sie dort aus der Mitte reißen.
white-space:normal statt des ererbten nowrap aus flip.css – sonst läuft
eine lange Beschriftung (z. B. „TERMINE", „WHATSAPP") bei eng stehenden
Kacheln in die Nachbarspalte statt umzubrechen. */
.nav .flip__flaeche--text {
inset: auto;
width: auto;
transform: none;
white-space: normal;
text-align: center;
/* display:block statt des ererbten grid – als Grid-Container mit
place-items:center wächst die Fläche sonst auf die Breite des
Textinhalts, statt sich an der Kachelbreite zu brechen. */
display: block;
/* Beschriftungen wie "TERMINE" oder "WHATSAPP" sind ein einziges Wort –
ohne Leerzeichen bricht white-space:normal allein nicht um. */
overflow-wrap: break-word;
}
}
@media (max-width: 700px) {
.nav {
--symbol-groesse: min(16vw, 92px);
--nav-abstand: 1.4rem;
}
}