/* ========================================================= Bürohaut — für die Arbeitgeberseite. Wird zusätzlich zu dark.css geladen und dreht deren Farbmarken um. Die Farbwerte sind aus dem Hero-Bild gemessen (Häufigkeitsverteilung über ein 140×210 Bild, neun stärkste Töne): #272928 6 % tiefer Stein R-B -1 #404342 7 % dunkler Stein R-B -2 #595C5A 11 % Stein, häufigster Ton #747672 6 % mittlerer Stein #908F8A 4 % heller Stein #C7BAAF 4 % warmer Stein R-B +24 #D5CCC2 9 % Marmor hell R-B +19 #957459 4 % Eiche R-B +60 Das Verhältnis ist die eigentliche Aussage: Der Stein trägt die Fläche, die Eiche ist der Akzent. Deshalb sind die Grautöne hier fast neutral gehalten und nur das Warme trägt Farbe — umgekehrt sähe die Seite aus wie ein Holzkatalog. ========================================================= */ :root{ --st-tief:39,41,40; /* #272928 */ --st-dunkel:64,67,66; /* #404342 */ --st-mittel:89,92,90; /* #595C5A */ --st-hell:144,143,138; /* #908F8A */ --st-warm:199,186,175; /* #C7BAAF */ --st-licht:213,204,194; /* #D5CCC2 */ --eiche:149,116,89; /* #957459 */ } body{ --bg:#FFFFFF; --bg-2:#F6F4F1; /* Marmor hell, stark aufgehellt */ --surface:rgba(34,36,35,.035); --surface-2:rgba(34,36,35,.07); --white:#222423; /* Stein statt Schwarz */ --dim:rgba(34,36,35,.78); /* .72: Der Steinton ist heller als das frühere Braunschwarz, und die getönten Flächen im Rumpf dunkeln den Grund zusätzlich ab. Bei .64 fiel der Fließtext dort auf 4,61:1, bei .68 auf 4,73. Mit .72 steht er auch auf der dunkelsten Fläche bei 5,7:1. */ --mute:rgba(34,36,35,.72); --faint:rgba(34,36,35,.72); --hair:rgba(34,36,35,.13); --hair-2:rgba(34,36,35,.24); --accent:#7E5838; /* Eiche, abgedunkelt: 6,3:1 auf Weiß */ --grad:linear-gradient(96deg,#5E4029 0%,#7E5838 30%,#957459 62%,#A98A6C 100%); color:var(--white);background:#FFFFFF;} /* ---------- Kopfleiste ---------- */ .top{background:rgba(255,255,255,.54); border-bottom:1px solid var(--hair); box-shadow:inset 0 1px 0 rgba(255,255,255,.9);} @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .top{background:rgba(255,255,255,.96);} } .brand img{filter:none;} .menu summary{border-color:var(--hair-2);background:rgba(255,255,255,.7);} .menu summary i{background:var(--white);} .menu-panel{background:rgba(255,255,255,.98);border-color:var(--hair); box-shadow:0 30px 70px -28px rgba(34,36,35,.26);} @media (hover:hover) and (pointer:fine){ .menu-panel a:not(.btn):hover{background:rgba(34,36,35,.05);color:var(--white);} } /* ---------- Schaltflächen ---------- */ .btn--fill{background:#262827;color:#FFFFFF;border-color:transparent;} .btn--line{background:#FFFFFF;color:var(--white);border-color:var(--hair-2);} .btn--fill::after{background:linear-gradient(90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,.16) 42%, rgba(255,255,255,.16) 58%,rgba(255,255,255,0) 100%);} .btn--line::after{background:linear-gradient(90deg, rgba(34,36,35,0) 0%,rgba(34,36,35,.05) 42%, rgba(34,36,35,.05) 58%,rgba(34,36,35,0) 100%);} @media (hover:hover) and (pointer:fine){ .btn--fill:hover{background:#3A3D3B;} .btn--line:hover{background:#F6F4F1;border-color:var(--white);} } /* ========================================================= Bildkopf Rechts, wo das Bild liegt, steht der helle Marmorton; nach links läuft es über Creme in reines Weiß. Dadurch trifft die Kante des Bildes nie direkt auf Weiß, sondern geht über einen mittleren Ton — der Kopf liest sich als Raum statt als eingeklebtes Foto. Ein Hauch Eiche unten links nimmt den Tisch auf, damit die Wärme nicht nur rechts hängt. ========================================================= */ .phead.phead--video{ background: radial-gradient(74% 100% at 82% 44%, rgba(var(--st-licht),.82) 0%, rgba(var(--st-licht),.38) 40%, rgba(var(--st-warm),.14) 64%, rgba(var(--st-warm),0) 84%), radial-gradient(44% 58% at 4% 84%, rgba(var(--eiche),.09) 0%, rgba(var(--eiche),0) 74%), linear-gradient(166deg,#FFFFFF 0%,#FDFCFB 46%,#F7F5F2 100%); border-bottom:0;} .phead--video h1,.phead--video .lead,.phead--video .eyebrow{text-shadow:none;} .phead--video .lead{color:var(--dim);} /* entfällt: Überschriften laufen einfarbig, siehe .key in dark.css */ /* Das Bild braucht keine Aufhellung — es steht gegen ein helles Feld, nicht gegen Schwarz. Nur einen Hauch mehr Zeichnung. */ .ph-bild img{filter:contrast(1.02) saturate(1.02);} /* ---------- Flächen ---------- Der Kopf soll nicht an einer Kante enden. Der erste Abschnitt darunter trägt deshalb den Marmorton weiter und lässt ihn über 620 Pixel auslaufen — man liest den Übergang nicht, man merkt ihn nur. */ .sec{background:transparent;} .phead--video + .sec{ background:linear-gradient(180deg, rgba(var(--st-licht),.34) 0px, rgba(var(--st-licht),.12) 250px, rgba(255,255,255,0) 620px);} /* Das getönte Band trägt eine Marmorwand. „multiply" heißt: Helles ändert nichts, nur die grauen Adern dunkeln ab — die Struktur legt sich also in die Fläche, statt darüberzuliegen. Deshalb die höhere Deckung als beim vorherigen Stein: Der war mittelgrau und färbte schon bei 34 % durch. Marmor ist fast weiß; bei demselben Wert wäre von der Zeichnung nichts übrig geblieben. Nach oben begrenzt die Lesbarkeit. Über jedes Pixel der Vorlage gerechnet ist die dunkelste Ader rgb(142,143,145). Bei 62 % Deckung fällt die Fläche dort auf rgb(178,178,177) — die kleine Kennzeichnung („KONDITIONEN") käme darauf nur noch auf 4,08:1. Bei 42 % bleibt sie bei 4,67:1, die Einleitung bei 5,44:1 und die Überschrift bei 9,25:1. Alles über 4,5:1, auch auf der ungünstigsten Stelle, die das Bild überhaupt hergibt. */ .sec--alt{background:var(--bg-2);position:relative;isolation:isolate;} .sec--alt::before{content:"";position:absolute;inset:0;z-index:-1; pointer-events:none; background:url("img/marmor-wand.jpg") center/cover no-repeat; mix-blend-mode:multiply;opacity:.42;} .card,.stat{background:#FFFFFF;border-color:var(--hair); box-shadow:0 1px 2px rgba(34,36,35,.03);} .rows .row,.steps,.step{border-color:var(--hair);} .faq summary::after{border-color:var(--faint);} /* ========================================================= Abschlusskasten Tiefer Stein statt Schwarz — derselbe Ton wie der Boden im Bild. Die Eiche kommt darin als Akzent zurück, so wie im Raum: graue Fläche, warmes Möbel. Über die Farbmarken umgestellt, damit Schrift, Linien und Knöpfe darin von allein stimmen. ========================================================= */ .end{ --white:#FFFFFF; --dim:rgba(255,255,255,.78); --mute:rgba(255,255,255,.68); --faint:rgba(255,255,255,.56); --hair:rgba(255,255,255,.14); --hair-2:rgba(255,255,255,.26); --accent:#C7A882; color:#FFFFFF;border:0; /* Echtes Schwarz. Der Steinverlauf, der hier lag, war zwar aus dem Bild abgeleitet, stand aber neben dem schwarzen Leistungsband darüber wie ein zweiter, hellerer Ton — zwei Dunkelheiten auf einer Seite. */ background:#000000; box-shadow:0 30px 60px -34px rgba(34,36,35,.36), 0 4px 18px -10px rgba(34,36,35,.18);} /* entfällt: Überschriften laufen einfarbig, siehe .key in dark.css */ .end .btn--fill{background:#FFFFFF;color:#1F2221;} .end .btn--line{background:rgba(255,255,255,.13);color:#FFFFFF; border-color:rgba(255,255,255,.5);} @media (hover:hover) and (pointer:fine){ .end .btn--fill:hover{background:#EFECE7;} .end .btn--line:hover{background:rgba(255,255,255,.2);border-color:#FFFFFF;} } /* ---------- Fuß ---------- */ .foot{background:#F6F4F1;border-top:1px solid var(--hair);} .fine{color:rgba(34,36,35,.66);} /* ---------- Schmal ---------- */ /* Zwischen 900 und 1200 Pixel wird es eng: Die Bahn braucht ihre Breite, der Fließtext seine Zeilenlänge. Beides zusammen passt nicht, also gibt der Text nach — kürzere Zeilen liest man ohnehin leichter als solche, die unter einer Karte verschwinden. */ @media (min-width:901px) and (max-width:1200px){ .phead--video h1{max-width:16ch;} .phead--video .lead,.phead--video .cta{max-width:24rem;} .orbit{width:min(44vw,26rem);} } @media (max-width:900px){ /* Untereinander wandert das Marmorlicht nach oben, wo das Bild steht. */ .phead.phead--video{ background: radial-gradient(94% 44% at 74% 8%, rgba(var(--st-licht),.7) 0%, rgba(var(--st-licht),.26) 48%, rgba(var(--st-warm),0) 80%), linear-gradient(180deg,#FDFCFB 0%,#FFFFFF 62%);} } /* ========================================================= Kreisbahn im Kopf Vier Profilkarten laufen auf einer Bahn. Die Bahn dreht sich, jede Karte dreht mit derselben Dauer dagegen — dadurch wandern sie im Kreis und bleiben trotzdem aufrecht lesbar. Aus der Vorlage abgemessen: Die Gegendrehung lief dort von 170,87° auf 162,87° in zwei Sekunden, also vier Grad je Sekunde — eine volle Runde in 90 Sekunden. Genau dieses Tempo ist hier übernommen. Schneller wirkt es wie ein Karussell, langsamer merkt man es nicht mehr. Keine Gesichter, keine Firmenzeichen: Die Karten zeigen dasselbe, was ein Kunde im Erstgespräch bekommt — anonymisierte Kurzprofile. ========================================================= */ .orbit{position:absolute;z-index:1;pointer-events:none; top:50%;right:clamp(-2rem,1vw,1.5rem);transform:translateY(-50%); width:min(46vw,33rem);aspect-ratio:1;} /* ---------- Kreise hinter den Karten ---------- Sechs Fassungen, umschaltbar über data-kreis am Bahnrahmen. Alle bleiben unter der Wahrnehmungsschwelle für Text — sie sollen Tiefe geben, nicht um Aufmerksamkeit bitten. */ .orbit-ring{position:absolute;inset:18%;border-radius:50%;} .orbit-ring::before,.orbit-ring::after{content:"";position:absolute; border-radius:50%;} /* K1 — zwei feine Ringe (bisher) */ [data-kreis="1"] .orbit-ring{border:1px solid rgba(34,36,35,.09);} [data-kreis="1"] .orbit-ring::before{inset:13%; border:1px solid rgba(34,36,35,.06);} /* K2 — ein gestrichelter Ring */ [data-kreis="2"] .orbit-ring{border:1px dashed rgba(34,36,35,.16);} /* K3 — drei Ringe, nach außen schwächer */ [data-kreis="3"] .orbit-ring{border:1px solid rgba(34,36,35,.11);} [data-kreis="3"] .orbit-ring::before{inset:-16%; border:1px solid rgba(34,36,35,.06);} [data-kreis="3"] .orbit-ring::after{inset:16%; border:1px solid rgba(34,36,35,.085);} /* K4 — Ring mit Haltepunkten an den vier Bahnstellen */ [data-kreis="4"] .orbit-ring{border:1px solid rgba(34,36,35,.1);} [data-kreis="4"] .orbit-ring::after{inset:-5px;border:0; background: radial-gradient(circle 5px at 50% 0, rgba(34,36,35,.2) 0 100%, transparent 100%), radial-gradient(circle 5px at 100% 50%, rgba(34,36,35,.2) 0 100%, transparent 100%), radial-gradient(circle 5px at 50% 100%, rgba(34,36,35,.2) 0 100%, transparent 100%), radial-gradient(circle 5px at 0 50%, rgba(34,36,35,.2) 0 100%, transparent 100%); background-repeat:no-repeat;} /* K5 — weiche Fläche statt Linie */ [data-kreis="5"] .orbit-ring{border:0;inset:8%; background:radial-gradient(circle at 50% 50%, rgba(34,36,35,.055) 0%, rgba(34,36,35,.03) 52%, rgba(34,36,35,.012) 76%, transparent 100%);} /* K6 — Ring mit zarten Speichen */ [data-kreis="6"] .orbit-ring{border:1px solid rgba(34,36,35,.1);} [data-kreis="6"] .orbit-ring::before{inset:0;border:0;border-radius:0; background: linear-gradient(to right, transparent calc(50% - .5px), rgba(34,36,35,.055) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)), linear-gradient(to bottom, transparent calc(50% - .5px), rgba(34,36,35,.055) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));} .orbit-bahn{position:absolute;inset:0; animation:orbit-dreh 90s linear infinite;} /* Die Plätze liegen bei 16 und 84 Prozent, nicht bei 8 und 92: Eine Karte ragt mit ihrer halben Breite über den Bahnpunkt hinaus. Bei 92 Prozent und 160 Pixel Kartenbreite stünde sie 80 Pixel außerhalb des Rahmens und würde am Rand des Kopfes abgeschnitten. */ .orbit-platz{position:absolute;z-index:1;transform:translate(-50%,-50%); width:clamp(8.5rem,13vw,10rem);} .orbit-platz:nth-child(1){left:50%;top:16%;} .orbit-platz:nth-child(2){left:84%;top:50%;} .orbit-platz:nth-child(3){left:50%;top:84%;} .orbit-platz:nth-child(4){left:16%;top:50%;} @keyframes orbit-dreh {to{transform:rotate(360deg);}} @keyframes orbit-gegen {to{transform:rotate(-360deg);}} /* ---------- Die Karte ---------- */ .pkarte{animation:orbit-gegen 90s linear infinite; border-radius:14px;overflow:hidden;background:#FFFFFF; border:1px solid rgba(34,36,35,.1); box-shadow:0 18px 34px -22px rgba(34,36,35,.3), 0 2px 6px -3px rgba(34,36,35,.12);} /* Das Bild sitzt oben im Kartenkopf, der Text darunter — wie in der Vorlage. Der getönte Grund schaut nur an den Rändern hervor und bindet die vier Karten farblich an die Seite. */ .pkarte .foto{aspect-ratio:1;overflow:hidden;} .pkarte .foto img{display:block;width:100%;height:100%;object-fit:cover;} .orbit-platz:nth-child(1) .foto{background:rgba(var(--st-licht),.6);} .orbit-platz:nth-child(2) .foto{background:rgba(var(--eiche),.22);} .orbit-platz:nth-child(3) .foto{background:rgba(var(--st-hell),.28);} .orbit-platz:nth-child(4) .foto{background:rgba(var(--st-warm),.5);} .pkarte .txt{padding:.6rem .75rem .75rem;} .pkarte b{display:block;font-size:.92rem;font-weight:600;letter-spacing:-.01em; color:var(--white);line-height:1.2;} .pkarte span{display:block;margin-top:.3rem;font-size:.76rem;line-height:1.4; color:rgba(34,36,35,.66);} .pkarte .stand{display:flex;align-items:center;gap:.4rem;margin-top:.55rem; font:500 .62rem/1 var(--m);color:var(--accent);} .pkarte .stand::before{content:"";width:5px;height:5px;border-radius:50%; background:var(--accent);flex:none;} /* Hinweis unter der Bahn: Die Porträts sind erzeugt, die Angaben Beispiele. Ohne diesen Satz liest sich die Bahn als Galerie echter Kandidaten. */ /* Der Abstand muss die tiefstmögliche Kartenlage überholen, nicht die gerade sichtbare. Eine Karte hängt im tiefsten Punkt der Bahn um (halbe Kartenhöhe − 0,16 × Kastenhöhe) unter der Kastenkante; bei 384 Pixel Kastenhöhe sind das 63 Pixel. 6 rem gibt in der ganzen Spanne der Kastengrößen noch Luft. */ .orbit-fuss{position:absolute;left:50%;top:100%;margin-top:6rem; transform:translateX(-50%); width:min(26rem,94%);text-align:center; font-size:.76rem;line-height:1.5;color:rgba(34,36,35,.62);} @media (prefers-reduced-motion:reduce){ .orbit-bahn,.pkarte{animation:none;} } @media (max-width:900px){ /* Auf dem Telefon wird aus der Bahn ein Raster. Die Kreisbahn geht hier rechnerisch nicht auf: Zwei benachbarte Karten stehen um Radius × √2 auseinander, bei 368 Pixel Rahmen also 146 Pixel. Eine Karte ist aber 200 Pixel hoch — sie überlappen zwangsläufig. Den Rahmen größer zu machen geht nicht, er hat nur die Fensterbreite; die Karten kleiner zu machen macht die Schrift unlesbar. Also 2 × 2, stehend, gut lesbar. Die Drehung ist eine Zugabe für große Bildschirme, kein Inhalt — es geht nichts verloren. */ .orbit{position:relative;top:auto;right:auto;transform:none; aspect-ratio:auto; width:min(100%,26rem);margin:clamp(2rem,5vh,3rem) auto 0;} .orbit-ring{display:none;} .orbit-bahn{position:static;animation:none; display:grid;grid-template-columns:1fr 1fr;gap:.8rem;} .orbit-platz{position:static;transform:none;width:auto;} .pkarte{animation:none;} .pkarte .txt{padding:.6rem .7rem .7rem;} .pkarte b{font-size:.88rem;} .pkarte span{font-size:.74rem;} .orbit-fuss{position:static;transform:none;margin:1.4rem auto 0; width:100%;font-size:.74rem;} } /* ---------- Berühren hält das Rad an ---------- Der Rahmen selbst nimmt keine Mausereignisse an, nur die Karten. Dadurch greift die Pause allein, wenn der Zeiger wirklich auf einem Bild steht, und nicht schon irgendwo in der leeren Kreisfläche. */ .pkarte{pointer-events:auto;} @media (hover:hover) and (pointer:fine){ .orbit:hover .orbit-bahn, .orbit:hover .pkarte{animation-play-state:paused;} /* Die berührte Karte wächst und hebt sich ab. Die Vergrößerung sitzt am Platz, nicht an der Karte: Die Karte trägt die Gegendrehung als Bewegung, und eine Bewegung schlägt jede gewöhnliche transform-Angabe — ein scale an der Karte selbst käme nie an. Der Platz ist unbewegt und nimmt es an. */ .orbit-platz{transition:transform .3s var(--e);} .orbit-platz:has(.pkarte:hover){ transform:translate(-50%,-50%) scale(1.08);z-index:3;} .pkarte{transition:box-shadow .3s var(--e),border-color .3s var(--e);} .pkarte:hover{border-color:rgba(34,36,35,.22); box-shadow:0 30px 54px -26px rgba(34,36,35,.42), 0 6px 14px -6px rgba(34,36,35,.2);} } @media (hover:hover) and (pointer:fine) and (max-width:900px){ /* Im Raster steht der Platz ohne Verschiebung — dort nur skalieren. */ .orbit-platz:has(.pkarte:hover){transform:scale(1.04);} } /* ========================================================= Raumaufnahme als Grund des Kopfes Die Aufnahme liegt über der ganzen Kopffläche und wird stark nach Weiß gezogen: 34 Prozent Deckkraft, dazu ein weißer Schleier, der zur Mitte hin am dichtesten ist — genau dort steht der Text. An den Rändern bleibt mehr vom Bild stehen, sodass man den Raum erkennt, ohne ihn anzusehen. Entsättigt und aufgehellt, damit die warmen Holztöne die Seite nicht überfärben. ========================================================= */ .stein{position:absolute;inset:0;z-index:0;overflow:hidden; pointer-events:none;margin:0;} .stein img{display:block;width:100%;height:100%;object-fit:cover; object-position:52% 62%; /* Hamburg bei Sonnenuntergang bringt viel Gold mit. Stärker entsättigt als die Raumaufnahme, sonst kippt die ganze Seite ins Orange. */ opacity:.26;filter:saturate(.34) brightness(1.2) contrast(.88);} /* Der Schleier ist links am dichtesten, wo Überschrift und Vorspann stehen, und gibt nach rechts frei — dort liegen die Karten auf hellem Grund und vertragen etwas mehr Bild. Oben und unten läuft er zu, damit der Kopf ohne Kante an Kopfleiste und Rumpf anschließt. */ .stein::after{content:"";position:absolute;inset:0; background: linear-gradient(100deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.86) 30%, rgba(255,255,255,.66) 56%, rgba(255,255,255,.5) 78%, rgba(255,255,255,.44) 100%), linear-gradient(180deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 76%, rgba(255,255,255,.66) 100%);} /* ========================================================= Leistungen als dunkles Band Der Grund ist derselbe wie auf der Startseite — echtes Schwarz, gleiche Polsterung, gleiche Körnung. Der Akzent ist es bewusst nicht: dort läuft er ins Bernsteinfarbene, hier ins Eichenholz dieser Seite. Ein oranger Verlauf mitten in einer Seite aus Stein und Eiche liest sich als Fremdkörper — er gehört zur Startseite, nicht hierher. Die hellen Stufen sind nötig, weil der Grund schwarz ist: das Eichenbraun des Seitenkopfes (#7E5838) käme auf #0B0B0B nur auf 2,9:1. Gemessen für diesen Verlauf: hellste Stufe 10,5:1, dunkelste 6,5:1. ========================================================= */ .lst{ /* Ohne --bg nähme die klebende Übersicht auf schmalen Bildschirmen den Wert des Körpers, also Weiß — ein weißer Balken quer über dem Band. */ --bg:#0B0B0B; --white:#FFFFFF; --dim:rgba(255,255,255,.74); --mute:rgba(255,255,255,.6); --faint:rgba(255,255,255,.52); --hair:rgba(255,255,255,.12); --hair-2:rgba(255,255,255,.22); --surface:rgba(255,255,255,.04); --accent:#C9A87E; --grad:linear-gradient(96deg,#D8B98C 0%,#C9A87E 34%,#B79373 66%,#A8907C 100%); color:#FFFFFF;border-top:0; margin-block:-1px; padding-block:clamp(2.6rem,6vh,4rem); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)' opacity='.05'/%3E%3C/svg%3E"), radial-gradient(60% 46% at 84% 14%, rgba(201,168,126,.10) 0%, transparent 70%), linear-gradient(180deg,#0B0B0B 0%,#101010 52%,#0B0B0B 100%); background-repeat:repeat, no-repeat, no-repeat; background-size:160px 160px, auto, auto; background-position:top left, center, center;} .lst + .sec{border-top:0;} .lst .hakenpunkte{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);} /* Der Knopf behält weiße Fläche und dunkle Schrift */ .lst .btn--ring{color:#171012;} /* entfällt: Überschriften laufen einfarbig, siehe .key in dark.css */ /* Das Aufklappfeld trägt dieselbe milchige Fläche wie die Kopfleiste. */ /* Näher an der Deckung der Leiste, damit Feld und Leiste als ein Material lesbar sind. */ body{--glas:rgba(255,255,255,.68); --glas-fest:rgba(255,255,255,.97);} /* ========================================================= Referenzen Die Zeile steht hier zwischen zwei hellen Abschnitten. Die Trennlinien, die sie auf dunklem Grund braucht, wären hier zwei Striche zu viel. ========================================================= */ .refs{background:transparent;border-top:0;border-bottom:0;} .slot.marke{color:rgba(28,28,28,.56);} @media (hover:hover) and (pointer:fine){.slot.marke:hover{color:var(--white);}}