Style Guide
Jede Farbe, jede Schriftgröße, jedes Raster-Maß, jede Komponente und jeder Hover dieser Website — mit den echten Klassen, dem echten CSS und den echten Komponenten. Nichts hier ist nachgebaut: Ändert sich ein Token, ändert sich diese Seite mit.
Quellen: src/index.css (Tokens, Masken, Keyframes) · src/app/layout.tsx (Schriften) · src/components/ (Komponenten, Motion)
Logo
Zwei Wortmarken, ein Signet und die Rundmarke in zwei Fassungen. Die Variante richtet sich nach der Fläche, nicht nach dem Geschmack: Kontrast statt Schatten.
Wortmarke
Rundmarke
Schild im Schriftring. Für Stempel-artige Einsätze — Siegel, Fahrzeugbeschriftung, Social-Avatar —, wo eine breite Wortmarke nicht hinpasst. Der Ring trägt die Schrift, das Schild bleibt in jeder Variante signalgelb: es ist das Erkennungszeichen und darf die Farbe nicht wechseln.
| Datei | Schriftring | Schild | Fläche |
|---|---|---|---|
th-circle-logo-01.svg | #000000 | #FFD600 | Weiß und alles Helle. Auf abyss nicht lesbar. |
th-circle-logo-01-white.svg | #FFFFFF | #FFD600 | abyss, ocean, anthracite — jede dunkle Fläche der Site. |
Die weiße Fassung entsteht nicht durch einen CSS-Filter, sondern im SVG selbst: ein path { fill: #fff } im <style>-Block färbt den Ring, und .cls-1 behält per höherer Spezifität das gelbe Schild. Ein invert()-Filter hätte das Gelb zu Blau gemacht.
Regeln
SOHöhe im Header: h-[2.55rem] mobil, md:h-[2.975rem] ab Tablet — w-auto object-contain hält das Seitenverhältnis.
SOIm Header mit priority laden. Das Logo ist Teil des ersten Bildes und darf nicht nachrutschen.
SORundmarke nicht kleiner als 96 px setzen — darunter läuft der Schriftring zu.
NICHTSichtbarkeit über Schatten oder Filter herstellen. Reicht der Kontrast nicht, ist die falsche Variante gewählt — die dritte Kachel oben zeigt, was passiert: auf Signal verschwindet das Schild in der Fläche.
Farben
Acht Tokens, ein Akzent. Alle liegen im @theme-Block von src/index.css und stehen als Tailwind-Utility (bg-, text-, border-) sowie als CSS-Variable zur Verfügung.
Einsatz
| Token | Hex | Wofür |
|---|---|---|
abyss | #0F131A | Grundfarbe ALLER Flächen: Body, Header, Footer, jede Sektion ohne eigenen Akzent. |
midnight | #111418 | Nur noch als SCHRIFTFARBE auf hellen Flächen (text-midnight auf Gelb und Weiß). |
ocean | #1E242B | Abgesetzte Sektionen und Karten, die sich vom Grund abheben sollen. |
anthracite | #3A4047 | Ränder, Icon-Flächen, zurückgenommene Headline-Zeilen. |
ice | #8A9A9E | Sekundärtext, Mono-Beschriftungen, ruhige Fließtext-Passagen. |
smoke | #D0D5D9 | Fließtext auf dunklem Grund. Der Standardton für längere Absätze. |
signal | #FFD600 | Der EINE Akzent: Taglines, Preise, aktive Zustände, Primär-Button. |
text | #FFFFFF | Überschriften und alles, was maximale Präsenz braucht. |
Regeln
SOabyss ist die Grundfarbe. Sektionen setzen sich mit ocean oder signal ab — sonst gar nicht.
SOTextmarkierung ist systemweit gesetzt: ::selection → Signal-Fläche, midnight-Schrift. Hier markieren zum Prüfen.
NICHTbg-midnight für Flächen benutzen. Der Token trägt nur noch dunkle SCHRIFT auf hellem Grund; als Fläche weicht er sichtbar vom Rest ab.
NICHTEinen zweiten Akzent einführen. Signal wirkt nur, solange es der einzige bunte Ton ist.
Typografie
Drei Rollen, zwei Schriften. Zugewiesen wird ausschließlich im @theme-Block von src/index.css — geladen werden sie in layout.tsx über next/font (selbst gehostet, keine externen Requests).
Rollen
| Utility | Token-Kette | Schrift | Wofür |
|---|---|---|---|
font-display | --font-headline → --font-inter | Inter | Überschriften, Buttons, Zahlen-Kacheln. |
font-sans | --font-body → --font-inter | Inter | Fließtext. Auch die Grundschrift im <body>. |
font-mono | --font-mono → --font-jetbrains | JetBrains Mono | Taglines, Kapitelnummern, Preise, Meta-Angaben. |
Ebenfalls geladen, aber keiner Rolle zugewiesen und daher mit preload: false: Geist (Grotesk) und die Hausschrift Gabriel Sans (400/500/700/900, WOFF2). Wer eine davon einer Rolle zuweist, muss in layout.tsx das Preload wieder aktivieren — sonst lädt sie erst verzögert nach.
Schriftschnitte
Skala
Alle Hero-Größen sind clamp()-Stufen und wachsen mit dem Fenster. Der vw-Wert ist so gewählt, dass das längste nicht umbrechbare Wort auch bei 320 px noch in seine Spalte passt — deshalb sind die Werte pro Seite verschieden.
text-[clamp(2.5rem,13vw,100px)] md:text-[clamp(4rem,8vw,100px)]text-[clamp(1.75rem,9vw,12rem)] md:text-[clamp(4rem,7vw,12rem)]text-[clamp(2.5rem,14vw,11rem)] md:text-[clamp(4rem,8vw,11rem)]text-3xl md:text-4xl lg:text-5xltext-3xl md:text-4xl xl:text-[2.5rem]text-xlTextrollen
Lead · font-sans text-lg md:text-xl text-smoke leading-relaxed — der Absatz direkt unter einer Headline.
Standard · text-base text-smoke leading-relaxed — Karten und laufender Text.
Sekundär · text-sm text-ice — Hinweise, Fußnoten, Meta.
Regeln
ACHTUNGleading-[1.05] wird in index.css global per !important auf 0.9 gezogen. Für die großen Versal-Headlines ist das gewollt. Wer für eine kleinere, mehrzeilige Überschrift echte 1.05 braucht, nimmt einen ANDEREN Wert — etwa leading-[1.18] wie CapsuleBlock und PriceBlock.
SOLange deutsche Komposita bekommen hyphens-auto break-words. Die Silbentrennung greift über lang="de" am <html>.
SOIn Flex-Spalten mit langen Wörtern zusätzlich min-w-0 setzen — ein Flex-Kind schrumpft sonst nicht unter die Breite seines längsten Wortes.
NICHTEin Gewicht verwenden, das nicht geladen ist. Der Browser rechnet es künstlich hoch (faux bold) und die Schrift wirkt verwaschen.
Raster & Raum
Ein einziger Container-Rhythmus trägt die ganze Site. Jede Sektion, das Mega-Menü und der Footer fluchten auf dieselben Ränder.
Container
| Maß | Wert | Wofür |
|---|---|---|
px-6 lg:px-[10%] | 24 px / 10 % | Seitenrand JEDER Sektion. Auch das Mega-Menü nutzt exakt diese Werte, damit es mit Logo und Inhalt fluchtet. |
h-24 / pt-24 | 96 px | Höhe der fixen Navbar und der Ausgleich am <main>. Derselbe Wert steckt im Anker-Offset von Lenis (−96) und in scroll-mt-24. |
min-h-[calc(100svh-6rem)] | Fenster − Navbar | Hero-Höhe. svh statt vh: keine Sprünge, wenn mobile Browser ihre Adressleiste ein- und ausblenden. |
py-24 / py-32 | 96 px / 128 px | Vertikaler Sektionsabstand. 24 für dichte Abschnitte, 32 für ruhige. |
max-w-2xl / 3xl / 4xl | 672 / 768 / 896 px | Zeilenlänge für Fließtext. Headlines laufen breiter. |
gap-[18px] | 18 px | Abstand zwischen Buttontext und Pfeil. Verbindlich für alle Text-Buttons. |
Abstands-Stufen
Flächen-Texturen
Technisches Raster, 4 rem, 3 % Weiß. Liegt auf einer eigenen ::before-Ebene und wird per mask-image nach unten ausgeblendet — sonst endete es an der Sektionskante hart. Im Einsatz auf den Beratungs-Sektionen der Leistungsseiten.
Drei senkrechte Linien bei 10 %, 50 % und 90 %, opacity-20. Auf /ueber, /kontakt und /karriere fixed über die ganze Seite — sie markieren den Container-Rhythmus.
Aktionen & Zustände
Vier Button-Rollen, zwei Link-Rollen — und der vollständige Katalog aller Hover-Bewegungen. Alle Demos unten sind live: darüberfahren zeigt das echte Verhalten.
Buttons
Links
Formularfeld
Hover-Katalog
Elf Bewegungen tragen die gesamte Site. Sie sind absichtlich wenige und wiederholen sich — dadurch fühlt sich jede Fläche gleich an. Die Zahl in Klammern ist die tatsächliche Häufigkeit im Quelltext.
| Bewegung | Utilities | Wo | Was passiert |
|---|---|---|---|
| Farbwechsel auf Signal | hover:text-signal transition-colors | Navigation, Footer-Links, Listeneinträge | Textfarbe → #FFD600. Der Grundhover der Site, 55× im Einsatz. |
| Pfeil schiebt nach rechts | group + group-hover:translate-x-1 transition-transform | Jeder Button mit ArrowRight | Der Pfeil wandert 4 px, der Text bleibt stehen. |
| Pfeil steigt diagonal | group-hover:translate-x-1 group-hover:-translate-y-1 | ArrowUpRight in Karten und Notdienst-Links | 4 px nach rechts und 4 px nach oben — die Richtung des Icons. |
| Flächen-Wipe von unten | scale-y-0 group-hover:scale-y-100 origin-bottom duration-500 | Karten-Hintergründe, Meister-Kachel | Eine Fläche wächst von der Unterkante hoch. 63× — das Leitmotiv. |
| Overlay schiebt hoch | translate-y-[100%] group-hover:translate-y-0 duration-500 | Primär-CTA auf /ueber und /karriere | Die Gegenfarbe fährt von unten über den Button, Text bleibt oben (z-10). |
| Unterstrich wächst | scale-x-0 group-hover:scale-x-100 origin-left duration-700 | Leistungskarten auf /leistungen | 2 px Signal-Linie läuft von links unter die Karte. |
| Invertierung | hover:bg-white hover:text-midnight | Slider-Pfeile, sekundäre Buttons | Fläche und Schrift tauschen. |
| Karte hebt sich | hover:border-signal/50 hover:bg-ocean/40 duration-500 | Nächste-Schritte-Karten der Leistungsseiten | Rand nimmt Signal an, Fläche wird eine Spur heller. |
| Nachzügler blendet ein | opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 | „Details ansehen“ in den Leistungskacheln | Die Zeile existiert erst beim Hover — sie soll die Karte nicht vollstellen. |
| Bild atmet | scale-105 group-hover:scale-100 group-hover:saturate-100 duration-700 | Team-Bild auf der Startseite | Das Bild fährt in seine Normalgröße zurück und gewinnt Farbe. |
| Pfeil dreht | group-hover:rotate-[-45deg] duration-300 | ArrowDownRight im Abschluss-CTA auf /ueber | Aus „nach unten rechts“ wird „nach rechts“. |
Live-Proben
Darüberfahren
Darüberfahren
Darüberfahren
Komponenten
Jeder Baustein live und mit dem Markup, das auf den echten Seiten steht. Header und Footer dieser Seite sind selbst Teil des Katalogs — sie laufen oben und unten mit.
Leistungskachel
Wärmepumpen
Hocheffiziente Luft- und Erdwärmepumpen inklusive Fördermittelberatung und hydraulischem Abgleich.
Heizlastberechnung
Raumweise Berechnung nach DIN EN 12831 zum Festpreis. Digitales Aufmaß statt Faustformel.
Frage-Block (CapsuleBlock)
Warum ist die Heizlastberechnung für eine Wärmepumpe so wichtig?
Weil sie über Anschlussleistung und Stromverbrauch entscheidet. Die Signal-Linie links wächst beim Hover von oben nach unten.
Preis-Stufen (PriceBlock)
Bewertungskarte
“Gute, schnelle und saubere Arbeit.”
Kennzahl-Kachel
Marquee
animate-marquee · 120 s linear, endlos. Der Inhalt ist viermal hintereinandergesetzt und die Keyframes laufen auf −50 % — nur so ist der Umschlagpunkt unsichtbar.
Kundenstimmen (ganze Sektion)
Dieselbe Komponente wie auf Startseite und /ueber, Inhalt aus src/constants. Steuerbar sind nur Vorzeile, Überschrift und die Rahmung — alles andere soll auf jeder Seite gleich aussehen. Endlosschleife mit Peek links und rechts, Wischen auf Touch, Punkte und Pfeile zur Bedienung.
Kundenstimmen live
“Erstklassige Arbeit und top Beratung! Wer einen zuverlässigen Fachbetrieb für eine Bad-Sanierung sucht, ist hier genau richtig. Die fachliche Kompetenz ist auf höchstem Niveau und die Umsetzung war einwandfrei.”
“Super strukturierte Firma. Zuverlässig in jeglicher Vereinbarung, sowie eine sehr saubere und fachliche Ausführung. Jegliche Details werden kommuniziert man wird stets involviert. Preisleistung top.”
“Gute, schnelle und saubere Arbeit.”
“Ich habe die Firma für eine Bodenheizung beauftragt, das hat super geklappt. Preisleistung der Hammer!”
“Absolut empfehlenswert! Wir hatten am Wochenende eine akute Verstopfung und ich war kurz vorm Verzweifeln, da zahlreiche andere Notdienste entweder nicht erreichbar waren oder kein Interesse zeigten. Diese Firma hat sofort reagiert und uns unkompliziert geholfen.”
“Nachdem mir kurzfristig andere Handwerker abgesprungen sind, hat Topallaj Haustechnik GmbH schnell reagiert und mir unkompliziert weitergeholfen. Die Arbeit war zuverlässig und professionell. Vielen Dank – klare Empfehlung!”
“Echte Lebensretter in der Not! Nach einem Defekt an meiner Toilette wurde mir hier sofort geholfen. Das Team war extrem schnell vor Ort, der Austausch verlief reibungslos und der Preis war absolut fair. Fachlich top und menschlich super – absolut empfehlenswert!”
“Erstklassige Arbeit und top Beratung! Wer einen zuverlässigen Fachbetrieb für eine Bad-Sanierung sucht, ist hier genau richtig. Die fachliche Kompetenz ist auf höchstem Niveau und die Umsetzung war einwandfrei.”
“Super strukturierte Firma. Zuverlässig in jeglicher Vereinbarung, sowie eine sehr saubere und fachliche Ausführung. Jegliche Details werden kommuniziert man wird stets involviert. Preisleistung top.”
“Gute, schnelle und saubere Arbeit.”
“Ich habe die Firma für eine Bodenheizung beauftragt, das hat super geklappt. Preisleistung der Hammer!”
“Absolut empfehlenswert! Wir hatten am Wochenende eine akute Verstopfung und ich war kurz vorm Verzweifeln, da zahlreiche andere Notdienste entweder nicht erreichbar waren oder kein Interesse zeigten. Diese Firma hat sofort reagiert und uns unkompliziert geholfen.”
“Nachdem mir kurzfristig andere Handwerker abgesprungen sind, hat Topallaj Haustechnik GmbH schnell reagiert und mir unkompliziert weitergeholfen. Die Arbeit war zuverlässig und professionell. Vielen Dank – klare Empfehlung!”
“Echte Lebensretter in der Not! Nach einem Defekt an meiner Toilette wurde mir hier sofort geholfen. Das Team war extrem schnell vor Ort, der Austausch verlief reibungslos und der Preis war absolut fair. Fachlich top und menschlich super – absolut empfehlenswert!”
“Erstklassige Arbeit und top Beratung! Wer einen zuverlässigen Fachbetrieb für eine Bad-Sanierung sucht, ist hier genau richtig. Die fachliche Kompetenz ist auf höchstem Niveau und die Umsetzung war einwandfrei.”
Bildsprache
Fotos sind Kulisse, nicht Hauptdarsteller. Sie werden entsättigt, abgedunkelt und in den Hintergrund gelegt, damit die Typografie vorne bleibt.
| Rezept | Utilities | Wofür |
|---|---|---|
| Hero-Hintergrund | grayscale contrast-[1.1] opacity-50 mix-blend-luminosity | Dazu zwei Verläufe: von unten nach oben from-abyss via-abyss/60 und von links from-abyss via-transparent. Der Text steht auf der dunklen Seite. |
| Karte / Kachel | opacity-40 mix-blend-luminosity group-hover:opacity-60 group-hover:scale-105 | Beim Hover wird das Bild wacher und größer. |
| Format | WebP | Alle Motive liegen in /public/images/webp/. Dateinamen tragen die Leistung und den Betrieb — leistung-topallaj-haustechnik-01.webp. |
| Bildausschnitt | object-cover object-[40%_20%] | Der Ausschnitt wird pro Motiv gesetzt, damit Gesichter und Werkzeuge nicht angeschnitten werden. |
SOnext/image mit fill + sizes benutzen. Ohne sizes lädt Next die größte Variante auch auf dem Telefon.
SONur das erste sichtbare Bild bekommt priority.
NICHTVolle Farbe und volle Deckkraft hinter Text. Die Entsättigung ist kein Effekt, sondern die Bedingung dafür, dass Weiß auf dem Bild lesbar bleibt.
Motion
Vier Kurven, ein Scroll-System, ein Attribut-Vokabular. Alles respektiert prefers-reduced-motion — dort steht jede Choreografie still und der Inhalt ist sofort da.
Ease-Kurven
M0,0 C0.25,0.15 0.3,1 1,1Intro-Choreografie (PageIntro). Kein flacher Start, kein Pop: v₀ 0.65, v_max 2.10.
cubic-bezier(0.16, 1, 0.3, 1)Framer-Motion-Auftritte, Overlay-Wipes, Karten-Reveals.
cubic-bezier(0.22, 0.68, 0.36, 1)Kundenstimmen-Karussell, 0.7 s pro Schritt.
cubic-bezier(0.37, 0, 0.63, 1)Pfeil-Schleife im Hero-Button (animate-nudge-down, 1.9 s).
Intro-Choreografie · data-rv-*
PageIntro hängt im Layout und läuft auf JEDER Seite. Die Komponente rendert nichts — sie liest Attribute im Markup, zerlegt Text in Masken und fährt eine GSAP-Timeline. Die Masken clippen mit clip-path und negativem Inset, nicht mit overflow:hidden: die Punkte auf dem Ä in „WÄRME“ ragen 0.14 em über ihre Zeilenbox hinaus und fielen sonst weg. Seitlich wird gar nicht geclippt (−100 %), sonst verliert jede Headline, die breiter ist als ihre Spalte, ihr Ende.
| Attribut | Wirkung | Falle |
|---|---|---|
data-rv-nav | Navigationselement. Fade-Up ganz zu Beginn, Stagger 0.05 s. | NICHT auf einen Wrapper setzen, der ein position:fixed-Kind enthält — GSAP lässt dort ein transform stehen und macht ihn zum Containing Block. |
data-rv-words | Headline, Wort für Wort aus Masken herein. Stagger 0.59 s. | Element-Kinder bleiben als GANZES ein Wort — ein Span mit bg-clip-text verlöre sonst seinen Träger. |
data-rv-lines | Headline, Zeile für Zeile. Stagger 0.61 s, getrennt an den gesetzten <br>. | Ohne <br> wird nach GERENDERTER Zeile gruppiert — erst nach document.fonts.ready. |
data-rv-lines="body" | Fließtext, flachere Maske (yPercent 112 statt 125). | Startet erst, wenn der letzte Headline-Teil angelaufen ist. |
data-rv-rise | Alles Übrige. Schlichtes Fade-Up. | Der Haken gehört auf den Link, nicht auf den Button darin — sonst kollidieren GSAPs Inline-Styles mit transition-colors. |
Scroll-Reveal · FadeIn
Fade-Up
IntersectionObserver, threshold 0.1, rootMargin 0 0 −50px. 700 ms, translate-y-8 → 0.
Fade-Up
IntersectionObserver, threshold 0.1, rootMargin 0 0 −50px. 700 ms, translate-y-8 → 0.
Fade-Up
IntersectionObserver, threshold 0.1, rootMargin 0 0 −50px. 700 ms, translate-y-8 → 0.
Endlos-Schleifen
| Utility | Definition | Wo |
|---|---|---|
animate-marquee | 120 s linear, translate3d 0 → −50 % | Leistungs-Laufband |
animate-nudge-down | 1.9 s sine-in-out, translate3d 0 → 5 px → 0 | Gelber Pfeil im Hero-Button „Unsere Leistungen“ |
animate-pulse | Tailwind-Standard | Punkt vor der Hero-Tagline |
animate-[spin_60s_linear_infinite] | 60 s, eine Umdrehung | Quadrat-Ornament auf /ueber |
Scroll-System
| Einstellung | Wert | Warum |
|---|---|---|
Lenis duration | 1.2 s | Weiches Nachlaufen, easing 1.001 − 2^(−10t). |
anchors | { offset: -96 } | Lenis führt Anker-Links selbst aus. Ohne das springt der Browser hart, während Lenis noch seine eigene Position hält — beide korrigieren sich danach gegenseitig und es ruckelt. Die 96 px sind die Navbar-Höhe. |
lagSmoothing(80, 33) | GSAP-Ticker | NICHT lagSmoothing(0) wie im Standard-Lenis-Rezept: blockiert der Main-Thread 250 ms, spulte GSAP danach in EINEM Frame um 250 ms vor. |
?t=0.42 | QA-Schalter | Friert die Partikel-Choreografie im Hero der Startseite an dieser Stelle des 24-s-Zyklus ein und legt ihre Uniforms auf window.__morph. |
Partikel-Hero (ElementMorph)
Hier bewusst nicht als zweite Instanz eingebaut: Die Komponente leitet ihre Größe aus closest("section") und der gemessenen Textspalte [data-hero-copy] ab und würde in einem Demo-Kasten falsche Maße bekommen. Zu sehen ist sie im Hero der Startseite.
| Parameter | Wert |
|---|---|
| Körner | 14 000 – 65 000, abgeleitet aus der Canvas-Fläche |
| Zyklus | 24 s: Welle → Verwandlung zu Feuer (~3,8 s) → Feuer (~5,8 s) → zurück zur Welle |
| Aufbau | Einmalig ~3 s, Anteil wächst mit der 1,7. Potenz — erst hunderte Körner, dann tausende |
| Schutz | WebGL-Probe vor dem three.js-Import, compileAsync, RAF nur bei Sichtbarkeit, bei reduced-motion ein Standbild |
Regeln
ACHTUNGTailwind v4 schreibt translate-*, scale-* und rotate-* auf die EIGENSTÄNDIGEN CSS-Eigenschaften translate, scale, rotate — transform bleibt none. Zwei Folgen: Eine Übergangsliste transition-[opacity,transform] läuft ins Leere (richtig ist transition-[opacity,translate]), und wer beim Prüfen getComputedStyle(el).transform ausliest, bekommt überall none und hält funktionierende Hover für kaputt.
NICHTGSAP und Framer Motion auf dieselben Properties setzen. Wo die Intro-Choreografie opacity und y führt, darf daneben kein motion.div dasselbe animieren — zwei Systeme auf einer Property ergeben genau das Ruckeln, das man dann der Ease anlastet.
SOBeim Bauen eines neuen Reveals transition-[opacity,translate] statt transition-all — sonst animieren Breiten- und Farbwechsel unbeabsichtigt mit.
SODiese Seite gegenprüfen mit node scripts/verify-styleguide.mjs: misst Konsole, Overflow, Hover-Endzustände, Fokusfarben, Slider-Bedienung und den Reduced-Motion-Pass.
Consent-Dialog
Klaro, konfiguriert in src/components/CookieConsent/klaro-config.js, gestylt in cookie-style.css. Hier bewusst NICHT als Demo nachgebaut: Klaro sucht und erzeugt seine UI selbst und würde ein statisches Abbild mit denselben Klassen kapern. Der Fingerabdruck-Knopf unten rechts öffnet ihn jederzeit — das ist die DSGVO-Anforderung, die Einwilligung widerrufbar zu halten.
Pflege
Ändert sich ein Token, eine Komponente oder ein Hover, wird diese Seite in derselben Sitzung mitgezogen. Ein Style Guide, der nicht mitwandert, fängt an zu lügen — und niemand merkt es, weil er ja weiterhin aussieht wie eine Referenz.
Erreichbar über das ©-Zeichen im Footer. Nicht in der Sitemap, nicht indexiert.