/* ============================================================================
Hyperscale — die Aufklapper der Kopfzeile
----------------------------------------------------------------------------
Hiess bis 16.09.2026 nav-uc.css und trug nur das Use-Case-Menue. Seit die
Produktliste Zeichen traegt und Resources einen eigenen Aufklapper hat,
stehen hier alle drei — der Name sagt das jetzt.
DREI AUFKLAPPER, EIN BAUTEIL. „Use Cases" und „Resources" benutzen dieselbe
Klasse `.dd-uc`; die zweite Klasse `.dd-res` regelt nur, wo das Feld haengt.
Das ist kein Sparen an Code, sondern die Zusage aus der Vorgabe: gleiche
Radien, gleiche Schatten, gleiche Bewegung, gleiche Hover-Regel. Wer hier
eine vierte Variante anlegt, statt eine der beiden zu erweitern, baut den
Unterschied wieder ein, der gerade verschwunden ist.
Eigene Datei, weil dieser Block ZWEI Abnehmer hat und keiner von beiden dem
anderen folgen kann:
· die 32 erzeugten Seiten verlinken ihn (neben pages.css)
· website/index.html bettet ihn ein — die Startseite laedt bewusst kein
externes Stylesheet und traegt deshalb ihre eigene Kopie der
Navigations-Stile inline (sync-visuals.py setzt ihn zwischen die
BLOCKS:CSS-Marker)
Stuende er in pages.css, waere er auf der Startseite wirkungslos — genau so
ist es am 13.09.2026 passiert: drei Spalten im Menue ueberall, nur nicht dort,
wo man zuerst hinsieht. Dieselbe Loesung wie bei theme.css.
========================================================================== */
/* ---------------------------------------------------------------------------
Die Bruecke ueber die Luecke
`.dd` haengt 10 px unter dem Menuepunkt. Diese 10 px gehoeren weder zum
noch zum Feld — wer mit der Maus geradewegs vom Wort zum Feld faehrt,
verlaesst dazwischen den Hover-Bereich, und das Feld klappt unter dem Zeiger
weg. Zwei Mittel, beide ohne JavaScript:
1. ein unsichtbarer Streifen ueber der Luecke, nur waehrend des Hoverns
vorhanden (dieselbe Technik wie `.dd .has-sub::after` in pages.css);
2. 120 ms Nachlauf beim SCHLIESSEN. Das Oeffnen bleibt sofort — die
Verzoegerung liegt in der Grundregel, die Hover-Regel setzt sie auf 0.
Ein kurzes Abrutschen kostet damit nichts mehr.
------------------------------------------------------------------------ */
.nav-links>li.has-dd::before{
content:"";position:absolute;left:0;right:0;top:100%;height:12px;display:none;
}
.nav-links>li.has-dd:hover::before{display:block}
.nav-links li>.dd{transition-delay:.12s}
/* Escape auf dem Menuepunkt: Feld zu, Fokus bleibt. `!important`, weil diese
Regel gegen `.nav-links li:focus-within>.dd` gewinnen muss — der Fokus liegt
ja weiterhin im , und genau das ist der Punkt. nav-menu.js setzt und
entfernt die Klasse. */
.nav-links>li.dd-zu>.dd{opacity:0!important;visibility:hidden!important}
.nav-links li:hover>.dd,.nav-links li:focus-within>.dd{transition-delay:0s}
/* Auf Touch-Geraeten gibt es kein Hovern; ab 1080px ist das Menue ohnehin ein
Akkordeon. Dort waere der Streifen nur eine unsichtbare Flaeche ueber dem
naechsten Menuepunkt. */
@media(max-width:1080px){
.nav-links>li.has-dd::before{display:none!important}
}
.uc-head{
font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim);
font-weight:600;padding:6px 14px 8px;margin:0;
}
/* ---------------------------------------------------------------------------
Use-Case-Menue — drei Spalten statt einer langen Liste
Vorher: sieben Eintraege untereinander, jeder mit einer Beschreibungszeile.
Das Menue war rund 520 px hoch und musste gelesen werden. Jetzt drei kurze
Spalten nebeneinander, Verben statt Saetze, ein Zeichen je Punkt — man
ueberfliegt es, statt es zu lesen.
`.dd-uc` ist ein mit Spalten, kein
: darin liegen drei echte Listen
mit je einer Ueberschrift. Der Screenreader sagt dann „drei Listen zu je zwei
bis drei Punkten" statt einer Liste mit eingestreuten Zwischenzeilen.
------------------------------------------------------------------------ */
/* `max-content` statt `minmax(186px,1fr)`: die Spalten sollen so breit sein wie
ihr laengster Eintrag und keinen Finger breiter. Mit einer Mindestbreite von
186 px wurde das Feld 712 px breit, obwohl der Inhalt weniger braucht — und
das Resources-Feld ragte damit 18 px ueber den linken Bildschirmrand hinaus. */
.dd.dd-uc{
display:grid;grid-template-columns:repeat(3,max-content);
gap:4px 14px;padding:14px;min-width:0;width:max-content;
}
.uc-col{min-width:0}
.uc-list{list-style:none;margin:0;padding:0;display:grid;gap:1px}
/* `.dd.dd-uc a` und nicht `.dd-uc a`: pages.css bzw. der Inline-Block der
Startseite setzen `.dd a{flex-direction:column}` (Name ueber Untertitel).
Beide Selektoren haben dieselbe Spezifitaet (0,1,1), also entscheidet die
Reihenfolge — und auf website/index.html steht der Inline-Block NACH dem
eingebetteten Inhalt dieser Datei. Folge: Zeichen ueber statt neben dem Text,
alles zentriert. Genau so stand das Use-Case-Menue seit dem 13.09.2026 auf
der Startseite, waehrend es auf allen anderen Seiten richtig aussah.
Die doppelte Klasse macht die Regel von der Reihenfolge unabhaengig. */
.dd.dd-uc a{
display:flex;flex-direction:row;align-items:center;gap:10px;
padding:9px 12px;border-radius:10px;
color:var(--text);text-decoration:none;font-size:14px;font-weight:500;
white-space:nowrap;transition:background .15s,color .15s;
}
.dd.dd-uc a:hover{background:rgba(var(--accent-rgb),.09)}
.uc-ic{
flex:none;display:inline-flex;color:var(--text-dim);
transition:color .15s,transform .15s;
}
.uc-ic svg{width:17px;height:17px;display:block}
.dd.dd-uc a:hover .uc-ic{color:var(--cyan);transform:translateX(1px)}
/* Der Abschlusslink sitzt unter allen drei Spalten. */
.uc-all{
grid-column:1/-1;display:block;margin-top:6px;padding:10px 12px 4px;
border-top:1px solid rgba(var(--line-rgb),.1);
color:var(--cyan);text-decoration:none;font-size:13.5px;
}
.uc-all:hover{text-decoration:underline}
@media(max-width:1080px){
.uc-head{padding:8px 14px 4px}
/* Gestapelt statt drei Spalten — und ohne feste Breite, sonst schiebt das
Menue die Seite auf. Grosse Tippflaechen, keine zweite Ebene: die Gruppen
sind Ueberschriften, nicht noch ein Akkordeon. Ein Akkordeon im Akkordeon
waere genau die verschachtelte Navigation, die hier nicht hingehoert. */
.dd.dd-uc{display:block;width:auto;padding:0 0 6px 14px}
.dd.dd-uc a{min-height:44px;font-size:15px;white-space:normal;justify-content:flex-start}
.uc-col + .uc-col{margin-top:6px}
.uc-all{padding:12px 12px 4px;min-height:44px}
}
/* ---------------------------------------------------------------------------
Aufklapper „Lösungen" — die fünf Produkte mit ihren Zeichen
Das Zeichen steht vor dem Namen und ist mit 30 px das Erste, was das Auge
trifft. Genau dafür ist es da: die fünf Produkte sollen auseinanderzuhalten
sein, bevor man den Namen gelesen hat.
`.dd a` ist sonst eine Spalte (Name über Untertitel). Hier liegt daneben ein
Bild, also eine Zeile — Bild | (Name / Untertitel).
------------------------------------------------------------------------ */
/* `.dd.dd-prod` statt `.dd-prod`: website/index.html traegt ihre Navigations-
Stile INLINE und der Block `.dd{min-width:250px}` steht dort NACH dem
eingebetteten Inhalt dieser Datei. Bei gleicher Spezifitaet gewinnt die
spaetere Regel — mit 250 px brach „Leadgenerierung & Follow-ups" um und
jeder zweite Eintrag wurde zweizeilig. Die doppelte Klasse hebt die
Spezifitaet um eine Stufe und macht die Regel von der Reihenfolge
unabhaengig. Gleiches gilt fuer `.dd.dd-res` weiter unten. */
.dd.dd-prod{min-width:330px;padding:8px}
.dd-prod>li>a{
flex-direction:row;align-items:center;gap:12px;padding:9px 10px;
}
.p-ic{
flex:none;display:block;object-fit:contain;
/* Das Bild ist quadratisch und transparent — `contain` ist trotzdem gesetzt,
damit ein versehentlich nicht-quadratisches Ersatzbild später nicht
verzerrt, sondern kleiner wird. */
transition:transform var(--dur-base) var(--ease-out);
}
.p-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.p-tx b{font-weight:600;font-size:14.5px;line-height:1.25}
.p-tx small{color:var(--text-dim);font-weight:400;font-size:12.5px;line-height:1.3}
/* Hover: der Untergrund nimmt die Produktfarbe auf, das Zeichen wächst um
6 %. Bewusst KEIN zusätzlicher Schein — die Zeichen leuchten bereits von
sich aus, ein zweiter Schein darüber macht sie stumpf statt lebendig. */
.dd-prod>li>a:hover{background:rgba(var(--pa-rgb),.10)}
.dd-prod>li>a:hover .p-ic{transform:scale(1.06)}
.dd-prod>li>a:hover .p-tx small{color:var(--pa)}
.dd-prod>li>a:focus-visible{outline:2px solid var(--pa);outline-offset:-2px}
/* ---------------------------------------------------------------------------
Aufklapper „Resources"
Gleiches Bauteil wie das Use-Case-Menü (`.dd-uc`), deshalb steht hier fast
nichts. Nur zwei Dinge sind anders:
1. Die Titel sind länger („Claude Skills Starter Pack"), also brauchen die
Spalten mehr Grundbreite.
2. Das Feld hängt rechts statt links. „Resources" ist der vierte von sechs
Menüpunkten; ein rund 760 px breites Feld, das dort links ansetzt, ragt
auf einem 1280er Bildschirm über den rechten Rand hinaus und erzeugt
waagerechtes Scrollen auf jeder Seite der Website.
------------------------------------------------------------------------ */
@media(min-width:1081px){
.dd.dd-res{left:auto;right:0}
}
/* Unter rund 1340 px reicht der Platz links vom Menuepunkt nicht fuer drei
Spalten: bei 1081 px ragte das Feld 78 px ueber den linken Bildschirmrand
hinaus und wurde abgeschnitten. Zwei Spalten statt drei — die dritte Gruppe
rutscht in die zweite Zeile, der Abschlusslink bleibt darunter. Das ist die
ehrlichere Antwort auf wenig Platz als ein Feld, von dem ein Stueck fehlt. */
@media(min-width:1081px) and (max-width:1339px){
.dd.dd-res{grid-template-columns:repeat(2,max-content)}
}
/* ---------------------------------------------------------------------------
Mobil: bewusst NICHT dieselbe Navigation, nur schmaler
Am Schreibtisch gibt es Fläche, also dürfen Zeichen groß sein und unter jedem
Produkt eine Zeile stehen. Auf dem Handy zählt jede Zeile Scrollhöhe. Deshalb:
· der Untertitel verschwindet — der Produktname sagt bereits, worum es
geht, und „Leadgenerierung & Follow-ups" bricht auf 320 px ohnehin um
und macht aus jedem Eintrag drei Zeilen;
· das Zeichen schrumpft auf 22 px, bleibt aber da: es ist das, was die
fünf Produkte auf einen Blick trennt, und genau das braucht man auf
einem kleinen Bildschirm am meisten;
· die Tippfläche bleibt bei 44 px Höhe, auch wenn der Text nur eine Zeile
ist.
`min-width` MUSS hier zurückgesetzt werden. `.dd` wird mobil statisch; ein
Feld mit 330 px Mindestbreite im 14 px eingerückten Akkordeon schiebt auf
einem 320-px-Gerät die ganze Seite auf.
------------------------------------------------------------------------ */
@media(max-width:1080px){
.dd.dd-prod{min-width:0;padding:0 0 6px 14px}
.dd-prod>li>a{min-height:44px;padding:8px 12px;gap:11px}
.dd-prod .p-ic{width:22px;height:22px}
.p-tx small{display:none}
.p-tx b{font-size:15px}
/* Der Hover-Untergrund ist auf Touch der „klebende" Zustand nach dem Tippen.
Die Produktfarbe dort ist richtig, das Wachsen des Zeichens nicht — es
bliebe nach dem Antippen vergrößert stehen. */
.dd-prod>li>a:hover .p-ic{transform:none}
}
/* ---------- Mobiles Menue: Ebenen eingeklappt ----------
Gilt ueberall dort, wo die Kopfzeile ins Burger-Menue geklappt ist (bis 1080px).
Vorher stand jede Ebene offen — beim Oeffnen rund zwanzig Zeilen, und „Preise"
lag unter den fuenf Branchen von HyperVoice. Jetzt: erste Ebene sichtbar, ein
Tipp klappt die naechste auf.
`.nav-acc` setzt pages.js. Ohne Skript greift keine dieser Regeln und das Menue
ist wieder vollstaendig offen — sichtbar unschoen, aber nie unerreichbar. Die
beiden Bloecke darueber blenden .caret/.caret2 aus; hier kommen sie zurueck,
weil der Pfeil jetzt Zustand anzeigt statt Dekoration zu sein. */
@media(max-width:1080px){
.nav-acc>li{border-bottom:1px solid rgba(var(--line-rgb),.06)}
.nav-acc>li:last-child{border-bottom:none}
.nav-acc>li>a{min-height:48px;font-size:16px;padding:12px}
/* Linksbuendig, nicht zentriert. Die Regel stand bis 16.09.2026 auf `center`
und passte zu den damaligen Eintraegen: fuenf Produktnamen ohne Zeichen,
jeder fuer sich. Jetzt stehen in allen drei Aufklappern Listen unter
Gruppenueberschriften — und eine linksbuendige Ueberschrift ueber
zentrierten Punkten sieht aus, als waere eines von beidem vergessen
worden. Gelesen wird von links. */
.nav-acc .dd a{min-height:44px;justify-content:flex-start}
/* Zugeklappt ist der Normalfall; `.is-open` macht auf. */
.nav-acc .dd,.nav-acc .dd2{display:none}
.nav-acc li.is-open>.dd,.nav-acc li.is-open>.dd2{
display:block;
animation:navAcc var(--dur-base) var(--ease-out);
}
@keyframes navAcc{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:none}
}
/* Der Pfeil sagt, ob es weitergeht — und in welche Richtung es geht. */
.nav-acc .caret{
display:block;margin-left:auto;flex:none;
transform:rotate(45deg) translateY(-2px);
transition:transform var(--dur-base) var(--ease-out);
}
.nav-acc a[aria-expanded="true"] .caret{transform:rotate(225deg) translateY(2px)}
.nav-acc .caret2{
display:block;opacity:.8;
transform:translateY(-50%) rotate(135deg); /* zeigt nach unten: aufklappen */
transition:transform var(--dur-base) var(--ease-out);
}
.nav-acc a[aria-expanded="true"] .caret2{transform:translateY(-25%) rotate(-45deg)}
/* Antippen darf nicht wie ein toter Klick aussehen. */
.nav-acc a[aria-expanded]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-acc a[aria-expanded="true"]{color:var(--text);background:rgba(var(--accent-rgb),.07)}
.nav-acc a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:10px}
}