:root{
--bg:#13151a; --flaeche:#1a1e26; --flaeche2:#212734; --rand:#2c3444;
--text:#e6e9ee; --leise:#98a1b0; --akzent:#a78bfa; --akzent2:#c4b5fd;
--tank:#6aa9e0; --heal:#6fcf97; --dps:#e79268; --warn:#f0757c;
--gold:#f0d98c;
/* Drei Ebenen von oben nach unten, damit auf einen Blick klar ist, was
Navigation ist und wo der Guide anfaengt:
--nav Sprachwahl, Spendenzeile, Instanzreiter - tiefschwarz
--werkzeug Suche und Filter - eine Spur heller, die Zwischenebene
--bg der Guide selbst
Dazu die Kante in Akzentfarbe unter den Instanzreitern. Abschalten
heisst: --nav und --werkzeug auf var(--bg), Kante auf 1px --rand. */
--nav:#000000; --werkzeug:#08090c; --navkante:var(--akzent);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0; background:var(--bg); color:var(--text);
font:15px/1.6 "Segoe UI",system-ui,-apple-system,sans-serif;
}
h1,h2,h3,h4,h5{margin:0; line-height:1.25; font-weight:600}
/* Sprachumschaltung: alle Fassungen stehen im Dokument, sichtbar ist eine */
html[data-sprache="en"] .l:not(.l-en){display:none}
html[data-sprache="de"] .l:not(.l-de){display:none}
html[data-sprache="fr"] .l:not(.l-fr){display:none}
html[data-sprache="es"] .l:not(.l-es){display:none}
html[data-sprache="pt"] .l:not(.l-pt){display:none}
.ic{
display:inline-block; width:17px; height:17px; border-radius:3px;
background-size:cover; vertical-align:-3px; margin-right:4px;
box-shadow:0 0 0 1px rgba(0,0,0,.55); flex:0 0 auto;
}
header{
position:sticky; top:0; z-index:20; background:var(--bg);
border-bottom:1px solid var(--rand); box-shadow:0 6px 18px rgba(0,0,0,.45);
}
/* Kopf: nichts scrollt seitlich, alles bricht um. Drei Spalten, damit der
Spendensatz wirklich in der Mitte der Zeile steht und nicht nur in dem,
was die Sprachwahl uebrig laesst. */
.oben{
display:grid; grid-template-columns:1fr auto 1fr; gap:12px;
align-items:center; padding:13px 18px 11px;
background:var(--nav);
}
.sprachwahl{
display:flex; align-items:center; gap:6px; flex:0 0 auto;
color:var(--leise); font-size:11px; letter-spacing:.07em;
text-transform:uppercase; font-weight:700;
}
.sprachwahl select{
background:var(--flaeche); color:var(--text); border:1px solid var(--rand);
border-radius:7px; padding:4px 7px; font:inherit; font-size:12.5px;
font-weight:600; letter-spacing:0; text-transform:none; cursor:pointer;
}
.sprachwahl select:hover{border-color:var(--akzent)}
/* Logo und Sprachwahl teilen sich die linke Spalte. Das Logo steht ganz
aussen - es ist das Einzige in der Kopfzeile, das die Marke traegt,
der Seitentitel selbst steht erst auf dem Season-Reiter. */
.marke{
grid-column:1; justify-self:start; min-width:0;
display:flex; align-items:center; gap:26px;
}
/* Groesse kommt aus den width/height-Attributen, die LOGO_KANTE setzt -
damit steht sie an genau einer Stelle und laeuft nicht auseinander. */
.logo{flex:0 0 auto; display:block; border-radius:13px}
/* Der Spendensatz sitzt mittig in der sonst leeren Kopfzeile. Er hat
jetzt einen eigenen Platz mit Rahmen - dort kommt der Ko-fi-Knopf hin,
sobald die Adresse steht, und bis dahin sieht man, wo er hingehoert. */
.spende{
grid-column:2; display:flex; align-items:center; gap:12px; min-width:0;
justify-content:center; text-align:center;
padding:7px 16px; border:1px solid #333b4a; border-radius:10px;
background:rgba(255,255,255,.04); max-width:760px;
}
.spende > span{color:var(--leise); font-size:12.5px; line-height:1.5}
/* Eigene Schrift fuers Emoji: aus der Textschrift zusammengesetzt steht es
je nach Geraet schief, blass oder nur als Umriss da. */
.emo{
font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",
"Twemoji Mozilla",sans-serif;
font-style:normal; font-weight:400; font-size:14px; line-height:1;
vertical-align:-2px; white-space:nowrap;
}
.platzhalter{
flex:0 0 auto; color:#6b7382; font-size:11.5px; font-style:italic;
white-space:nowrap;
}
.spendenknopf{
flex:0 0 auto; text-decoration:none; white-space:nowrap;
background:var(--akzent); color:#14121c; font-size:12px; font-weight:700;
padding:5px 12px; border-radius:7px;
}
.spendenknopf:hover{background:var(--akzent2)}
/* Dieselbe Kiste ein zweites Mal, am Ende des Inhalts. Auf dem Desktop
ist sie unsichtbar - dort steht der Kasten wie eh und je im Kopf. Sie
wird erst im 820er-Block eingeschaltet, wo dafuer die Fassung im Kopf
verschwindet. Beide Schalter stehen zusammen, damit nie beide oder
keine der beiden sichtbar sind. */
.spende-unten{display:none}
/* Die Reiterleiste gehoert zur Navigation und steht deshalb auf demselben
Grund wie die Zeile darueber. Darunter beginnt mit einer Trennlinie das
Werkzeug: Suche und Filter. */
.reiterzeile{
padding:2px 18px 13px; background:var(--nav);
border-bottom:3px solid var(--navkante);
box-shadow:0 10px 26px rgba(0,0,0,.85);
}
nav.tabs{display:flex; gap:4px; flex-wrap:wrap; flex:1 1 auto; min-width:0}
/* Die Auswahlliste ist der Handy-Zwilling der Reiterleiste. Sie steht
immer im Dokument, damit das Skript sie nicht nachbauen muss, und
wird erst im 560er-Block sichtbar. Auf dem Desktop aendert sie
nichts - dort ist sie schlicht nicht da. */
.reiterwahl{display:none}
/* Die Instanznamen sind die Hauptnavigation - entsprechend gross und in
Farbe. Das Bildverhaeltnis 166:88 ist das der zugeschnittenen Textur,
damit object-fit:cover nichts mehr abschneiden muss. */
nav.tabs button{
flex:0 0 auto; background:transparent; border:1px solid transparent;
color:var(--akzent2); font:inherit; font-size:14.5px; font-weight:700;
padding:5px 11px; border-radius:8px; cursor:pointer; white-space:nowrap;
display:flex; align-items:center; gap:8px; letter-spacing:-.1px;
}
nav.tabs button img{
width:32px; aspect-ratio:166/88; height:auto; object-fit:cover;
border-radius:3px;
}
nav.tabs button:hover{color:#fff; background:var(--flaeche)}
nav.tabs button[aria-selected="true"]{
color:#12141a; background:var(--akzent); border-color:var(--akzent);
}
.werkzeug{
display:flex; gap:8px; align-items:center; padding:11px 18px 11px;
flex-wrap:wrap; background:var(--werkzeug);
}
/* Auf dem Season-Reiter gibt es nichts zu suchen und nichts zu filtern */
/* Auf dem Season-Reiter sind nur die FILTER aus - die Suche laeuft dort
quer durch alle Dungeons. Vorher lag die Ausgrauung ueber der ganzen
Werkzeugzeile: Das Suchfeld war bedienbar, sah aber gesperrt aus und
zeigte den Verbotscursor. Also nur noch das ausgrauen, was wirklich
nicht geht. */
/* ⚠️ 28.08.2026 korrigiert. Hier stand '.werkzeug.aus .filter{opacity:.38}',
also die Deckkraft auf der GRUPPE. Darunter stand
'.werkzeug.aus .filter a.fertig{opacity:1}' und sollte den
Metareport-Verweis davon ausnehmen - das kann nicht wirken: Deckkraft
eines Elternteils gilt fuer den ganzen Teilbaum, ein Kind kann sich
nicht daraus herausschreiben. Der Verweis war auf der Startseite
deshalb blass, obwohl er dort das Ziel ist, auf das der Guide zeigt.
Die Deckkraft liegt jetzt auf den KNOEPFEN, die wirklich gesperrt
sind. Der Verweis ist keiner. */
.werkzeug.aus .filter > button,
.werkzeug.aus .filterauf{opacity:.38}
.werkzeug.aus .filter button{cursor:not-allowed}
.werkzeug.aus .filter button:hover{color:var(--leise); background:none}
.suchfeld{position:relative; flex:0 1 320px; min-width:0}
.werkzeug input{
width:100%; min-width:0; background:var(--flaeche); color:var(--text);
border:1px solid var(--rand); border-radius:7px; padding:5px 10px;
font:inherit; font-size:12.5px;
}
.werkzeug input::placeholder{color:var(--leise)}
.werkzeug input:focus{outline:none; border-color:var(--akzent)}
/* Vorschlaege beim Tippen: ab zwei Zeichen die Bosse, ab drei zusaetzlich
Trash, Zauber und Themen. Was zum offenen Dungeon gehoert, steht oben. */
.vorschlaege{
position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px);
background:var(--flaeche2); border:1px solid var(--akzent);
border-radius:9px; box-shadow:0 12px 30px rgba(0,0,0,.55);
max-height:340px; overflow-y:auto; padding:4px;
}
.vorschlaege[hidden]{display:none}
.vorschlaege button{
display:flex; align-items:baseline; gap:8px; width:100%; text-align:left;
background:none; border:0; color:var(--text); font:inherit;
font-size:13px; padding:5px 8px; border-radius:6px; cursor:pointer;
}
.vorschlaege button:hover,.vorschlaege button.wahl{background:var(--flaeche)}
.vorschlaege button.wahl{box-shadow:inset 0 0 0 1px var(--rand)}
.vorschlaege .vname{flex:1 1 auto; min-width:0; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap}
.vorschlaege .vart{
flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; padding:1px 5px; border-radius:4px;
background:var(--flaeche); color:var(--leise);
}
.vorschlaege .v-boss{background:rgba(167,139,250,.22); color:var(--akzent2)}
.vorschlaege .v-thema{background:rgba(240,217,140,.18); color:var(--gold)}
.vorschlaege .vwo{flex:0 0 auto; color:var(--leise); font-size:11px}
/* Der gesuchte Begriff im Text - deutlich genug, um ihn zu finden, leise
genug, um den Satz noch zu lesen. */
mark.fund{
background:rgba(240,217,140,.26); color:inherit; border-radius:3px;
padding:0 1px; box-shadow:0 0 0 1px rgba(240,217,140,.35);
}
.filter{display:flex; gap:5px; flex-wrap:wrap}
/* Auf dem Desktop ist Platz fuer alle elf Filter nebeneinander. Auf dem
Handy brauchten sie drei bis vier Zeilen und schoben den Guide aus dem
Bild - dort stehen sie deshalb hinter einem Knopf. */
.filterauf{display:none}
.filter button.alles{
border-color:#3d4759; color:var(--text); margin-right:3px;
}
/* Derselbe Knopf, zwei Beschriftungen: im Dungeon "General guide", auf
dem Season-Reiter "Overview". Umgeschaltet wird ueber die Klasse, die
dort ohnehin schon Suche und Filter ausgraut. */
.a-season{display:none}
.werkzeug.aus .a-season{display:inline}
.werkzeug.aus .a-ini{display:none}
.filter button.alles[aria-pressed="true"]{
background:var(--flaeche2); border-color:var(--akzent); color:var(--akzent2);
}
.filter button{
background:var(--flaeche); border:1px solid var(--rand); color:var(--leise);
font:inherit; font-size:12px; font-weight:600; padding:5px 10px;
border-radius:7px; cursor:pointer; white-space:nowrap;
}
.filter button:hover{color:var(--text)}
.filter button[aria-pressed="true"]{
background:var(--akzent); border-color:var(--akzent); color:#12141a;
}
/* Der Metareport-Verweis. Sieht aus wie ein Filterknopf, weil er an
derselben Stelle steht, ist aber ein - die Filterlogik greift ueber
'.filter button' und laesst ihn deshalb in Ruhe. Akzentfarbe, damit
erkennbar bleibt, dass er woandershin fuehrt statt zu filtern. */
.filter a.fertig{
display:inline-flex; align-items:center; gap:5px;
background:var(--flaeche); border:1px solid var(--akzent);
color:var(--akzent2); font:inherit; font-size:12px; font-weight:600;
padding:5px 10px; border-radius:7px; white-space:nowrap;
text-decoration:none;
}
.filter a.fertig:hover{background:var(--akzent); color:#12141a}
/* Auf dem Season-Reiter - der Startseite - ist der Metareport das
einzige Ziel in dieser Zeile, das ueberhaupt irgendwohin fuehrt: die
Filter sind dort aus. Also steht er dort gefuellt statt nur umrandet:
hervorgehoben, nicht ausgegraut. */
.werkzeug.aus .filter a.fertig{
opacity:1; background:var(--akzent); border-color:var(--akzent);
color:#12141a;
}
.werkzeug.aus .filter a.fertig:hover{filter:brightness(1.1)}
/* Die zweite Ausgabe desselben Verweises, direkt in .werkzeug statt in
.filter. Auf dem Desktop unsichtbar - dort tut es der erste. Sie wird
erst im 820er-Block eingeschaltet, wo dafuer .filter samt seinem
Verweis verschwindet. Beide Schalter stehen zusammen, damit nie beide
oder keiner von beiden zu sehen ist. Siehe metaverweis(). */
.werkzeug > a.fertig{display:none}
.treffer{color:var(--leise); font-size:12.5px; white-space:nowrap}
/* Breit genug, dass grosse Schirme nicht halb leer bleiben, und schmal
genug, dass auf einem Laptop nichts abgeschnitten wird. Die Fliesstexte
der Bosse bleiben ueber max-width:78ch trotzdem gut lesbar. */
main{max-width:1800px; margin:0 auto; padding:20px 24px 80px}
.reiter{scroll-margin-top:0}
.dkopf{
display:flex; gap:16px; justify-content:space-between; align-items:center;
border-bottom:1px solid var(--rand); padding-bottom:13px; margin-bottom:13px;
}
/* Seitenverhaeltnis wie die zugeschnittene Textur: das Motiv fuellt das
Feld genau aus, ohne Rand und ohne Beschnitt. */
.dsymbol{
width:118px; aspect-ratio:166/88; height:auto; object-fit:cover;
border-radius:8px; border:1px solid var(--rand); flex:0 0 auto;
}
.dsymbol.klein{
width:48px; border-radius:4px; margin-right:9px; flex:0 0 auto;
}
/* Brotkrumen auf Instanz- und Bossseiten. Erzeugt werden sie in
mach_instanzseiten.py und mach_bossseiten.py, nicht hier - auf der
Uebersicht gibt es keinen Pfad, den man zeigen koennte.
⚠️ Sie sind SICHTBAR und nicht nur Auszeichnung. Ein BreadcrumbList,
der auf der Seite nicht zu sehen ist, verstoesst gegen Googles eigene
Vorgabe fuer strukturierte Daten - und nuetzt dem Leser nichts, der
auf einer Bossseite landet und nicht weiss, in welchem Dungeon er ist.
⚠️ Kein ld+json: script-src erlaubt nur 'self' und feste Pruefsummen.
Ein Inline-Skript je Seite braeuchte 188 verschiedene Summen in der
Kopfzeile. Microdata kommt ohne Skript aus und laesst die CSP in Ruhe. */
.brotkrumen{
display:flex; flex-wrap:wrap; align-items:center; gap:7px;
margin:0 0 9px; padding:0; list-style:none;
font-size:12px; color:var(--leise);
}
.brotkrumen li{display:flex; align-items:center; gap:7px; min-width:0}
.brotkrumen li+li::before{content:"\203A"; color:var(--rand)}
.brotkrumen a{color:var(--akzent2); text-decoration:none}
.brotkrumen a:hover{text-decoration:underline}
/* Die Bossleiste auf Instanz- und Bossseiten. Erzeugt in
mach_instanzseiten.py und mach_bossseiten.py.
⚠️ Sie ist nicht Schmuck, sondern der Grund, warum die 140
Bossseiten ueberhaupt gefunden werden: Bis zum 29.08.2026 hingen sie
NUR in der sitemap.xml und waren von keiner Seite aus verlinkt.
Suchmaschinen folgen Verweisen; eine Adresse, auf die nichts zeigt,
gilt ihnen als zweitrangig, egal was in der Sitemap steht. */
.bossleiste{
display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; padding:0;
list-style:none;
}
.bossleiste a,.bossleiste span{
display:inline-flex; align-items:center; min-height:30px;
padding:0 11px; border:1px solid var(--rand); border-radius:8px;
font-size:12px; font-weight:600; text-decoration:none;
color:var(--akzent2); background:var(--flaeche);
}
.bossleiste a:hover{border-color:var(--akzent); color:var(--text)}
/* Der Boss, auf dessen Seite man gerade steht - kein Verweis auf sich
selbst, sondern eine Markierung. */
.bossleiste span{
background:var(--akzent); border-color:var(--akzent); color:#12141a;
}
.dtitel{flex:1 1 auto}
.dtitel h1,.dtitel h2{font-size:26px; letter-spacing:-.3px}
.dmeta{margin:5px 0 0; color:var(--leise); font-size:12.5px}
/* Die Minutenzahl steht links unter dem Instanznamen, nicht am rechten
Rand - und daneben, wofuer sie gilt. */
.dtimer{
display:flex; align-items:baseline; gap:5px; margin:4px 0 0;
line-height:1; white-space:nowrap;
}
.dtimer b{font-size:30px; font-weight:700}
.dtimer span{color:var(--leise); font-size:13px}
.dtimer em{
font-style:normal; color:var(--leise); font-size:10.5px; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; margin-left:7px;
}
.skala{
display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
background:var(--flaeche); border:1px solid var(--rand); border-radius:9px;
padding:9px 13px; margin-bottom:12px;
}
.skala label{
display:flex; align-items:center; gap:6px; color:var(--leise);
font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
font-weight:700;
}
/* D4: Die Stufenwahl ist die einzige Stelle, an der man hier etwas
einstellt - sie war als graues Kaestchen kaum zu erkennen. Jetzt in
Akzentfarbe gerahmt und groesser. */
.skala select{
background:var(--flaeche2); color:var(--akzent2);
border:1px solid var(--akzent); border-radius:7px; padding:5px 9px;
font:inherit; font-size:15px; font-weight:700; letter-spacing:0;
text-transform:none; cursor:pointer;
}
.skala select:hover{background:rgba(167,139,250,.14)}
.skalawert{
color:var(--gold); font-size:17px; font-weight:700;
font-variant-numeric:tabular-nums;
}
/* Worauf sich der Prozentwert bezieht - ohne das ist die Zahl nackt. */
.skalaworauf{
color:var(--leise); font-size:12px; margin-left:-8px;
}
.skala .fussnote{flex:1 0 100%; margin:0}
/* Der Affixhinweis sagt, was in der Prozentzahl NICHT steckt. Er steht
deshalb etwas abgesetzt vom Satz darueber und traegt eine Kante in der
Warnfarbe - nicht laut, aber unterscheidbar. Wer nur den oberen Satz
liest, haelt die Zahl fuer den vollen Schaden. */
.skala .affixnote{
margin-top:6px; padding-left:9px;
border-left:2px solid var(--gold); color:#a9b2c1;
}
.dutil{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:12px}
.ulabel{
color:var(--leise); font-size:10.5px; letter-spacing:.09em;
text-transform:uppercase; font-weight:700; margin-right:4px;
}
.u{
display:inline-flex; align-items:baseline; gap:6px;
background:var(--flaeche); border:1px solid var(--rand); border-radius:6px;
padding:3px 9px; font-size:12.5px;
}
.ugewicht{
font-size:9.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; white-space:nowrap;
}
.uzusatz{color:var(--leise); font-size:11.5px}
/* Pflicht faellt auf, "nicht noetig" tritt zurueck - sonst liest sich
beides gleich wichtig, obwohl es das Gegenteil bedeutet */
.u-pflicht{border-color:#7a4a52; background:rgba(240,117,124,.12)}
.u-pflicht .ugewicht{color:var(--warn)}
.u-sehr{border-color:#4a6b52; background:rgba(111,207,151,.11)}
.u-sehr .ugewicht{color:var(--heal)}
.u-gut .ugewicht{color:#8fa3bd}
.u-ok .ugewicht{color:var(--leise)}
.u-optional{opacity:.72}
.u-optional .ugewicht{color:var(--leise)}
.u-nein{opacity:.5; border-style:dashed}
.u-nein .ugewicht{color:var(--leise)}
/* Etwas Luft zwischen dem duennen Hinweis und der Bossreihe darunter -
direkt aneinander wirkten die beiden Zeilen wie ein Block. Der Selektor
muss den Elementnamen tragen: .fussnote steht weiter unten im Stil und
setzte den Abstand sonst wieder auf null. Genau daher kam das gedraengte
Bild - es standen nie 12 px dazwischen, sondern keine. */
p.utilnote{margin:5px 0 20px}
/* Sprungleiste links, klebend. Wer auf den dritten Boss springt, kam
vorher nicht mehr zurueck an einen Sprungpunkt - die Leiste stand nur
oben. Jetzt laeuft sie mit, in Laufrichtung des Dungeons: Trash, Boss,
Trash, Boss. Unterhalb von 1100 px faellt sie in die alte waagerechte
Reihe zurueck, dort ist fuer eine Spalte kein Platz. */
.dinhalt{
display:grid; grid-template-columns:244px minmax(0,1fr); gap:26px;
align-items:start;
}
nav.sprung{
position:sticky; top:calc(var(--kopfhoehe, 190px) + 12px);
display:flex; flex-direction:column; gap:8px;
max-height:calc(100vh - var(--kopfhoehe, 190px) - 28px);
overflow:auto; padding-right:4px;
}
@media (max-width:1100px){
.dinhalt{grid-template-columns:minmax(0,1fr); gap:0}
nav.sprung{
position:static; flex-direction:row; flex-wrap:wrap; gap:7px;
max-height:none; margin-bottom:16px; overflow:visible;
}
}
/* Die Leiste ist der Weg durch den Dungeon: Bosse sind die Wegpunkte,
Trash ist die Strecke dazwischen. Bis zum 18.08.2026 sahen beide fast
gleich aus - gleiche Hoehe, fast gleiche Schrift, unterschieden nur
durch eine gestrichelte Linie; die Rangfolge war da, aber zu leise.
Jetzt tragen die Bosse Gewicht und einen Ring um das Portraet, der
Trash ist deutlich zurueckgenommen. */
nav.sprung a{
display:flex; align-items:center; gap:9px; padding:8px 14px 8px 6px;
background:var(--flaeche2); border:1px solid var(--rand); border-radius:22px;
font-size:14px; font-weight:600; text-decoration:none; color:var(--text);
}
/* Trasheintraege treten zurueck, muessen aber als Knopf erkennbar
bleiben - gestrichelt und blass allein sah nach Beschriftung aus, nicht
nach etwas zum Anklicken. Also derselbe Untergrund wie bei den Bossen,
nur eine Spur ruhiger.
⚠️ Nicht mehr gestrichelt: Seit dem 18.08.2026 tragen die gesperrten
Knoepfe mit Sanduhr eine gestrichelte Linie und bedeuten damit "kommt
spaeter". Trash ist anklickbar und darf nicht so aussehen. */
nav.sprung a.s-trash{
background:transparent; border-color:rgba(255,255,255,.07);
padding:5px 13px; font-size:12px; font-weight:400; color:var(--leise);
}
nav.sprung a.s-trash .s-art{
font-size:9.5px; letter-spacing:.07em; text-transform:uppercase;
color:var(--leise); flex:none; opacity:.65; font-weight:600;
}
/* Lieber zwei Zeilen als "Kyrakka and Erkhart Storm..." - in der Spalte
ist senkrecht Platz genug, waagerecht nicht. */
nav.sprung a.s-trash .s-ziel{line-height:1.35}
nav.sprung a.s-trash{align-items:flex-start}
nav.sprung a.s-trash .s-art{margin-top:2px}
nav.sprung a.s-trash:hover{color:var(--akzent2)}
/* Wo man gerade steht. Ohne das ist eine mitlaufende Leiste nur eine
Linkliste - man sieht nicht, an welcher Stelle im Dungeon man ist. */
nav.sprung a.hier{
border-color:var(--akzent); color:var(--akzent2);
background:rgba(167,139,250,.12);
}
nav.sprung a.hier img{box-shadow:0 0 0 2px var(--akzent)}
/* Der Ring macht aus dem Portraet einen Wegpunkt. Ohne ihn sind Boss- und
Trasheintrag zwei Zeilen mit unterschiedlicher Schriftgroesse; mit ihm
sieht man beim Ueberfliegen sofort, wo die Bosse sitzen. */
nav.sprung a img{
width:30px; height:30px; border-radius:50%; object-fit:cover;
object-position:50% 25%; box-shadow:0 0 0 2px rgba(167,139,250,.32);
}
nav.sprung a:hover{border-color:var(--akzent); color:var(--akzent2)}
nav.sprung a.s-trash:hover{
background:var(--flaeche); border-color:var(--akzent); color:var(--akzent2);
}
/* Filtert man etwas weg, verschwindet auch der Bossblock - der Knopf
dorthin fuehrte dann ins Leere und wirkte kaputt. Jetzt sieht man ihm
an, dass da gerade nichts zu holen ist. */
nav.sprung a.tot{
opacity:.3; cursor:not-allowed; text-decoration:line-through;
}
nav.sprung a.tot:hover{border-color:var(--rand); color:var(--text)}
.strom{display:flex; flex-direction:column; gap:14px}
.block{
background:var(--flaeche); border:1px solid var(--rand); border-radius:12px;
scroll-margin-top:170px;
}
/* Nach einem Sprung leuchtet der Block kurz auf. Am Ende der Seite kann
nicht mehr weit gescrollt werden - dann sieht man wenigstens, dass der
Klick angekommen ist. */
@keyframes blitz{
from{box-shadow:0 0 0 2px var(--akzent)}
to{box-shadow:0 0 0 2px rgba(167,139,250,0)}
}
.block:target{animation:blitz 1.4s ease-out}
.blitzen{animation:blitz 1.7s ease-out}
/* Jeder Block klappt gleich auf: Kopfzeile anklicken, rechts steht ein
Plus oder ein Minus. Vorher war der Bossblock der einzige, der fest
offenstand. */
details.block > summary{
display:flex; gap:10px; align-items:center; padding:13px 16px;
cursor:pointer; list-style:none; user-select:none;
}
details.block > summary::-webkit-details-marker{display:none}
details.block > summary::after{
content:"\2013"; margin-left:9px; color:var(--leise); font-size:20px;
font-weight:700; line-height:1; flex:0 0 auto; width:26px;
height:26px; display:flex; align-items:center; justify-content:center;
border:1px solid var(--rand); border-radius:6px;
}
details.block:not([open]) > summary::after{
content:"+"; color:var(--akzent2); border-color:var(--akzent);
background:rgba(167,139,250,.12);
}
details.block > summary:hover::after{color:var(--text)}
/* Vor dem Zeichen steht, was es tut - allein war das Plus zu unauffaellig */
.zeigen{
flex:0 0 auto; margin-left:12px; color:var(--akzent2); font-size:11.5px;
font-weight:700; letter-spacing:.06em; text-transform:uppercase;
white-space:nowrap;
}
details.block > summary:hover .zeigen{color:#fff}
details.block.trash > summary .z-auf{display:none}
details.block.trash[open] > summary .z-auf{display:inline}
details.block.trash[open] > summary .z-zu{display:none}
details.block.trash[open] > summary .zeigen{color:var(--leise)}
details.block > summary:hover{background:rgba(255,255,255,.02)}
/* Der Titel nimmt die freie Breite, damit Zaehler und Pluszeichen immer
ganz rechts stehen - in jedem Blocktyp an derselben Stelle. */
details.block > summary .btitel{flex:1 1 auto; min-width:0}
.btitel{font-size:17px; font-weight:600}
.zaehler{color:var(--leise); font-size:12px; flex:0 0 auto}
/* Zugeklappter Trash soll nicht uebersehen werden */
details.block.trash:not([open]) > summary .marke.trash{
background:var(--akzent); color:#14121c;
}
.block.boss{
border-color:#3a3355;
background:linear-gradient(180deg,#221d31,#1a1e26 150px);
padding:0 0 16px;
}
.block.boss > summary.blockkopf{
display:flex; gap:12px; align-items:center; padding:12px 16px 10px;
}
.marke{
font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
padding:3px 7px; border-radius:5px; flex:0 0 auto;
}
.marke.trash{background:#2a3340; color:#9fb4cc}
.marke.boss{background:var(--akzent); color:#14121c}
.marke.info{background:#33302a; color:#c9b48c}
.portrait{
width:54px; height:54px; border-radius:9px; object-fit:cover;
object-position:50% 22%; border:1px solid var(--rand); flex:0 0 auto;
}
.leerbild{
display:flex; align-items:center; justify-content:center;
background:var(--flaeche2); color:var(--leise); font-size:22px;
font-family:Georgia,serif;
}
.intro,.mobs{padding:0 16px 15px}
.intro p{margin:0 0 8px; color:var(--leise); font-size:13.5px}
.leer{color:var(--leise); font-style:italic}
.mobs{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px}
.mob{background:var(--flaeche2); border:1px solid var(--rand); border-radius:9px; padding:10px 13px}
.mob h4{
font-size:13px; letter-spacing:.03em; margin-bottom:7px;
color:var(--text); font-weight:700;
}
.mob ul{margin:0; padding:0; list-style:none}
.mob li{margin-bottom:6px; font-size:13.5px; line-height:1.5}
.mob li:last-child{margin-bottom:0}
/* Trash mit mehreren Wegen. Vorher standen drei Wegsaetze untereinander und
darunter ein einziges Raster mit allen 16 Gegnern - welcher zu welchem Weg
gehoert, war nicht zu sehen. Jetzt hat jede Gruppe ihre Ueberschrift und
ihr eigenes Raster. Die Polsterung unten bleibt beim Raster, damit zwei
aufeinanderfolgende Gruppen nicht die doppelte Luecke bekommen. */
.gruppe > .intro{padding-bottom:0}
.gruppe + .gruppe{margin-top:5px}
.gtitel{
display:flex; align-items:center; gap:9px;
padding:0 16px; margin-bottom:7px;
font-size:10.5px; font-weight:800; letter-spacing:.09em;
text-transform:uppercase; color:var(--akzent2);
}
.gtitel::after{content:""; flex:1; height:1px; background:var(--rand)}
.tag{
display:inline-block; font-size:9.5px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase; padding:1px 5px; border-radius:4px;
margin-right:5px; vertical-align:1px; white-space:nowrap;
}
.t-tank{background:rgba(106,169,224,.2); color:var(--tank)}
.t-heal{background:rgba(111,207,151,.2); color:var(--heal)}
.t-dps{background:rgba(231,146,104,.2); color:var(--dps)}
.t-interrupt{background:rgba(240,117,124,.2); color:#f0757c}
.t-dispel{background:rgba(126,209,209,.2); color:#7ed1d1}
.t-decurse{background:rgba(232,138,196,.2); color:#e88ac4}
/* Gift: giftgruen, deutlich neben dem Heilergruen (#6fcf97) und dem
Kite-Salbeigruen (#a5c295) - die drei duerfen sich nicht aehneln. */
.t-gift{background:rgba(184,217,74,.2); color:#c2dd63}
/* Krankheit: Braun, deutlich neben Gift und Fluch. */
.t-krankheit{background:rgba(176,138,95,.22); color:#c9a074}
.t-purge{background:rgba(200,160,240,.2); color:#c8a0f0}
.t-soak{background:rgba(240,217,140,.2); color:var(--gold)}
.t-dodge{background:rgba(169,138,217,.2); color:#b9a2e6}
.t-kite{background:rgba(150,180,140,.2); color:#a5c295}
.t-nocc{background:rgba(152,161,176,.18); color:var(--leise)}
.spell{
color:var(--gold); white-space:nowrap; cursor:help; outline:none;
border-radius:3px;
}
.spell:hover,.spell:focus{background:rgba(240,217,140,.13)}
#tip{
position:fixed; z-index:60; max-width:330px; pointer-events:none;
background:#0e1015; border:1px solid #3b4557; border-radius:9px;
padding:9px 12px 10px; box-shadow:0 10px 28px rgba(0,0,0,.6);
font-size:12.5px; line-height:1.5;
left:-9999px; top:0; visibility:hidden; opacity:0;
transition:opacity .08s linear;
}
#tip.an{visibility:visible; opacity:1}
#tip b{display:block; color:var(--gold); font-size:13.5px}
#tip span{display:block; color:var(--leise); font-size:11px; margin-top:1px}
#tip p{margin:6px 0 0; color:var(--text)}
#tip p:empty{display:none}
.bossinhalt{padding:0 16px}
.bosstext p{margin:0 0 10px; font-size:14px; max-width:78ch}
.kurz{
background:rgba(167,139,250,.09); border-left:3px solid var(--akzent);
border-radius:0 8px 8px 0; padding:9px 13px; margin-bottom:12px;
}
.kurz h5{
font-size:10.5px; letter-spacing:.09em; text-transform:uppercase;
color:var(--akzent2); margin-bottom:5px;
}
.kurz ul{margin:0; padding-left:15px}
.kurz li{font-size:13px; margin-bottom:3px}
.timeline{
background:var(--bg); border:1px solid var(--rand); border-radius:9px;
padding:11px 13px; margin-top:13px;
}
.timeline h5{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--leise)}
.timeline h5 .leise,.timeline h5 .fussnote{
text-transform:none; letter-spacing:0; font-weight:400; margin-left:7px;
font-size:11px; color:#7d8797;
}
.fussnote{margin:5px 0 0; color:var(--leise); font-size:11px; line-height:1.45}
/* Loest das einzige style="…"-Attribut der ganzen Seite ab. Solange es da
war, liess sich style-src nicht ueber Pruefsummen absichern - ein
Attribut hat keinen eigenen Block, den man hashen koennte, und haette
'unsafe-hashes' erzwungen. */
.abstand{margin-top:15px}
ol.tl{list-style:none; margin:9px 0 0; padding:0; columns:238px; column-gap:14px}
ol.tl li{
display:flex; gap:8px; align-items:baseline; padding:2.5px 7px;
border-radius:4px; margin-bottom:2px; font-size:12.5px;
border-left:3px solid transparent; break-inside:avoid;
}
ol.tl li[data-s]{cursor:help; outline:none}
ol.tl li[data-s]:hover,ol.tl li[data-s]:focus{filter:brightness(1.4)}
ol.tl .ic{width:15px; height:15px; vertical-align:-2px; margin-right:5px}
.tl-t{font-variant-numeric:tabular-nums; font-weight:700; min-width:34px; text-align:right; flex:0 0 auto}
.tl-a{flex:1 1 auto}
.tl-green{background:rgba(78,168,103,.14); border-left-color:#4ea867}
.tl-orange{background:rgba(217,138,74,.14); border-left-color:#d98a4a}
.tl-yellow{background:rgba(217,192,74,.14); border-left-color:#d9c04a}
.tl-purple{background:rgba(169,138,217,.14); border-left-color:#a98ad9}
.tl-blue{background:rgba(95,168,211,.14); border-left-color:#5fa8d3}
.tl-red{background:rgba(217,106,106,.14); border-left-color:#d96a6a}
.tl-brown{background:rgba(176,138,95,.14); border-left-color:#b08a5f}
.tl-none{background:rgba(152,161,176,.12); border-left-color:#98a1b0}
/* C2: abgeleiteter Handlungshinweis am Ende einer Zeitleistenzeile */
.tl-h{color:var(--leise); font-size:11px; margin-left:6px}
.tl-h::before{content:"("}
.tl-h::after{content:")"}
/* Feedback-Hinweis ganz rechts in der Kopfzeile. Der Spendenkasten
in der Mitte bleibt dabei unangetastet. */
.feedback{
display:flex; align-items:center; gap:9px; justify-self:end;
font-size:11.5px; color:var(--leise); max-width:330px; text-align:right;
}
.feedback a{
flex:0 0 auto; padding:4px 11px; border-radius:20px;
border:1px solid var(--rand); background:var(--flaeche2);
color:var(--text); text-decoration:none; font-size:11.5px;
}
.feedback a:hover{border-color:var(--akzent); color:var(--akzent2)}
/* Der Spendenkasten in der Mitte darf bis 760 px breit werden. Darunter
bleibt fuer die aeusseren Spalten zu wenig, und weil er als mittlere
Spalte "auto" bekommt, nimmt er sich den Platz zuerst - die Randspalten
werden gequetscht und ihr Inhalt laeuft unter den Kasten.
Gemessen am 17.08.2026 ueber elf Fensterbreiten: Ab 1100 px abwaerts lag
die Sprachwahl unter dem Spendenkasten, mit dem Logo daneben ab 1200 px.
Das war vorher nicht aufgefallen, weil die Handypruefung auf
waagerechten UEBERSTAND schaut (scrollWidth) - eine Ueberlappung
INNERHALB der Zeile erzeugt aber keinen Ueberstand.
Deshalb bekommen hier beide mittleren bzw. rechten Teile eine eigene
Zeile, statt sich den Platz mit der Marke zu teilen.
Die Grenze wandert mit der Breite der Marke: bei 38 px Logo lag sie bei
1280, seit der Vergroesserung auf 54 px reicht das nicht mehr (gemessen:
4 px Ueberlappung bei 1281). Jetzt 1360, mit Reserve fuer die laengeren
deutschen und franzoesischen Beschriftungen. Wer LOGO_KANTE aendert,
muss diese Zahl nachmessen. */
@media (max-width:1360px){
.spende{
grid-column:1 / -1; justify-self:start; justify-content:flex-start;
text-align:left; margin-top:3px;
}
.feedback{
grid-column:1 / -1; justify-self:start; text-align:left;
max-width:none; margin-top:2px;
}
}
/* Impressum und Datenschutz: unten rechts, so leise wie moeglich.
Kein eigener Abstand mehr - die Zeile sitzt seit dem 18.08.2026 in
derselben Rasterzeile wie die Quellenklappe, auf gleicher Hoehe. */
.rechtszeile{grid-column:2; margin:0; text-align:right}
/* Knopf statt Textlink - dieselbe Form wie der Feedbackknopf oben rechts,
damit die beiden Wege nach draussen erkennbar zusammengehoeren. */
.rechtsknopf{
display:inline-block; padding:4px 12px; border-radius:20px;
border:1px solid var(--rand); background:var(--flaeche2);
color:var(--leise); text-decoration:none; font-size:11.5px;
}
.rechtsknopf:hover{border-color:var(--akzent); color:var(--akzent2)}
.rechtszeile .platzhalter{color:var(--rand); cursor:default}
/* Der Feedbackknopf ohne Adresse - sichtbar, aber erkennbar noch nichts. */
.fb-platzhalter{
flex:0 0 auto; padding:4px 11px; border-radius:20px;
border:1px dashed var(--rand); color:var(--rand); font-size:11.5px;
cursor:default;
}
/* Gesperrter Platzhalter in der Filterzeile - sichtbar, dass da etwas
kommt, aber erkennbar noch nichts. */
.filter button.gesperrt{
border-style:dashed; color:var(--leise); background:transparent;
cursor:default; display:inline-flex; align-items:center; gap:6px;
}
.filter button.gesperrt:hover{background:transparent; color:var(--leise)}
/* Sanduhr statt Schloss - siehe Vermerk an der Erzeugung. Etwas groesser
als das alte Schloss, weil das Zeichen schmaler baut und sonst verschwindet. */
.filter button.gesperrt .sanduhr{font-size:11px; opacity:.8}
/* Kleingesetzter Zusatz in der Funktionsliste */
em.fn-zusatz{
display:block; margin-top:4px; font-style:normal; font-size:11.5px;
color:var(--gold); opacity:.85;
}
.gedimmt{opacity:.26}
/* Es gibt nur zwei Stufen: relevant (volle Helligkeit) und nicht
relevant (.26). Eine Zwischenstufe stand hier zeitweise und ist wieder
raus - drei Abstufungen haben den Blick zerfasert, statt ihn zu
fuehren. */
/* Nur sichtbar, wenn kein Skript laeuft - siehe NOSCRIPT_CSS */
.ohneskript{
display:none; margin:0 0 20px; padding:12px 15px; border-radius:9px;
background:rgba(240,117,124,.1); border:1px solid #7a4a52;
color:var(--text); font-size:13.5px; line-height:1.55;
}
.raster{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px}
.karte{background:var(--flaeche); border:1px solid var(--rand); border-radius:12px; padding:16px 18px}
.karte.breit{margin-bottom:16px}
.karte h3{font-size:15px; margin-bottom:11px}
table.tab{border-collapse:collapse; width:100%}
table.tab th{
text-align:left; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
color:var(--leise); border-bottom:1px solid var(--rand); padding:0 10px 6px 0;
}
table.tab td{padding:7px 10px 7px 0; border-bottom:1px solid var(--rand); font-size:13.5px; vertical-align:middle}
table.tab .dg{font-weight:600}
table.tab td.num{font-variant-numeric:tabular-nums; white-space:nowrap}
table.tab th.num{white-space:normal}
table.tab .stufe{font-weight:700; white-space:nowrap}
tr.hart td{background:rgba(240,117,124,.09)}
tr.hart .kosten{color:var(--warn); font-weight:600}
.leise{color:var(--leise)}
.zumreiter{text-decoration:none; color:var(--text); display:flex; align-items:center}
.zumreiter:hover{color:var(--akzent2)}
ul.legende{list-style:none; margin:0; padding:0}
ul.legende li{display:flex; gap:9px; align-items:center; margin-bottom:6px; font-size:13px}
ul.legende.marken{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 14px}
ul.legende.marken li{margin:0}
ul.legende.marken .tag{min-width:52px; text-align:center; margin-right:0}
.chip{
display:inline-block; min-width:64px; text-align:center; font-size:11px;
font-weight:700; padding:2px 7px; border-radius:5px; border-left-width:3px;
border-left-style:solid;
}
ul.quellen{margin:0; padding-left:17px}
ul.quellen li{margin-bottom:9px; font-size:13px; color:var(--leise)}
ul.quellen b{color:var(--text)}
.qurl{font-size:11.5px; color:#6b7382}
.keintreffer{color:var(--leise); font-style:italic; padding:22px 0}
/* Trefferliste des Season-Reiters, nach Instanz gruppiert */
.sfund{margin:6px 0 10px}
.sf-gruppe{margin-bottom:18px}
.sf-gruppe h4{
display:flex; align-items:center; gap:9px; margin:0 0 8px;
font-size:13px; letter-spacing:.04em; text-transform:uppercase;
color:var(--akzent2);
}
.sf-gruppe h4 img{
width:24px; height:24px; border-radius:50%; object-fit:cover;
object-position:50% 25%;
}
.sf-zahl{
font-size:11px; letter-spacing:0; text-transform:none;
background:var(--flaeche2); border:1px solid var(--rand);
border-radius:20px; padding:1px 8px; color:var(--leise);
}
.sf-treffer{
display:block; width:100%; text-align:left; margin-bottom:5px;
padding:9px 13px; background:var(--flaeche); color:var(--text);
border:1px solid var(--rand); border-radius:9px; font-size:13.5px;
font-family:inherit; cursor:pointer;
}
.sf-treffer:hover{border-color:var(--akzent); color:var(--akzent2)}
/* Steht jetzt oben statt im Fuss - wer die Seite zum ersten Mal oeffnet,
soll erfahren, was sie kann, ohne bis ganz unten zu scrollen. Offen
beim Laden, mit einem Klick zu. */
.funkkarte{
background:var(--flaeche); border:1px solid var(--rand); border-radius:11px;
padding:14px 18px; margin:0 0 18px;
}
.funkkarte > summary{
cursor:pointer; list-style:none; font-size:16px; font-weight:700;
display:flex; align-items:center; gap:9px;
}
.funkkarte > summary::-webkit-details-marker{display:none}
.funkkarte > summary::after{
content:"−"; margin-left:auto; color:var(--leise); font-weight:400;
font-size:20px; line-height:1;
}
.funkkarte:not([open]) > summary::after{content:"+"}
.funkkarte[open] > summary{margin-bottom:14px}
/* min(300px,100%) statt nackter 300px: Bei 320 px Geraetebreite bleiben in
der Funkkarte nur 258 px uebrig, die Spur blieb aber auf 300 px stehen -
das waren 11 px waagerechter Ueberstand auf der Saisonseite, in allen
fuenf Sprachen, und damit der Grossteil aller Handybefunde (gefunden
20.08.2026). Auf dem Desktop aendert sich nichts: Dort ist der Container
immer breiter als 300 px, min() liefert also unveraendert 300px.
.mobs und .raster haben laengst eine Mobilregel - diese Liste war die
einzige der drei, die vergessen wurde. */
ul.funktionen{
list-style:none; margin:0; padding:0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
gap:12px;
}
/* Bis 18.08.2026 standen die Eintraege als blosser Text im Raster - sieben
Absaetze ohne Kante, die als eine Wand gelesen wurden. Jetzt bekommt jeder
eine eigene Flaeche wie die uebrigen Karten der Seite, dazu einen schmalen
Akzentbalken links, der die Liste rhythmisiert, ohne dass dafuer Symbole
erfunden werden muessten. Alle Werte kommen aus den vorhandenen Variablen. */
ul.funktionen li{
display:flex; flex-direction:column; gap:5px;
background:var(--flaeche2); border:1px solid var(--rand);
border-left:2px solid var(--akzent); border-radius:8px;
padding:11px 13px;
}
ul.funktionen b{color:var(--akzent2); font-size:14.5px; line-height:1.3}
ul.funktionen span{color:var(--leise); font-size:13px; line-height:1.55}
/* Das Aenderungsprotokoll teilt sich die Huelle mit der Funktionsliste -
gleiche Karte, gleiches Auf- und Zuklappen. Es steht nur am anderen
Ende der Seite und braucht deshalb Abstand nach oben statt nach unten. */
.verlaufkarte{margin:18px 0 0}
ul.verlauf{list-style:none; margin:0; padding:0}
ul.verlauf li{
display:flex; gap:11px; align-items:baseline; margin-bottom:8px;
font-size:13px; color:var(--leise);
}
ul.verlauf li:last-child{margin-bottom:0}
.wanndatum{
flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700;
color:var(--text); font-size:12px;
}
footer{max-width:1800px; margin:0 auto; padding:0 24px 40px}
/* Quellenklappe links, Rechtsknopf rechts - in einer Zeile statt
untereinander. Die Trennlinie sitzt deshalb hier und nicht mehr an der
Klappe, sonst liefe sie nur ueber die linke Spalte. Aufgeklappt waechst
der Inhalt in Spalte 1 nach unten, der Knopf bleibt oben rechts stehen. */
.fussleiste{
display:grid; grid-template-columns:1fr auto; align-items:start;
column-gap:16px; border-top:1px solid var(--rand); padding-top:11px;
}
details.credits{grid-column:1; min-width:0}
/* Dieselbe Pille wie .rechtsknopf daneben und wie der Feedbackknopf oben
rechts - gleiche Groesse, gleiche Hoehe, gleiche Schrift. Das "+" bleibt,
es ist das einzige, was die Klappe vom Link unterscheiden darf. */
details.credits > summary{
cursor:pointer; list-style:none; user-select:none;
display:inline-block; padding:4px 12px; border-radius:20px;
border:1px solid var(--rand); background:var(--flaeche2);
color:var(--leise); font-size:11.5px; font-weight:400;
letter-spacing:0; text-transform:none;
}
details.credits > summary::-webkit-details-marker{display:none}
details.credits > summary::after{content:" +"; color:#6b7382}
details.credits[open] > summary::after{content:" \2013"}
details.credits > summary:hover{border-color:var(--akzent); color:var(--akzent2)}
/* Der Absatz ueber der Quellenliste. Bewusst leiser gesetzt als die Namen
darunter - er ordnet ein, er wirbt nicht. Die Zeilenlaenge ist begrenzt,
weil der Fuss ueber die volle Seitenbreite laeuft und ein Fliesstext ueber
1800 px unlesbar waere. */
details.credits p.quellenvor{
margin:11px 0 0; max-width:68ch;
color:var(--leise); font-size:12.5px; line-height:1.65;
}
details.credits ul.quellen{margin-top:11px}
@media (max-width:820px){
main{padding:14px 12px 60px}
footer{padding:0 12px 30px}
/* Auf dem Handy untereinander statt in drei Spalten */
.oben{
display:flex; flex-wrap:wrap; align-items:center;
padding:10px 12px 9px; gap:9px;
}
.spende{flex:1 0 100%; justify-content:flex-start; text-align:left;
padding:6px 12px}
.spende > span{font-size:12px}
/* Der SATZ wandert auf dem Handy aus dem Kopf ans Ende des Inhalts, der
KNOPF bleibt oben. Bis zum 26.08.2026 verschwand hier der ganze
Kasten - mit gutem Grund: Er war im Kopf 102 bis 119 px hoch, ein
Viertel der gesamten Kopfhoehe, der groesste Einzelposten ueberhaupt.
Teuer war daran aber nie der Knopf, sondern der Satz mit seinen vier
bis sieben Zeilen Fliesstext.
Anlass fuer die Aenderung: Am 26.08.2026 gemessen stand der einzige
sichtbare Ko-fi-Verweis auf dem Handy bei 96 % Scrolltiefe, auf dem
Desktop bei 4 %. Betroffen sind 9 bis 18 % der Besucher. Am selben
Tag kam die erste Spende ueberhaupt herein - der Weg funktioniert
also, er war auf dem Handy nur praktisch unsichtbar.
Gemessen nach der Aenderung (390/360/320 px, EN und DE, gegen den
gebauten Stand unter echter CSP): Verweis bei 0 bis 1 % Tiefe, ohne
Scrollen sichtbar. Der Kopf waechst um 6 bis 52 px und bleibt bei
27 bis 40 % der Anzeige - die Grenze von zwei Dritteln aus
pruef_handy.py ist weit weg. Desktop unveraendert, 0 px Unterschied
in jedem Messwert. Kein waagerechter Ueberlauf, keine Ueberdeckung.
Der Satz steht unveraendert in .spende-unten. Wer wissen will, warum
gespendet werden soll, liest es dort - er liest es nur spaeter. */
.oben .spende{
display:flex; flex:0 0 auto; order:2; min-width:0; max-width:none;
margin:0; padding:0; border:0; background:none; gap:0;
flex-direction:row;
}
/* Satz und Emoji - der teure Teil - bleiben oben unsichtbar. */
.oben .spende > span{display:none}
/* Dieselbe Pille wie der Feedbackknopf daneben, nur die Schrift traegt
den Akzent. Beide fuehren aus der Seite heraus und sehen deshalb
gleich aus. Die volle Akzentfarbe des Desktopknopfes waere hier zu
laut fuer eine freiwillige Bitte - der Guide wirbt mit "no account,
no ads, no cookies".
44 px Tippflaeche wie bei den Reitern: Apples Mindestmass, Androids
sind 48 dp. Gemessen kostet das gegenueber 36 px hoechstens 8 px
Kopfhoehe, bei 390 px auf Englisch gar nichts, weil der Knopf dort
neben die Marke passt und die Zeile ohnehin 46 px hoch ist. */
.oben .spendenknopf{
display:inline-flex; align-items:center; min-height:44px;
padding:4px 12px; border-radius:20px;
border:1px solid var(--rand); background:var(--flaeche2);
color:var(--akzent2); font-size:11.5px; font-weight:700;
}
/* ⚠️ Muss sein. .spendenknopf:hover setzt sonst --akzent2 als Flaeche,
und die Schrift ist hier ebenfalls --akzent2 - hellviolett auf
hellviolett. Auf einem Touchgeraet bleibt hover nach dem Antippen
haengen, der Knopf waere danach leer. */
.oben .spendenknopf:hover{
border-color:var(--akzent); background:var(--flaeche2);
color:var(--akzent2);
}
/* Der Feedbackknopf steht daneben und rutscht nur dann in eine eigene
Zeile, wenn die Breite es erzwingt. */
.oben .feedback{order:3; flex:0 0 auto}
.spende-unten{
display:flex; flex-direction:column; align-items:flex-start;
max-width:640px; margin:26px auto 0;
}
/* Der Feedbacksatz faellt weg, der Knopf bleibt - "Feedback" erklaert
sich selbst. Auf Deutsch, Franzoesisch und Spanisch lief der Satz bei
320 px ueber zwei Zeilen; dort ist der Gewinn am groessten, also genau
da, wo es klemmt. Der Kasten hatte bis zum 20.08.2026 in keinem der
drei Mobilbloecke ueberhaupt eine Regel. */
.feedback > span{display:none}
/* Auf dem Handy braucht die Reiterleiste vier Zeilen. Klebend wuerde der
Kopf damit fast die halbe Anzeige belegen - also scrollt er hier mit.
Seitliches Scrollen ist als Alternative ausgeschlossen. */
header{position:static; box-shadow:none}
/* 44 px nennt Apple als Mindestmass fuer eine Tippflaeche, Android
48 dp. Gemessen am 20.08.2026 waren es 28 px, und zwar auf ALLEN
acht Testgeraeten. Die Reiter sind die Hauptnavigation - ein zu
kleines Ziel landet im Nachbardungeon. Die Hoehe kommt ueber
min-height statt ueber Polsterung, damit die Schrift lesbar bleibt
und die Zeilenzahl sich nicht aendert. */
nav.tabs button{
font-size:13px; padding:4px 8px; gap:6px;
min-height:44px; box-sizing:border-box;
}
nav.tabs button img{width:26px; height:auto}
/* Logo und Sprachwahl ruecken zusammen. Die 26 px Abstand sind fuer die
breite Kopfzeile gedacht, auf dem Handy kosten sie nur Hoehe. */
.marke{gap:12px}
.reiterzeile{padding:2px 12px 10px}
/* Nur die Polsterung der Leiste, nicht die des Suchfelds: #suche misst
43 px und muss ueber 40 bleiben, sonst reisst die Tippflaechenpruefung
in pruef_handy.py. */
.werkzeug{padding:6px 12px 6px; gap:6px}
.suchfeld{flex:1 1 auto; min-width:150px}
.werkzeug input{font-size:16px; padding:8px 10px}
.zeigen{font-size:10.5px; margin-left:8px}
/* Filter hinter einem Knopf statt in vier Zeilen */
.filterauf{
display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
background:var(--flaeche); border:1px solid var(--rand);
color:var(--text); font:inherit; font-size:12.5px; font-weight:600;
padding:8px 13px; border-radius:7px; cursor:pointer;
}
.filterauf::after{content:"+"; color:var(--akzent2); font-weight:700}
.werkzeug.filteroffen .filterauf::after{content:"\2013"}
.filterauf.aktiv{
border-color:var(--akzent); color:var(--akzent2);
background:rgba(167,139,250,.12);
}
.werkzeug.aus .filterauf{cursor:not-allowed}
.filter{display:none}
.werkzeug.filteroffen .filter{display:flex; flex:1 1 100%; gap:6px}
/* Der Metareport gehoert nicht zu den Filtern und darf deshalb nicht
mit ihnen weggeklappt sein. Er bekommt eine eigene Zeile unter der
Suche: 46 px Kopfhoehe. Die platzsparende Fassung - .suchfeld auf
flex-basis 150px, dann passt alles in eine Zeile - wurde gemessen
und verworfen: Sie bringt NUR bei 390 px etwas und kostet dort
120 px Suchfeldbreite; bei 360 und 320 px bricht die Zeile trotzdem
um. Ein halbiertes Suchfeld fuer einen Gewinn auf einer einzigen
Breite ist der falsche Tausch. */
.werkzeug > a.fertig{
display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
background:var(--flaeche); border:1px solid var(--akzent);
color:var(--akzent2); font:inherit; font-size:12.5px; font-weight:600;
padding:8px 12px; border-radius:7px; min-height:40px;
box-sizing:border-box; text-decoration:none; white-space:nowrap;
}
/* Auf der Startseite gefuellt, genau wie auf dem Desktop - sonst
saehe dieselbe Seite auf beiden Geraeten verschieden aus. */
.werkzeug.aus > a.fertig{
background:var(--akzent); border-color:var(--akzent); color:#12141a;
}
/* Der erste faellt hier weg, sonst stuenden nach dem Aufklappen der
Filter zwei gleiche Verweise untereinander. */
.filter a.fertig{display:none}
.filter button{padding:8px 11px; font-size:12.5px; min-height:40px}
.treffer{flex:0 0 auto}
/* Tippflaechen: Apple nennt 44 px, Android 48 dp. Alles, was ohne
Kosten im Kopf wachsen kann, waechst hier - die Auswahlfelder, die
Bossknoepfe, die Filter und die Vorschlagsliste. Zuletzt gemessen
lagen sie bei 26 bis 36 px. */
.sprachwahl select,.skala select{min-height:40px; padding:6px 9px}
nav.sprung a{min-height:42px; padding:4px 13px 4px 5px}
nav.sprung a img{width:30px; height:30px}
.vorschlaege button{min-height:44px; font-size:14px}
.filterauf{min-height:40px}
/* ohne klebenden Kopf braucht der Sprung zu einem Boss keinen Vorlauf */
.block{scroll-margin-top:12px}
.dsymbol{width:88px}
.dtitel h1,.dtitel h2{font-size:20px}
.dtimer b{font-size:26px}
.mobs{grid-template-columns:1fr}
.raster{grid-template-columns:1fr}
.btitel{font-size:15.5px}
table.tab td,table.tab th{font-size:12.5px}
}
/* Schmale Anzeigen: was in einer Zeile stand, bekommt zwei.
Gefunden am 18.08.2026 nach einer Meldung vom iPhone, dort liefen "ein
paar Sachen" ineinander. Es war keine echte Ueberdeckung -
pruef_ueberlappung.py meldet ueber acht Breiten null -, sondern
gequetschter Umbruch:
1. Der Trashkopf stand als eine Flexzeile da. Auf Deutsch blieben dem
Titel rund 60 px, und "bis Melidrussa die Unterkuehlte" brach auf vier
Zeilen um, waehrend Zaehler, Beschriftung und Zeichen daneben klemmten.
Jetzt gehoert die erste Zeile dem Titel, alles Weitere ruecht darunter.
Nur .trash: Bosskoepfe haben keinen Zaehler und brauchen es nicht -
dort wuerde der Umbruch den Namen unter das Portraet schieben.
2. Der Spendenkasten teilte sich die Breite mit seinem Knopf. Dem Text
blieben rund 220 px, der Satz lief ueber sieben Zeilen. Jetzt steht
der Knopf darunter, linksbuendig - bewusst nicht ueber die volle
Breite, das waere fuer eine freiwillige Bitte zu laut. Vier Zeilen
statt sieben, der Kasten wird dabei niedriger.
⚠️ Beim Feedbacksatz wurde dasselbe versucht und wieder verworfen: Der
passt bei 390 px in EINE Zeile, ein Knopf darunter kostet also nur
Hoehe. Gemessen mit pruef_handy.py - der Kopf wuchs auf dem iPhone 13
von 64 auf 68 % der Anzeige und riss damit die Grenze von zwei
Dritteln. Er bleibt deshalb neben seinem Text. */
@media (max-width:560px){
details.block.trash > summary{flex-wrap:wrap; row-gap:7px}
details.block.trash > summary .btitel{flex:1 1 calc(100% - 92px)}
details.block.trash > summary .zaehler{order:5}
details.block.trash > summary .zeigen{order:6; margin-left:0}
details.block.trash > summary::after{order:7; margin-left:auto}
.spende{flex-direction:column; align-items:flex-start; gap:9px}
/* Reiterleiste wird zur Auswahlliste. Am 20.08.2026 gemessen: neun
Reiter mit vollem Namen brauchten VIER Zeilen und 145 px, der Kopf
belegte auf dem iPhone SE 51 % der Anzeige, und die Tippflaechen
waren mit 28 px zu klein. Beides zusammen ist als Knopfleiste nicht
loesbar: 44 px mal vier Zeilen waeren 176 px gewesen.
Verworfen wurde eine Symbolleiste ohne Namen - die acht Texturen
sind dunkel, breit und in Briefmarkengroesse nicht auseinander-
zuhalten; gemessen bestanden, aber unbrauchbar.
Die Auswahlliste loest beides: eine Zeile statt vier, volle Namen,
und auf iOS wie Android oeffnet sie einen bildschirmgrossen Waehler -
die beste Tippflaeche, die es auf einem Telefon gibt. Dazu ist sie
dasselbe Bedienelement wie die Sprachwahl zwei Zeilen darueber.
⚠️ Die Knopfleiste bleibt im Dokument und nur optisch weg. Sie ist
die Wahrheit, die Liste spiegelt sie - siehe reiterwahl im Skript. */
nav.tabs{display:none}
.reiterwahl{
display:block; width:100%; min-height:44px; box-sizing:border-box;
background:var(--flaeche); color:var(--text);
border:1px solid var(--rand); border-radius:8px;
padding:8px 10px; font:inherit; font-size:14.5px; font-weight:700;
cursor:pointer;
}
.reiterwahl:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
}
/* Sehr schmale Geraete - Galaxy S9+ und Verwandte fangen bei 320 px an.
Dort brauchte die Reiterleiste sechs Zeilen und der Kopf 87 % der
Anzeige; mit kleineren Symbolen und weniger Rand sind es vier. */
@media (max-width:430px){
.oben{padding:9px 10px 8px; gap:8px}
.spende{padding:6px 11px}
.spende > span{font-size:11.5px; line-height:1.45}
.reiterzeile{padding:2px 10px 9px}
nav.tabs{gap:4px}
nav.tabs button{font-size:12.5px; padding:3px 6px; gap:5px}
/* Auf 320 px passen acht 44er-Flaechen nicht in eine Zeile - es werden
zwei. Das Symbol darf dafuer etwas kleiner sein, die Tippflaeche
bleibt bei 44 px, weil sie aus min-height/min-width kommt. */
nav.tabs button img{width:100%}
.werkzeug{padding:6px 10px}
/* Eine Tabelle mit table-layout:auto nimmt die Mindestbreite ihres
Inhalts und laesst sich davon durch nichts abbringen - width:100 %
ist ihr egal. Auf der Saisonseite kam der Wertungstabelle so eine
Mindestbreite von 280 px zu, plus 36 px Kartenpolsterung: 318 px in
einem 296 px breiten Raster. Das Ergebnis waren 10 px Querscrollen
auf 320-px-Geraeten, in Chromium wie in WebKit.
Mit fixed haelt sich die Tabelle an ihren Container und bricht um.
Auf dem Desktop aendert das nichts - dort war nie zu wenig Platz.
⚠️ fixed allein reicht NICHT. Ohne feste Zahlenspalte teilt der
Browser gleichmaessig auf, und die deutschen Komposita liefen in die
Zeitspalte hinein - "Rubinlebensbecken" ueberlappte "28 min" um
765 px². Deshalb bekommt die Zahlenspalte eine feste Breite und die
Namensspalte die Erlaubnis, lange Woerter zu brechen. Gemessen in
allen fuenf Sprachen; Englisch allein zeigt den Fehler nicht. */
table.tab{table-layout:fixed}
table.tab td.num,table.tab th.num{width:62px}
table.tab td{overflow-wrap:break-word}
/* Die Kantenlaenge des Logos steht als HTML-Attribut am ![]()
und damit
in LOGO_KANTE - CSS gewinnt dagegen, ohne die Konstante anzufassen.
Das ist wichtig, denn wer LOGO_KANTE aendert, muss laut Kommentar am
1360er-Breakpoint dort neu nachmessen.
Unter 38 px zu gehen bringt nichts: Die Zeile ist so hoch wie ihr
hoechstes Kind, und die Sprachwahl daneben liegt bei 40 px, weil sie
als Tippflaeche mindestens so gross sein muss. 54 -> 40, also 14 px. */
.logo{width:38px; height:38px}
}
/* Sehr schmale Geraete, 320 px und schmaler. Dort brauchte die
Reiterleiste fuenf Zeilen auf Englisch und sieben auf Deutsch - der
deutsche Kopf war damit hoeher als der ganze Bildschirm.
⚠️ Die 28 px Knopfhoehe bleiben unangetastet, sie sind so gewollt.
Deshalb steht die Zeilenhoehe hier als feste Pixelzahl statt als
Faktor: 20 + 2x3 Polsterung + 2x1 Rand = exakt dieselben 28 px wie
vorher. Kleiner wird allein die Breite - und die entscheidet ueber die
Zahl der Zeilen. */
@media (max-width:360px){
nav.tabs{gap:2px}
nav.tabs button{font-size:11.5px; line-height:20px; padding:3px 5px; gap:4px}
nav.tabs button img{width:19px}
}
/* Die Dungeonliste am Fuss. Sie ist der einzige Ort, an dem echte
auf die Instanzseiten stehen - die Reiterleiste oben besteht
aus Knoepfen und ist fuer eine Suchmaschine unsichtbar. Ohne diese
Zeile findet Google die Unterseiten nur ueber die sitemap.xml, und
interne Verweise zaehlen dort mehr. Fuer Menschen ist sie zugleich der
Weg zum naechsten Dungeon, wenn man unten angekommen ist.
Adressen sind RELATIV: so zeigt /de/ auf /de/kings-rest/ und nicht auf
die englische Fassung - der Rumpf ist in allen fuenf Dateien gleich. */
.dlinks{
display:flex; flex-wrap:wrap; gap:7px; margin:30px 0 0; padding-top:20px;
border-top:1px solid var(--rand);
}
.dlinks a{
display:flex; align-items:center; min-height:44px; padding:0 14px;
border:1px solid var(--rand); border-radius:9px; color:var(--akzent2);
text-decoration:none; font-size:13px; font-weight:700;
}
.dlinks a:hover{border-color:var(--akzent); color:var(--text)}
.dlinks a[aria-current="page"]{
background:var(--akzent); border-color:var(--akzent); color:#12141a;
}
@media print{
header{display:none}
body{background:#fff; color:#000}
.reiter[hidden]{display:block !important}
details.block:not([open]) > *:not(summary){display:block !important}
.block,.karte,.mob,.timeline{border-color:#ccc; background:#fff; break-inside:avoid}
}