/* ============================================================
N7 GmbH · main.css
------------------------------------------------------------
Sektions-CSS, weiterhin pro Sektion praefixiert (.n7-header-*,
.n7-hero-* usw.). Aus den 00-99-HTML-Dateien in /sections
uebernommen; die dort dupliziert vorliegenden Token-Bloecke
(--n7-angle, --n7-chamfer-*, --n7-hairline-*, --n7-tone-*) sind
entfernt, sie kommen jetzt ausschliesslich aus tokens.css, das
vor dieser Datei geladen wird (siehe functions.php,
n7_enqueue_assets: n7-tokens ist Abhaengigkeit von n7-main).
Reihenfolge entspricht der Ausgabe auf der Seite: Header, 01-08,
Footer.
============================================================ */
/* ============ Global: sanftes Scrollen zu Ankerzielen ============
Einzige bewusste Ausnahme von der Pro-Sektion-Kapselung:
scroll-behavior ist dokumentweit, nicht sinnvoll pro Sektion
scopebar (N7-AENDERUNGEN-RUNDE-2.md Abschnitt A). Bei
prefers-reduced-motion deaktiviert, wie ueberall sonst im
Projekt. */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
/* ============ Sektion 00: Header (.n7-header-*) ============ */
.n7-header,
.n7-header *,
.n7-header *::before,
.n7-header *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Startzustand: leichter Verlauf fuer Textkontrast ueber dem
Hero-Bild. Beim Scrollen wird der Hintergrund solide. */
background: linear-gradient(180deg, rgba(23, 23, 23, 0.55) 0%, rgba(23, 23, 23, 0) 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0);
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.n7-header.n7-header--scrolled,
.n7-header.n7-header--menu-open {
background: #171717;
border-bottom-color: var(--n7-hairline-on-dark);
}
.n7-header-skip {
position: absolute;
left: -9999px;
top: 0;
background: #ffffff;
color: #171717;
font-size: 0.9375rem;
font-weight: 600;
padding: 12px 20px;
}
.n7-header-skip:focus {
left: 0;
z-index: 10;
}
.n7-header-inner {
position: relative;
max-width: 1160px;
margin: 0 auto;
height: 60px;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* --- Logo --- */
.n7-header-logo {
/* Mobil: eigene Flex-Zone zwischen Burger und CTA, darin
zentriert. Vorher per position:absolute+left:50% bezogen auf
die gesamte Header-Breite zentriert, unabhaengig von der
CTA-Breite - dadurch konnte das (jetzt breitere) Logo mit dem
Button "Projekt anfragen" kollidieren. Flex:1 mit
justify-content:center zentriert stattdessen nur in der
tatsaechlich verfuegbaren Restbreite, ueberlappt also nie. */
display: flex;
flex: 1 1 auto;
min-width: 0;
align-items: center;
justify-content: center;
min-height: 44px;
text-decoration: none;
color: #ffffff;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.n7-header-logo img {
display: block;
height: 44px;
width: auto;
/* Dunkle Logo-Variante per Filter auf einfarbig Weiss
(auf dunklem Header sonst unlesbar). Entfaellt, sobald
eine helle Logo-Datei vorliegt. */
filter: brightness(0) invert(1);
}
/* --- Desktop-Navigation --- */
.n7-header-nav {
display: none;
}
.n7-header-nav-list {
display: flex;
align-items: center;
gap: 36px;
list-style: none;
}
/* Untermenue Leistungen (N7-AENDERUNGEN-RUNDE-2.md Abschnitt A):
Grundzustand rein per CSS (hover + focus-within), funktioniert
ohne JavaScript und per Tastatur (Tab auf den Link loest
:focus-within aus). nav.js ergaenzt zusaetzlich einen echten
Toggle-Button (.n7-header-nav-toggle) fuer explizites
Klicken/Tippen statt nur Hover - "nicht als Hover-Menue"
laut Briefing. Beide Mechanismen wirken uebereinander (siehe
.n7-header-nav-item--open unten), keiner schliesst den anderen
aus. */
.n7-header-nav-item {
position: relative;
display: flex;
align-items: center;
}
.n7-header-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 44px;
margin-left: -4px;
background: transparent;
border: 0;
padding: 0;
color: #d4d4d4;
cursor: pointer;
flex: none;
}
.n7-header-nav-toggle:hover {
color: #ffffff;
}
.n7-header-nav-toggle::after {
content: "";
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s ease;
}
.n7-header-nav-item:hover .n7-header-nav-toggle::after,
.n7-header-nav-item:focus-within .n7-header-nav-toggle::after,
.n7-header-nav-item--open .n7-header-nav-toggle::after {
transform: rotate(-135deg);
}
.n7-header-nav-toggle:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.n7-header-sub {
position: absolute;
top: 100%;
left: -16px;
min-width: 260px;
background: #171717;
border: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
list-style: none;
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.n7-header-nav-item:hover .n7-header-sub,
.n7-header-nav-item:focus-within .n7-header-sub,
.n7-header-nav-item--open .n7-header-sub {
opacity: 1;
visibility: visible;
transform: none;
}
.n7-header-sub a {
display: block;
padding: 10px 16px;
color: #d4d4d4;
text-decoration: none;
font-size: 0.875rem;
}
.n7-header-sub a:hover,
.n7-header-sub a:focus-visible {
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
}
.n7-header-nav-link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
color: #d4d4d4;
text-decoration: none;
font-size: 0.9375rem;
font-weight: 400;
letter-spacing: 0.01em;
transition: color 0.2s ease;
}
.n7-header-nav-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 8px;
height: 1px;
background: #ffffff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.2s ease;
}
.n7-header-nav-link:hover {
color: #ffffff;
}
.n7-header-nav-link:hover::after {
transform: scaleX(1);
}
/* --- Aktiver Menuepunkt -----------------------------------------
WordPress setzt "current-menu-item" (und bei Kindern zusaetzlich
"current-menu-parent"/"current-menu-ancestor" auf "Leistungen")
automatisch auf das , unabhaengig davon ob der Menuepunkt
eine echte Seite oder ein Custom Link ist. Gleiche Optik wie
:hover, aber dauerhaft statt nur bei Mauskontakt. */
.n7-header-nav .current-menu-item > .n7-header-nav-link,
.n7-header-nav .current-menu-parent > .n7-header-nav-link,
.n7-header-nav .current-menu-ancestor > .n7-header-nav-link {
color: #ffffff;
}
.n7-header-nav .current-menu-item > .n7-header-nav-link::after,
.n7-header-nav .current-menu-parent > .n7-header-nav-link::after,
.n7-header-nav .current-menu-ancestor > .n7-header-nav-link::after {
transform: scaleX(1);
}
.n7-header-sub .current-menu-item > a {
color: #ffffff;
background: rgba(255, 255, 255, 0.06);
}
/* --- CTA --- */
.n7-header-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 16px;
background: #ffffff;
color: #171717;
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
/* Gehrung statt Rundung: Radius 0, angeschraegte Ecke unten
rechts (kanonische Ecke, konsequent bei allen Buttons) */
border-radius: 0;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer-sm)),
calc(100% - var(--n7-chamfer-sm-x)) 100%,
0 100%
);
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease;
}
.n7-header-cta:hover {
background: #d4d4d4;
}
/* --- Burger (nur mobil) --- */
.n7-header-burger {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
background: transparent;
border: 0;
cursor: pointer;
}
.n7-header-burger-line {
display: block;
width: 20px;
height: 2px;
background: #ffffff;
transition: transform 0.25s ease, opacity 0.25s ease;
}
.n7-header--menu-open .n7-header-burger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.n7-header--menu-open .n7-header-burger-line:nth-child(2) {
opacity: 0;
}
.n7-header--menu-open .n7-header-burger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* --- Mobiles Overlay-Menue --- */
.n7-header-overlay {
position: fixed;
inset: 60px 0 0 0;
z-index: 99;
background: #171717;
opacity: 0;
visibility: hidden;
overflow-y: auto;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.n7-header--menu-open .n7-header-overlay {
opacity: 1;
visibility: visible;
}
.n7-header-overlay-list {
list-style: none;
padding: 40px 24px;
display: flex;
flex-direction: column;
}
/* Trennlinie jetzt auf dem , nicht mehr auf dem Link: der
Toggle-Button (siehe unten) sitzt als zweites Flex-Kind daneben,
die Linie muss trotzdem ueber die volle Zeilenbreite laufen. */
.n7-header-overlay-list > li {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
border-bottom: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
}
.n7-header-overlay-link {
display: flex;
align-items: center;
flex: 1;
min-height: 56px;
color: #ffffff;
text-decoration: none;
font-size: 1.5rem;
font-weight: 600;
transform: translateY(8px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.n7-header--menu-open .n7-header-overlay-link {
transform: translateY(0);
opacity: 1;
}
.n7-header--menu-open .n7-header-overlay-list li:nth-child(1) .n7-header-overlay-link { transition-delay: 0.05s; }
.n7-header--menu-open .n7-header-overlay-list li:nth-child(2) .n7-header-overlay-link { transition-delay: 0.1s; }
.n7-header--menu-open .n7-header-overlay-list li:nth-child(3) .n7-header-overlay-link { transition-delay: 0.15s; }
.n7-header--menu-open .n7-header-overlay-list li:nth-child(4) .n7-header-overlay-link { transition-delay: 0.2s; }
/* Aktiver Menuepunkt: Overlay-Links sind schon weiss, deshalb ueber
die Trennlinie markiert statt ueber die Textfarbe. Die Linie sitzt
jetzt am (siehe oben), current-menu-item/-parent/-ancestor
ebenfalls - deshalb direkt am selektiert, nicht mehr ueber
den Link. */
.n7-header-overlay-list > li.current-menu-item,
.n7-header-overlay-list > li.current-menu-parent,
.n7-header-overlay-list > li.current-menu-ancestor {
border-bottom-color: #ffffff;
}
/* Toggle-Button "Leistungen" aufklappen (von nav.js eingefuegt).
Faehrt dieselbe Ein-/Ausblend-Animation wie der Link daneben. */
.n7-header-overlay-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex: none;
background: transparent;
border: 0;
color: #b0b0b0;
cursor: pointer;
transform: translateY(8px);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.n7-header--menu-open .n7-header-overlay-toggle {
transform: translateY(0);
opacity: 1;
}
.n7-header-overlay-toggle:hover,
.n7-header-overlay-toggle:focus-visible {
color: #ffffff;
}
.n7-header-overlay-toggle:focus-visible {
outline: 2px solid #ffffff;
outline-offset: -2px;
}
.n7-header-overlay-toggle::after {
content: "";
width: 9px;
height: 9px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
/* Grundzustand zeigt "aufgeklappt" (nach oben): ohne JS bzw. vor
dem ersten Toggle ist die Gruppe immer offen, siehe unten. */
transform: rotate(-135deg);
}
.n7-header-overlay-item--collapsed .n7-header-overlay-toggle::after {
transform: rotate(45deg);
}
/* Aufklappbare Gruppe (N7-AENDERUNGEN-RUNDE-2.md Abschnitt A:
"nicht als Hover-Menue"). Ohne JavaScript wird die Klasse
--collapsed nie gesetzt, die Unterpunkte bleiben also immer
sichtbar - sicherer Grundzustand, der Seite bleibt ohne
JavaScript vollstaendig nutzbar. Erst nav.js setzt die Gruppe
beim Laden auf "eingeklappt" und schaltet sie per Klick um. */
.n7-header-overlay-item--collapsed .n7-header-overlay-sub {
display: none;
}
/* flex-basis: 100% erzwingt den Zeilenumbruch: die Sub-Liste ist
ein drittes Flex-Kind im (Link, Toggle, Sub-Liste), soll
aber unter beiden erscheinen statt daneben. Wichtig auch ohne
JS: dann fehlt die --collapsed-Klasse und die Sub-Liste ist
immer sichtbar, muss also auch dann korrekt umbrechen. */
.n7-header-overlay-sub {
list-style: none;
padding: 4px 0 12px 16px;
flex-basis: 100%;
}
.n7-header-overlay-sub a {
display: flex;
align-items: center;
min-height: 44px;
color: #b0b0b0;
text-decoration: none;
font-size: 1rem;
}
.n7-header-overlay-sub a:hover {
color: #ffffff;
}
.n7-header-overlay-sub .current-menu-item > a {
color: #ffffff;
}
.n7-header-overlay-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
margin: 32px 24px 0;
padding: 0 24px;
background: #ffffff;
color: #171717;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
border-radius: 0;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer-sm)),
calc(100% - var(--n7-chamfer-sm-x)) 100%,
0 100%
);
}
/* --- Heller Header-Zustand -------------------------------------
N7-AENDERUNGEN-RUNDE-2.md Abschnitt D2, Fehler 1: auf Seiten
ohne dunkles Kopfbild (Impressum, Datenschutz, AGB, 404,
Kontakt) ist der transparente Header mit hellem Text auf
hellem Grund unlesbar. Zustand kommt ueber eine Klasse am
(functions.php, n7_body_class_light_header via
body_class-Filter), steht also schon im ersten HTML-Response,
nicht per JavaScript nachgereicht. Deckt auch den Scroll- und
Mobile-Menue-Zustand ab, damit die beiden sich nicht
widersprechen (sonst wuerde der Header beim Scrollen von hell
auf dunkel-mit-hellem-Text kippen, wieder unlesbar). */
body.n7-header-light .n7-header {
background: #f4f4f4;
border-bottom-color: var(--n7-hairline-on-light);
}
body.n7-header-light .n7-header.n7-header--scrolled,
body.n7-header-light .n7-header.n7-header--menu-open {
background: #f4f4f4;
border-bottom-color: var(--n7-hairline-on-light);
}
body.n7-header-light .n7-header-logo {
color: #171717;
}
body.n7-header-light .n7-header-logo img {
/* Kein Weiss-Filter noetig/gewuenscht: die Logo-Datei ist von
Haus aus dunkel, genau richtig fuer hellen Grund. */
filter: none;
}
body.n7-header-light .n7-header-nav-link {
color: #4a4a4a;
}
body.n7-header-light .n7-header-nav-link:hover {
color: #171717;
}
body.n7-header-light .n7-header-nav-link::after {
background: #171717;
}
body.n7-header-light .n7-header-nav .current-menu-item > .n7-header-nav-link,
body.n7-header-light .n7-header-nav .current-menu-parent > .n7-header-nav-link,
body.n7-header-light .n7-header-nav .current-menu-ancestor > .n7-header-nav-link {
color: #171717;
}
body.n7-header-light .n7-header-nav-toggle {
color: #6f6f6f;
}
body.n7-header-light .n7-header-nav-toggle:hover {
color: #171717;
}
body.n7-header-light .n7-header-sub {
background: #ffffff;
border-color: var(--n7-hairline-on-light);
}
body.n7-header-light .n7-header-sub a {
color: #4a4a4a;
}
body.n7-header-light .n7-header-sub a:hover,
body.n7-header-light .n7-header-sub a:focus-visible {
color: #171717;
background: rgba(23, 23, 23, 0.05);
}
body.n7-header-light .n7-header-sub .current-menu-item > a {
color: #171717;
background: rgba(23, 23, 23, 0.05);
}
body.n7-header-light .n7-header-cta {
background: #171717;
color: #ffffff;
}
body.n7-header-light .n7-header-cta:hover {
background: #333333;
}
body.n7-header-light .n7-header-burger-line {
background: #171717;
}
body.n7-header-light .n7-header-overlay {
background: #f4f4f4;
}
body.n7-header-light .n7-header-overlay-list > li {
border-bottom-color: var(--n7-hairline-on-light);
}
body.n7-header-light .n7-header-overlay-list > li.current-menu-item,
body.n7-header-light .n7-header-overlay-list > li.current-menu-parent,
body.n7-header-light .n7-header-overlay-list > li.current-menu-ancestor {
border-bottom-color: #171717;
}
body.n7-header-light .n7-header-overlay-link {
color: #171717;
}
body.n7-header-light .n7-header-overlay-toggle {
color: #6f6f6f;
}
body.n7-header-light .n7-header-overlay-toggle:hover,
body.n7-header-light .n7-header-overlay-toggle:focus-visible {
color: #171717;
}
body.n7-header-light .n7-header-overlay-sub a {
color: #4a4a4a;
}
body.n7-header-light .n7-header-overlay-sub a:hover {
color: #171717;
}
body.n7-header-light .n7-header-overlay-sub .current-menu-item > a {
color: #171717;
}
body.n7-header-light .n7-header-overlay-cta {
background: #171717;
color: #ffffff;
}
body.n7-header-light .n7-header a:focus-visible,
body.n7-header-light .n7-header button:focus-visible {
outline-color: #171717;
}
/* --- Fokus-Zustaende --- */
.n7-header a:focus-visible,
.n7-header button:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* --- Breakpoints (Mobile First) --- */
@media (min-width: 768px) {
.n7-header-inner {
height: 72px;
padding: 0 32px;
}
.n7-header-logo {
/* Ab hier normaler Flex-Item ohne erzwungene Zentrierung,
Nav und CTA folgen rechts daneben wie gehabt. */
flex: 0 0 auto;
justify-content: flex-start;
}
.n7-header-nav {
display: block;
}
.n7-header-burger,
.n7-header-overlay {
display: none;
}
.n7-header-cta {
min-height: 44px;
padding: 0 22px;
font-size: 0.9375rem;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-header,
.n7-header *,
.n7-header *::before,
.n7-header *::after {
transition: none !important;
}
}
/* ============ Sektion 01: Hero (.n7-hero-*) ============ */
.n7-hero,
.n7-hero *,
.n7-hero *::before,
.n7-hero *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
align-items: center;
background: #171717;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
overflow: hidden;
}
/* --- Hintergrundbild + Overlay --- */
.n7-hero-media {
position: absolute;
inset: 0;
z-index: 0;
background: #1a1a1a;
}
.n7-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
/* Strikt monochrome Palette: entfernt die warmen
Fensterlichter des Fotos. Bei Bedarf Zeile loeschen. */
filter: grayscale(1);
}
.n7-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
/* Dunkler Overlay fuer Textkontrast, links am staerksten */
background: linear-gradient(
90deg,
rgba(13, 13, 13, 0.82) 0%,
rgba(13, 13, 13, 0.55) 55%,
rgba(13, 13, 13, 0.30) 100%
);
}
/* --- Inhalt --- */
.n7-hero-inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1160px;
margin: 0 auto;
padding: 120px 20px 72px;
}
.n7-hero-eyebrow {
color: rgba(255, 255, 255, 0.72);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-hero-headline {
margin-top: 20px;
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.01em;
text-wrap: balance;
}
.n7-hero-headline span {
display: block;
color: #b8b8b8;
}
.n7-hero-subline {
margin-top: 24px;
max-width: 38em;
color: #d4d4d4;
font-size: 1.0625rem;
line-height: 1.6;
}
.n7-hero-slogan {
margin-top: 28px;
padding-left: 16px;
border-left: 1px solid rgba(255, 255, 255, 0.35);
color: #b0b0b0;
font-size: 0.9375rem;
line-height: 1.5;
max-width: 30em;
}
/* --- CTAs --- */
.n7-hero-actions {
margin-top: 40px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
}
.n7-hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 32px;
background: #ffffff;
color: #171717;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
/* Gehrung statt Rundung, kanonische Ecke unten rechts */
border-radius: 0;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer-sm)),
calc(100% - var(--n7-chamfer-sm-x)) 100%,
0 100%
);
transition: background-color 0.2s ease;
}
.n7-hero-cta:hover {
background: #d4d4d4;
}
.n7-hero-secondary {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
color: #ffffff;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
}
.n7-hero-secondary-label {
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 2px;
transition: border-color 0.2s ease;
}
.n7-hero-secondary:hover .n7-hero-secondary-label {
border-color: #ffffff;
}
.n7-hero-secondary-arrow {
transition: transform 0.2s ease;
}
.n7-hero-secondary:hover .n7-hero-secondary-arrow {
transform: translateY(3px);
}
.n7-hero a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* --- Breakpoints (Mobile First) --- */
@media (min-width: 768px) {
.n7-hero-inner {
padding: 160px 32px 96px;
}
.n7-hero-subline {
font-size: 1.125rem;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-hero,
.n7-hero *,
.n7-hero *::before,
.n7-hero *::after {
transition: none !important;
}
}
/* ============ Sektion 02: Generalunternehmer-Prinzip (.n7-gu-*) ============ */
.n7-gu,
.n7-gu *,
.n7-gu *::before,
.n7-gu *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-gu {
/* Abstand fuer Anker-Spruenge unter dem fixen Header */
scroll-margin-top: var(--n7-header-height);
background: #1a1a1a;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-gu-inner {
scroll-margin-top: var(--n7-header-height);
max-width: 1160px;
margin: 0 auto;
padding: 88px 20px;
}
/* --- Linke Spalte: Sektionskopf --- */
.n7-gu-kicker {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-gu-headline {
margin-top: 16px;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 16ch;
}
.n7-gu-lead {
margin-top: 20px;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 30em;
}
/* --- Portraet (Split-Layout mit Bild, Briefing-Option) --- */
.n7-gu-portrait {
margin-top: 32px;
max-width: 320px;
}
.n7-gu-portrait img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
/* Originalfarben auf Kundenwunsch (10.08.2026) */
}
.n7-gu-portrait figcaption {
margin-top: 10px;
color: #9a9a9a;
font-size: 0.8125rem;
letter-spacing: 0.02em;
}
/* --- Rechte Spalte: nummerierte Liste --- */
.n7-gu-list {
list-style: none;
margin-top: 56px;
}
.n7-gu-item {
display: grid;
grid-template-columns: 64px 1fr;
gap: 8px 20px;
padding: 28px 0;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
}
.n7-gu-item:last-child {
border-bottom: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
}
/* Positionsnummer wie im Bauplan: gross, im Logo-Hellgrau,
mit deutlichem Abstand zum Text. Das eine auffaellige
Gestaltungselement dieser Sektion. */
.n7-gu-num {
color: var(--n7-tone-light);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
padding-top: 2px;
}
.n7-gu-item-title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.n7-gu-item-text {
grid-column: 2;
color: #b0b0b0;
font-size: 0.9375rem;
line-height: 1.6;
max-width: 34em;
}
/* --- Breakpoints (Mobile First) --- */
@media (min-width: 768px) {
.n7-gu-inner {
padding: 120px 32px;
}
}
@media (min-width: 1024px) {
.n7-gu-inner {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 64px;
align-items: start;
}
.n7-gu-head {
/* Haftet beim Scrollen, solange die Liste laenger ist */
position: sticky;
top: 120px;
}
.n7-gu-list {
margin-top: 0;
}
.n7-gu-item {
grid-template-columns: 88px 1fr;
padding: 36px 0;
}
.n7-gu-num {
font-size: 2rem;
}
.n7-gu-item-title {
font-size: 1.375rem;
}
.n7-gu-item-text {
font-size: 1rem;
}
}
/* ============ Sektion 03: Leistungen (.n7-leistungen-*) ============ */
.n7-leistungen,
.n7-leistungen *,
.n7-leistungen *::before,
.n7-leistungen *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-leistungen {
/* Abstand fuer Anker-Spruenge unter dem fixen Header */
scroll-margin-top: var(--n7-header-height);
background: #f4f4f4;
color: #171717;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-leistungen-inner {
max-width: 1160px;
margin: 0 auto;
padding: 88px 20px;
}
/* --- Sektionskopf --- */
.n7-leistungen-kicker {
color: #6f6f6f;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-leistungen-headline {
margin-top: 16px;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 18ch;
}
.n7-leistungen-lead {
margin-top: 20px;
color: #4a4a4a;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 38em;
}
/* --- Bereichsblöcke --- */
.n7-leistungen-bereich {
margin-top: 64px;
padding-top: 40px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-leistungen-bereich-head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 12px 20px;
}
/* Positionsnummer wie im Bauplan: gross, im Logo-Hellgrau
(dekorativ, aria-hidden; die Information steckt im Titel).
Gleiches Element wie in Sektion 02, damit es System ist. */
.n7-leistungen-bereich-num {
color: var(--n7-tone-light);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
}
.n7-leistungen-bereich-title {
font-size: 1.5rem;
font-weight: 700;
line-height: 1.2;
}
.n7-leistungen-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.n7-leistungen-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 3px 12px 1px;
border-radius: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
/* Ausgefuellt im dunklen Logo-Tonwert = eigene N7-Teams */
.n7-leistungen-badge--eigen {
background: var(--n7-tone-dark);
color: #ffffff;
}
/* 1px-Umriss = Partner-Meisterbetrieb. Bewusst 0.4 statt der
Deko-Hairline (0.14): das Badge traegt Information und muss
als Umriss erkennbar bleiben. */
.n7-leistungen-badge--partner {
border: var(--n7-hairline-width) solid rgba(23, 23, 23, 0.4);
color: #333333;
background: transparent;
}
.n7-leistungen-bereich-text {
margin-top: 16px;
color: #4a4a4a;
font-size: 0.9375rem;
line-height: 1.6;
max-width: 44em;
}
/* --- Bildreihe: mobil horizontal scrollbar, ab 768px Raster --- */
.n7-leistungen-medien {
margin-top: 28px;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 78%;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
}
.n7-leistungen-medium {
scroll-snap-align: start;
margin: 0;
}
.n7-leistungen-medium img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
background: #e2e2e2;
}
.n7-leistungen-medium figcaption {
margin-top: 8px;
color: #6f6f6f;
font-size: 0.75rem;
letter-spacing: 0.04em;
}
/* --- Ergänzungszeile weitere Eigenleistungen --- */
.n7-leistungen-extra {
margin-top: 64px;
padding-top: 24px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
color: #4a4a4a;
font-size: 0.875rem;
line-height: 1.6;
max-width: 52em;
}
.n7-leistungen-extra strong {
color: #171717;
font-weight: 600;
}
.n7-leistungen-mehr {
margin-top: 14px;
font-size: 0.9375rem;
font-weight: 600;
}
.n7-leistungen-mehr a,
.n7-leistungen-extra a {
color: #171717;
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- Breakpoints (Mobile First) --- */
@media (min-width: 768px) {
.n7-leistungen-inner {
padding: 120px 32px;
}
.n7-leistungen-bereich {
margin-top: 72px;
padding-top: 48px;
}
.n7-leistungen-bereich-title {
font-size: 1.75rem;
}
.n7-leistungen-bereich-num {
font-size: 2rem;
}
.n7-leistungen-medien {
grid-auto-flow: row;
grid-template-columns: repeat(3, 1fr);
grid-auto-columns: unset;
gap: 16px;
overflow-x: visible;
scroll-snap-type: none;
}
}
/* ============ Sektion DIN-Normen und Konformitaet (.n7-normen-*) ============
Neu, N7-AENDERUNGEN-RUNDE-1.md Abschnitt D. Zwischen Leistungen
und Prozess. Reines Text/Nummern-Muster wie Sektion 02 und 03,
keine zusaetzlichen Deko-Elemente (Zurueckhaltungsregel). */
.n7-normen,
.n7-normen *,
.n7-normen *::before,
.n7-normen *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-normen {
background: #f4f4f4;
color: #171717;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-normen-inner {
max-width: 1160px;
margin: 0 auto;
padding: 64px 20px;
}
.n7-normen-kicker {
color: #6f6f6f;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-normen-headline {
margin-top: 16px;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 18ch;
}
.n7-normen-liste {
list-style: none;
margin-top: 48px;
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
.n7-normen-item {
padding: 28px 0;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-normen-item:last-child {
border-bottom: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
/* Positionsnummer wie in Sektion 02 und 03: gross, im
Logo-Hellgrau (dekorativ, aria-hidden). */
.n7-normen-num {
display: block;
color: var(--n7-tone-light);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
}
.n7-normen-item-title {
margin-top: 12px;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.25;
}
.n7-normen-item-text {
margin-top: 12px;
color: #4a4a4a;
font-size: 0.9375rem;
line-height: 1.6;
max-width: 36em;
}
@media (min-width: 768px) {
.n7-normen-inner {
padding: 88px 32px;
}
.n7-normen-liste {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 56px;
}
.n7-normen-item {
padding: 32px 0 0;
border-bottom: 0;
}
.n7-normen-item:last-child {
border-bottom: 0;
}
.n7-normen-num {
font-size: 1.75rem;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-normen * {
transition: none !important;
}
}
/* ============ Sektion 04: Prozess (.n7-prozess-*) ============ */
.n7-prozess,
.n7-prozess *,
.n7-prozess *::before,
.n7-prozess *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-prozess {
/* Abstand fuer Anker-Spruenge unter dem fixen Header */
scroll-margin-top: var(--n7-header-height);
background: #171717;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-prozess-inner {
max-width: 1160px;
margin: 0 auto;
padding: 88px 20px;
}
/* --- Sektionskopf --- */
.n7-prozess-kicker {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-prozess-headline {
margin-top: 16px;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 20ch;
}
.n7-prozess-lead {
margin-top: 20px;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 36em;
}
/* --- Schritt-Leiste mit Fortschrittslinie --- */
.n7-prozess-track {
position: relative;
margin-top: 56px;
padding-left: 36px;
}
/* Grundlinie: ungebaute Konstruktion, Hairline */
.n7-prozess-track::before {
content: "";
position: absolute;
top: 6px;
bottom: 6px;
left: 5px;
width: 2px;
background: var(--n7-hairline-on-dark);
}
/* Fuellung im Logo-Hellgrau: die Linie, die sich beim Scrollen
zeichnet. Ohne JS voll sichtbar (Endzustand als Default). */
.n7-prozess-line-fill {
position: absolute;
top: 6px;
bottom: 6px;
left: 5px;
width: 2px;
background: var(--n7-tone-light);
transform-origin: top center;
transform: scaleY(1);
}
.n7-prozess-steps {
list-style: none;
display: flex;
flex-direction: column;
gap: 44px;
}
.n7-prozess-step {
position: relative;
}
/* Tonwertwechsel der Linie: pro erreichtem Schritt legt sich
ein Segment im dunklen Logo-Tonwert ueber die helle Linie
(vom eigenen Knoten bis zum naechsten). Ohne JS sichtbar:
Endzustand ist der Default. Rein dekorativ (Pseudo-Element). */
.n7-prozess-step::before {
content: "";
position: absolute;
left: -31px;
top: 12px;
width: 2px;
height: calc(100% + 44px - 12px);
background: var(--n7-tone-dark);
}
.n7-prozess-step:last-child::before {
height: calc(100% - 12px);
}
/* Knotenpunkt statt Kreis: kleines gefuelltes Quadrat aus dem
Formenvokabular des Briefings, Gehrung statt Rundung */
.n7-prozess-dot {
position: absolute;
left: -36px;
top: 6px;
width: 12px;
height: 12px;
border: 2px solid #ffffff;
background: #ffffff;
}
/* Positionsnummer wie in Sektion 02 und 03: gross, im
Logo-Hellgrau, dekorativ (die ol traegt die Semantik) */
.n7-prozess-num {
display: block;
color: var(--n7-tone-light);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
}
.n7-prozess-step-title {
margin-top: 10px;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.n7-prozess-step-text {
margin-top: 10px;
color: #b0b0b0;
font-size: 0.9375rem;
line-height: 1.65;
max-width: 38em;
}
/* --------------------------------------------------------
Animationszustaende: greifen NUR, wenn JS die Klasse
.n7-prozess--js gesetzt hat. Ohne JS bleibt alles oben.
-------------------------------------------------------- */
.n7-prozess--js .n7-prozess-line-fill {
transform: scaleY(0);
}
/* Segmente starten unsichtbar und blenden beim Aktivieren ein */
.n7-prozess--js .n7-prozess-step::before {
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.n7-prozess--js .n7-prozess-step--active::before {
opacity: 1;
}
.n7-prozess--js .n7-prozess-dot {
background: #171717;
border-color: rgba(255, 255, 255, 0.35);
transition: background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.n7-prozess--js .n7-prozess-step-head,
.n7-prozess--js .n7-prozess-step-text {
opacity: 0.25;
transform: translateY(8px);
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.n7-prozess--js .n7-prozess-step-text {
transition-delay: 0.08s;
}
.n7-prozess--js .n7-prozess-step--active .n7-prozess-dot {
background: #ffffff;
border-color: #ffffff;
}
.n7-prozess--js .n7-prozess-step--active .n7-prozess-step-head,
.n7-prozess--js .n7-prozess-step--active .n7-prozess-step-text {
opacity: 1;
transform: translateY(0);
}
/* --- Breakpoints (Mobile First) --- */
@media (min-width: 768px) {
.n7-prozess-inner {
padding: 120px 32px;
}
.n7-prozess-track {
margin-top: 72px;
padding-left: 56px;
/* Inhalt nicht ueber die volle Sektionsbreite laufen
lassen: ruhigere Leseachse */
max-width: 780px;
}
.n7-prozess-steps {
gap: 60px;
}
.n7-prozess-dot {
left: -56px;
top: 10px;
}
.n7-prozess-step::before {
left: -51px;
top: 16px;
height: calc(100% + 60px - 16px);
}
.n7-prozess-step:last-child::before {
height: calc(100% - 16px);
}
.n7-prozess-num {
font-size: 2rem;
}
.n7-prozess-step-title {
font-size: 1.5rem;
}
.n7-prozess-step-text {
font-size: 1rem;
}
.n7-prozess--js .n7-prozess-step-head,
.n7-prozess--js .n7-prozess-step-text {
transform: translateY(14px);
}
}
@media (prefers-reduced-motion: reduce) {
.n7-prozess *,
.n7-prozess *::before,
.n7-prozess *::after {
transition: none !important;
}
/* Sicherheitsnetz, falls JS doch lief */
.n7-prozess--js .n7-prozess-line-fill {
transform: scaleY(1);
}
.n7-prozess--js .n7-prozess-step::before {
opacity: 1;
}
.n7-prozess--js .n7-prozess-step-head,
.n7-prozess--js .n7-prozess-step-text {
opacity: 1;
transform: none;
}
.n7-prozess--js .n7-prozess-dot {
background: #ffffff;
border-color: #ffffff;
}
}
/* ============ Sektion 05: Kooperation Lieblingsmaurer (.n7-koop-*) ============ */
.n7-koop,
.n7-koop *,
.n7-koop *::before,
.n7-koop *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-koop {
background: #1a1a1a;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
border-bottom: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
}
.n7-koop-inner {
max-width: 760px;
margin: 0 auto;
padding: 88px 20px;
text-align: center;
}
.n7-koop-kicker {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-koop-headline {
margin-top: 16px;
font-size: clamp(1.625rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
.n7-koop-text {
margin-top: 24px;
color: #b0b0b0;
font-size: 1rem;
line-height: 1.65;
}
.n7-koop-text + .n7-koop-text {
margin-top: 16px;
}
.n7-koop-text strong {
color: #ffffff;
font-weight: 600;
}
/* Logo auf hellem Traeger: das Original-Logo hat dunkelgraue
Schrift und Gruen, auf dunklem Grund unlesbar. Der helle
Traeger haelt es lesbar und die Markenfarben unangetastet.
Alternative fuer strikt monochrome Optik:
filter: grayscale(1) auf dem img ergaenzen. */
.n7-koop-logo {
margin: 40px auto 0;
max-width: 340px;
background: #f4f4f4;
padding: 24px 28px;
/* Kartenbehandlung: kanonische Chamfer-Ecke unten rechts */
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer)),
calc(100% - var(--n7-chamfer-x)) 100%,
0 100%
);
}
.n7-koop-logo img {
display: block;
width: 100%;
height: auto;
}
.n7-koop-legal {
margin-top: 32px;
color: #9a9a9a;
font-size: 0.8125rem;
line-height: 1.6;
}
@media (min-width: 768px) {
.n7-koop-inner {
padding: 112px 32px;
}
}
/* ============ Sektion 06: Warum das nicht teurer ist (.n7-kosten-*) ============ */
.n7-kosten,
.n7-kosten *,
.n7-kosten *::before,
.n7-kosten *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-kosten {
background: #f4f4f4;
color: #171717;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
/* Diagonaluebergang (das eine auffaellige Element dieser
Sektion und der einzige Diagonaluebergang der Seite):
Schnitt im Logowinkel an der kanonischen Ecke unten rechts,
Chamfer-Groesse L. Die Folgesektion (dunkel) scheint durch
den Anschnitt durch. Auf Mobile: gerade Kante. */
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer-lg)),
calc(100% - var(--n7-chamfer-lg-x)) 100%,
0 100%
);
}
@media (max-width: 767.98px) {
.n7-kosten {
clip-path: none;
}
}
.n7-kosten-inner {
max-width: 1160px;
margin: 0 auto;
padding: 88px 20px;
}
.n7-kosten-kicker {
color: #6f6f6f;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-kosten-headline {
margin-top: 16px;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 22ch;
}
/* --- Gegenüberstellung --- */
.n7-kosten-vergleich {
margin-top: 48px;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.n7-kosten-block {
padding: 32px 24px;
/* Kartenbehandlung: kanonische Chamfer-Ecke unten rechts */
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer)),
calc(100% - var(--n7-chamfer-x)) 100%,
0 100%
);
}
.n7-kosten-block--ohne {
/* 0.25 statt Deko-Hairline (0.14): der Rahmen ist die einzige
Definition dieser Flaeche und muss sichtbar bleiben */
border: var(--n7-hairline-width) solid rgba(23, 23, 23, 0.25);
color: #4a4a4a;
}
.n7-kosten-block--mit {
background: #171717;
color: #ffffff;
}
.n7-kosten-block-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
}
.n7-kosten-block--ohne .n7-kosten-block-title {
color: #171717;
}
.n7-kosten-block-text {
margin-top: 16px;
font-size: 0.9375rem;
line-height: 1.65;
}
.n7-kosten-block-text strong {
font-weight: 600;
color: #171717;
}
.n7-kosten-liste {
list-style: none;
margin-top: 20px;
}
.n7-kosten-liste li {
padding: 14px 0;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
font-size: 0.9375rem;
line-height: 1.55;
color: #d4d4d4;
}
.n7-kosten-liste strong {
display: block;
color: #ffffff;
font-weight: 600;
margin-bottom: 2px;
}
@media (min-width: 768px) {
.n7-kosten-inner {
padding: 120px 32px;
}
.n7-kosten-vergleich {
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: stretch;
}
.n7-kosten-block {
padding: 44px 40px;
}
.n7-kosten-block-title {
font-size: 1.375rem;
}
}
/* ============ Sektion 07: Standorte (.n7-standorte-*) ============ */
.n7-standorte,
.n7-standorte *,
.n7-standorte *::before,
.n7-standorte *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-standorte {
/* Abstand fuer Anker-Spruenge unter dem fixen Header */
scroll-margin-top: var(--n7-header-height);
background: #1a1a1a;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-standorte-inner {
max-width: 1160px;
margin: 0 auto;
padding: 88px 20px;
}
.n7-standorte-kicker {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-standorte-headline {
margin-top: 16px;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 18ch;
}
.n7-standorte-lead {
margin-top: 20px;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 36em;
}
/* Masslinie wie in der Bauzeichnung, als Auszeichnung neben der
50-km-Zahl. Das eine auffaellige Element dieser Sektion und
der einzige Masslinien-Einsatz der Seite. Dekorativ
(aria-hidden), auf Mobile ausgeblendet. */
.n7-standorte-mass {
display: none;
}
@media (min-width: 768px) {
.n7-standorte-mass {
display: flex;
align-items: center;
gap: 16px;
max-width: 380px;
margin-top: 24px;
}
.n7-standorte-mass-line {
position: relative;
flex: 1;
height: var(--n7-hairline-width);
background: var(--n7-hairline-on-dark);
}
.n7-standorte-mass-line::before,
.n7-standorte-mass-line::after {
content: "";
position: absolute;
top: -5px;
width: var(--n7-hairline-width);
height: 11px;
background: var(--n7-hairline-on-dark);
}
.n7-standorte-mass-line::before { left: 0; }
.n7-standorte-mass-line::after { right: 0; }
.n7-standorte-mass-label {
color: #9a9a9a;
font-size: 0.8125rem;
letter-spacing: 0.04em;
white-space: nowrap;
}
}
/* --- Adresse und Einsatzgebiet ---------------------------------
Zweispaltiger Block statt der frueheren Dreierspalte (die war
fuer drei Adressen gebaut, mit nur noch Bohmte blieben zwei
Spalten leer). Adresse und Einsatzgebiet nebeneinander, auf
Mobile untereinander. */
.n7-standorte-grid {
margin-top: 48px;
display: grid;
grid-template-columns: 1fr;
gap: 32px;
padding-top: 28px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
}
.n7-standorte-ort-name {
font-size: 1.375rem;
font-weight: 700;
line-height: 1.25;
}
.n7-standorte-ort-adresse {
margin-top: 8px;
color: #b0b0b0;
font-size: 0.9375rem;
line-height: 1.6;
font-style: normal;
}
.n7-standorte-gebiet-label {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.n7-standorte-gebiet-text {
margin-top: 8px;
color: #b0b0b0;
font-size: 0.9375rem;
line-height: 1.6;
max-width: 32em;
}
/* --- Karte (Google Maps Embed API) -------------------------------
Laedt automatisch beim Seitenaufruf (N7-AENDERUNGEN-RUNDE-2.md
Abschnitt C, kein Zwei-Klick-Schritt mehr), Originalfarben, kein
Graustufenfilter (N7-NACHTRAG-RUNDE-1.md Abschnitt 1). Damit die
farbige Karte im monochromen Umfeld nicht wie ein Fremdkoerper
wirkt, bekommt sie eine Hairline statt gar keiner Kante - das
fasst sie ruhig ein, ohne selbst wie ein kraeftiges
Gestaltungselement aufzutreten. Radius 0. */
.n7-standorte-karte {
margin-top: 48px;
aspect-ratio: 16 / 7;
border: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
}
.n7-standorte-karte iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
}
.n7-standorte-karte-fallback {
display: block;
margin-top: 16px;
color: #9a9a9a;
font-size: 0.8125rem;
text-decoration: underline;
text-underline-offset: 3px;
}
.n7-standorte-karte-fallback:hover {
color: #ffffff;
}
@media (min-width: 768px) {
.n7-standorte-inner {
padding: 120px 32px;
}
.n7-standorte-grid {
grid-template-columns: 1fr 1fr;
gap: 64px;
margin-top: 56px;
padding-top: 32px;
}
.n7-standorte-ort-name {
font-size: 1.5rem;
}
}
/* ============ Sektion Google-Bewertungen (.n7-bewertungen-*) ============
Neu, N7-AENDERUNGEN-RUNDE-1.md Abschnitt E, Option 1 (statisch,
kein API-Zugang). Vertrauenssignal kurz vor der Abschluss-CTA.
Kein AggregateRating im JSON-LD, siehe PHP-Kommentar in
section-bewertungen.php. */
.n7-bewertungen,
.n7-bewertungen *,
.n7-bewertungen *::before,
.n7-bewertungen *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-bewertungen {
background: #1a1a1a;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-bewertungen-inner {
max-width: 1160px;
margin: 0 auto;
padding: 64px 20px;
}
.n7-bewertungen-kicker {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-bewertungen-headline {
margin-top: 16px;
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
max-width: 20ch;
}
/* --- Bewertungszahl -------------------------------------------
Bewusst als reiner Zahlenwert plus Textzeile statt Icon-Sterne
in Fuellfarbe: keine Icon-Bibliothek im Projekt (Briefing
Abschnitt 7), und ein grosser Zahlenwert traegt in dieser
Formensprache mehr als fuenf wiederholte Symbole. */
.n7-bewertungen-rating {
margin-top: 40px;
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.n7-bewertungen-rating-score {
font-size: 3rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.01em;
}
.n7-bewertungen-rating-meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.n7-bewertungen-rating-stars {
color: var(--n7-tone-light);
font-size: 1rem;
letter-spacing: 0.1em;
}
.n7-bewertungen-rating-count {
color: #9a9a9a;
font-size: 0.875rem;
}
/* --- Bewertungstexte --- */
.n7-bewertungen-liste {
list-style: none;
margin-top: 40px;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.n7-bewertungen-review {
padding-top: 24px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
}
.n7-bewertungen-review-stars {
display: block;
color: var(--n7-tone-light);
font-size: 0.8125rem;
letter-spacing: 0.1em;
}
.n7-bewertungen-review-text {
margin-top: 12px;
color: #d4d4d4;
font-size: 0.9375rem;
line-height: 1.6;
}
.n7-bewertungen-review-meta {
margin-top: 12px;
color: #9a9a9a;
font-size: 0.8125rem;
}
/* --- Link zum Profil --- */
.n7-bewertungen-link {
margin-top: 40px;
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
color: #ffffff;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
}
.n7-bewertungen-link-label {
border-bottom: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 2px;
transition: border-color 0.2s ease;
}
.n7-bewertungen-link:hover .n7-bewertungen-link-label {
border-color: #ffffff;
}
.n7-bewertungen-link-arrow {
transition: transform 0.2s ease;
}
.n7-bewertungen-link:hover .n7-bewertungen-link-arrow {
transform: translate(2px, -2px);
}
.n7-bewertungen a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
@media (min-width: 768px) {
.n7-bewertungen-inner {
padding: 88px 32px;
}
.n7-bewertungen-liste {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-bewertungen * {
transition: none !important;
}
}
/* ============ Sektion 08: Abschluss-CTA (.n7-cta-*) ============ */
.n7-cta,
.n7-cta *,
.n7-cta *::before,
.n7-cta *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-cta {
background: #171717;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-cta-inner {
max-width: 720px;
margin: 0 auto;
padding: 112px 20px;
text-align: center;
}
.n7-cta-headline {
font-size: clamp(1.875rem, 5vw, 3rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
}
.n7-cta-text {
margin-top: 20px;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
}
.n7-cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
margin-top: 40px;
padding: 0 40px;
background: #ffffff;
color: #171717;
text-decoration: none;
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: 0.01em;
/* Gehrung statt Rundung, kanonische Ecke unten rechts */
border-radius: 0;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer-sm)),
calc(100% - var(--n7-chamfer-sm-x)) 100%,
0 100%
);
transition: background-color 0.2s ease;
}
.n7-cta-button:hover {
background: #d4d4d4;
}
.n7-cta-button:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
@media (min-width: 768px) {
.n7-cta-inner {
padding: 160px 32px;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-cta * {
transition: none !important;
}
}
/* ============ Sektion 99: Footer (.n7-footer-*) ============ */
.n7-footer,
.n7-footer *,
.n7-footer *::before,
.n7-footer *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-footer {
background: #171717;
color: #d4d4d4;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.9375rem;
line-height: 1.6;
}
.n7-footer-inner {
max-width: 1160px;
margin: 0 auto;
padding: 64px 20px 32px;
}
/* --- Spalten --- */
.n7-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
.n7-footer-logo {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #ffffff;
text-decoration: none;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.n7-footer-logo img {
display: block;
height: 40px;
width: auto;
/* Dunkle Logo-Variante per Filter auf einfarbig Weiss
(auf dunklem Grund sonst unlesbar). Entfaellt, sobald
eine helle Logo-Datei vorliegt. */
filter: brightness(0) invert(1);
}
.n7-footer-brand-line {
margin-top: 8px;
color: #9a9a9a;
font-size: 0.875rem;
}
.n7-footer-col-title {
color: #ffffff;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 16px;
}
.n7-footer-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 4px;
}
.n7-footer-link {
display: inline-flex;
align-items: center;
min-height: 36px;
color: #d4d4d4;
text-decoration: none;
transition: color 0.2s ease;
}
.n7-footer-link:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
}
.n7-footer-list .current-menu-item > .n7-footer-link,
.n7-footer-list .current_page_item > .n7-footer-link {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
}
.n7-footer-contact-label {
display: block;
color: #9a9a9a;
font-size: 0.8125rem;
}
.n7-footer-adresse {
display: block;
padding: 6px 0;
color: #d4d4d4;
line-height: 1.5;
}
/* --- Pflichttext Gewerbeabgrenzung --- */
.n7-footer-divider {
border: 0;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
margin: 48px 0 32px;
}
.n7-footer-legalnote {
/* #9a9a9a auf #171717 = Kontrast ca. 6.4:1, erfuellt WCAG AA
auch fuer Kleintext. Nicht weiter abdunkeln. */
color: #9a9a9a;
font-size: 0.8125rem;
line-height: 1.7;
max-width: 820px;
}
/* --- Untere Zeile --- */
.n7-footer-bottom {
margin-top: 32px;
padding-top: 24px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-dark);
display: flex;
flex-direction: column;
gap: 8px;
color: #9a9a9a;
font-size: 0.8125rem;
}
/* Umsetzungshinweis, N7-AENDERUNGEN-RUNDE-1.md Abschnitt I: erbt
Farbe/Groesse von .n7-footer-bottom (gedaempftes Grau, klein),
nur die Unterstreichung macht ihn als Link erkennbar. */
.n7-footer-backlink {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.n7-footer-backlink:hover {
color: #ffffff;
}
.n7-footer a:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
/* --- Breakpoints (Mobile First) --- */
@media (min-width: 768px) {
.n7-footer-inner {
padding: 80px 32px 40px;
}
.n7-footer-grid {
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
}
.n7-footer-bottom {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-footer,
.n7-footer * {
transition: none !important;
}
}
/* ============ Sektion Kontakt (.n7-kontakt-*) ============
Neu (N7-BRIEFING-WORDPRESS.md Abschnitt 6), nicht aus einer
/sections-HTML-Datei uebernommen. Formular-Feldstile selbst
liegen in cf7.css, nur auf der Kontaktseite geladen; hier nur
der Sektionsrahmen (dunkles Intro, heller Formularbereich),
damit main.css weiterhin die alleinige Quelle fuer Layout-CSS
bleibt, das auf jeder Seite verfuegbar ist. */
.n7-kontakt,
.n7-kontakt *,
.n7-kontakt *::before,
.n7-kontakt *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-kontakt {
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-kontakt .n7-kontakt-intro {
background: #171717;
color: #ffffff;
padding: 140px 0 56px;
}
/* Ab hier mit ".n7-kontakt"-Praefix statt allein stehender Klasse:
diese Sektion wird auf den Leistungsseiten am Ende zusaetzlich
INNERHALB von .n7-seo eingebunden (N7-AENDERUNGEN-RUNDE-2.md
Abschnitt D2, Fehler 2). .n7-seo traegt einen eigenen Reset
(".n7-seo *{margin:0;padding:0}", gleiches Muster wie hier),
der bei gleicher Spezifitaet je nach Position im Stylesheet
gewinnt und Rand/Abstand dieser Sektion sonst wieder auf 0
zurueckwirft - dann klebt der Inhalt am linken Rand. Der
Praefix erhoeht die Spezifitaet auf zwei Klassen und gewinnt
damit zuverlaessig, unabhaengig von der Reihenfolge im
Stylesheet und unabhaengig davon, ob die Sektion eigenstaendig
(Kontakt-Seite) oder eingebettet (Leistungsseiten) steht. */
.n7-kontakt .n7-kontakt-intro-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
}
.n7-kontakt-kicker {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-kontakt .n7-kontakt-headline {
margin-top: 16px;
font-size: clamp(1.875rem, 4.5vw, 3rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.01em;
}
.n7-kontakt .n7-kontakt-lead {
margin-top: 20px;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 38em;
}
.n7-kontakt .n7-kontakt-body {
background: #f4f4f4;
color: #171717;
padding: 56px 0 88px;
}
.n7-kontakt .n7-kontakt-body-inner {
max-width: 1160px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr;
gap: 48px;
}
/* --- Formular-Rahmen (Feldstile: cf7.css) --- */
.n7-kontakt .n7-kontakt-form p {
margin-top: 20px;
}
.n7-kontakt .n7-kontakt-form p:first-child {
margin-top: 0;
}
.n7-kontakt-form label {
display: block;
color: #171717;
font-size: 0.9375rem;
font-weight: 600;
}
/* Zweispaltige Zeile fuer kurze Felder (PLZ/Ort), siehe
CF7-KONTAKTFORMULAR.md fuer die dazugehoerige Shortcode-Vorlage */
.n7-kontakt-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 24px;
}
/* --- Direktkontakt-Aside --- */
.n7-kontakt .n7-kontakt-aside {
align-self: start;
padding-top: 32px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-kontakt-aside-title {
font-size: 1.0625rem;
font-weight: 700;
}
.n7-kontakt .n7-kontakt-aside-list {
list-style: none;
margin-top: 20px;
}
.n7-kontakt .n7-kontakt-aside-list li {
padding: 14px 0;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-kontakt .n7-kontakt-aside-list li:last-child {
padding-bottom: 0;
}
.n7-kontakt .n7-kontakt-aside-label {
display: block;
color: #6f6f6f;
font-size: 0.8125rem;
margin-bottom: 2px;
}
.n7-kontakt-aside-list a {
color: #171717;
text-decoration: underline;
text-underline-offset: 3px;
font-size: 0.9375rem;
}
.n7-kontakt-aside-list span + span {
color: #171717;
font-size: 0.9375rem;
}
@media (min-width: 768px) {
.n7-kontakt .n7-kontakt-intro {
padding: 176px 0 72px;
}
.n7-kontakt .n7-kontakt-intro-inner,
.n7-kontakt .n7-kontakt-body-inner {
padding: 0 32px;
}
.n7-kontakt .n7-kontakt-body {
padding: 80px 0 120px;
}
.n7-kontakt .n7-kontakt-body-inner {
grid-template-columns: 2fr 1fr;
gap: 64px;
}
.n7-kontakt .n7-kontakt-aside {
padding-top: 0;
padding-left: 40px;
border-top: 0;
border-left: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
}
@media (prefers-reduced-motion: reduce) {
.n7-kontakt * {
transition: none !important;
}
}
/* ============ Sektion SEO-Leistungsseiten (.n7-seo-*) ============
Leistungsseiten (page-rohbau-fundamente.php, page-trockenbau-
daemmung.php, page-kellerabdichtung.php). Nicht aus einer
einzelnen /sections-HTML-Datei uebernommen, sondern die
deckungsgleichen .n7-seo-*-Regeln aus den drei statischen
Landingpages zusammengefuehrt (Vereinigungsmenge aller drei). */
.n7-seo,
.n7-seo *,
.n7-seo *::before,
.n7-seo *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-seo {
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-seo-container {
max-width: 1160px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
}
.n7-seo-prosa {
max-width: 720px;
}
.n7-seo-intro {
background: #171717;
color: #ffffff;
padding: 140px 0 56px;
}
.n7-seo-breadcrumb {
font-size: 0.8125rem;
color: #9a9a9a;
}
.n7-seo-breadcrumb ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.n7-seo-breadcrumb li + li::before {
content: "/";
margin-right: 8px;
color: #6f6f6f;
}
.n7-seo-breadcrumb a {
color: #9a9a9a;
text-decoration: none;
}
.n7-seo-breadcrumb a:hover {
color: #ffffff;
text-decoration: underline;
text-underline-offset: 3px;
}
.n7-seo-h1 {
margin-top: 24px;
font-size: clamp(1.875rem, 4.5vw, 3rem);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.01em;
max-width: 24ch;
}
.n7-seo-intro-text {
margin-top: 20px;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 38em;
}
.n7-seo-body {
background: #f4f4f4;
color: #171717;
padding: 56px 0 88px;
}
.n7-seo-abschnitt {
margin-top: 64px;
padding-top: 40px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-seo-abschnitt:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.n7-seo-h2 {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
max-width: 26ch;
}
.n7-seo-h3 {
margin-top: 32px;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
}
.n7-seo-body p {
margin-top: 16px;
color: #4a4a4a;
font-size: 1rem;
line-height: 1.7;
}
.n7-seo-body p strong {
color: #171717;
}
.n7-seo-liste {
margin-top: 16px;
max-width: 720px;
padding-left: 20px;
color: #4a4a4a;
font-size: 1rem;
line-height: 1.7;
}
.n7-seo-liste li {
margin-top: 8px;
}
.n7-seo-kurzantwort {
background: #ffffff;
border: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
border-left: 3px solid #171717;
padding: 24px 24px 28px;
max-width: 780px;
}
.n7-seo-kurzantwort-label {
display: block;
color: #6f6f6f;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.n7-seo-kurzantwort p {
margin-top: 12px;
color: #171717;
font-size: 1.0625rem;
line-height: 1.65;
}
.n7-seo-vergleich {
margin-top: 28px;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
.n7-seo-vergleich-option {
background: #ffffff;
border: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
padding: 28px 24px;
}
.n7-seo-vergleich-titel {
margin-top: 0;
font-size: 1.125rem;
font-weight: 700;
}
.n7-seo-vergleich-liste {
list-style: none;
margin-top: 12px;
}
.n7-seo-vergleich-liste li {
padding: 10px 0;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
color: #4a4a4a;
font-size: 0.9375rem;
line-height: 1.55;
}
.n7-seo-vergleich-fazit {
margin-top: 20px;
max-width: 780px;
}
.n7-seo-schritte {
list-style: none;
margin-top: 28px;
max-width: 780px;
counter-reset: seo-schritt;
}
.n7-seo-schritte li {
counter-increment: seo-schritt;
display: grid;
grid-template-columns: 56px 1fr;
gap: 4px 16px;
padding: 20px 0;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-seo-schritte li::before {
content: counter(seo-schritt, decimal-leading-zero);
color: var(--n7-tone-light);
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
grid-row: span 2;
padding-top: 2px;
}
.n7-seo-schritte strong {
font-size: 1.0625rem;
font-weight: 600;
color: #171717;
}
.n7-seo-schritte span {
grid-column: 2;
color: #4a4a4a;
font-size: 0.9375rem;
line-height: 1.6;
}
/* Bildreihe (Baustellenfotos) */
.n7-seo-medien {
margin-top: 32px;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-width: 900px;
}
.n7-seo-medium {
margin: 0;
}
.n7-seo-medium img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
background: #e2e2e2;
}
.n7-seo-medium figcaption {
margin-top: 8px;
color: #6f6f6f;
font-size: 0.75rem;
letter-spacing: 0.04em;
}
.n7-seo-kostenfaktoren {
margin-top: 28px;
max-width: 780px;
}
.n7-seo-kostenfaktoren dl {
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-seo-kostenfaktoren div {
display: grid;
grid-template-columns: 1fr;
gap: 4px 24px;
padding: 16px 0;
border-bottom: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-seo-kostenfaktoren dt {
font-weight: 600;
color: #171717;
font-size: 1rem;
}
.n7-seo-kostenfaktoren dd {
color: #4a4a4a;
font-size: 0.9375rem;
line-height: 1.6;
}
.n7-seo-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 20px;
}
.n7-seo-badge {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 3px 12px 1px;
border-radius: 0;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.n7-seo-badge--eigen {
background: var(--n7-tone-dark);
color: #ffffff;
}
.n7-seo-badge--partner {
border: var(--n7-hairline-width) solid rgba(23, 23, 23, 0.4);
color: #333333;
background: transparent;
}
.n7-seo-faq {
margin-top: 28px;
max-width: 780px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-seo-faq details {
border-bottom: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
}
.n7-seo-faq summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
font-size: 1.0625rem;
font-weight: 600;
color: #171717;
cursor: pointer;
list-style: none;
}
.n7-seo-faq summary::-webkit-details-marker {
display: none;
}
.n7-seo-faq summary::after {
content: "";
flex: none;
width: 12px;
height: 12px;
align-self: center;
background:
linear-gradient(#171717, #171717) center / 12px 2px no-repeat,
linear-gradient(#171717, #171717) center / 2px 12px no-repeat;
}
.n7-seo-faq details[open] summary::after {
background: linear-gradient(#171717, #171717) center / 12px 2px no-repeat;
}
.n7-seo-faq summary:focus-visible {
outline: 2px solid #171717;
outline-offset: 3px;
}
.n7-seo-faq details p {
margin: 0;
padding: 0 32px 18px 0;
color: #4a4a4a;
font-size: 0.9375rem;
line-height: 1.65;
}
.n7-seo-abschluss {
background: #171717;
color: #ffffff;
padding: 88px 0;
text-align: center;
}
.n7-seo-abschluss-h2 {
font-size: clamp(1.625rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
}
.n7-seo-abschluss p {
margin: 16px auto 0;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
max-width: 34em;
}
.n7-seo-abschluss-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
margin-top: 32px;
padding: 0 32px;
background: #ffffff;
color: #171717;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 0;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer-sm)),
calc(100% - var(--n7-chamfer-sm-x)) 100%,
0 100%
);
transition: background-color 0.2s ease;
}
.n7-seo-abschluss-cta:hover {
background: #d4d4d4;
}
.n7-seo-abschluss-cta:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.n7-seo-body a {
color: #171717;
text-decoration: underline;
text-underline-offset: 3px;
}
@media (min-width: 768px) {
.n7-seo-container {
padding-left: 32px;
padding-right: 32px;
}
.n7-seo-intro {
padding: 176px 0 72px;
}
.n7-seo-body {
padding: 72px 0 120px;
}
.n7-seo-abschnitt {
margin-top: 80px;
padding-top: 48px;
}
.n7-seo-vergleich {
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 900px;
}
.n7-seo-medien {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.n7-seo-kostenfaktoren div {
grid-template-columns: 260px 1fr;
}
.n7-seo-abschluss {
padding: 120px 0;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-seo * {
transition: none !important;
}
}
/* ============ Sektion 404 (.n7-404-*) ============
Fuer 404.php, nicht aus einer /sections-HTML-Datei uebernommen.
Wiederverwendet die Chamfer-Button-Optik der Seite (siehe
.n7-header-cta, .n7-seo-abschluss-cta) und dieselben
Intro-Abstaende wie .n7-seo-intro/.n7-kontakt-intro, damit die
404-Seite erkennbar zur restlichen Seite gehoert statt wie eine
WordPress-Standardseite auszusehen. */
.n7-404,
.n7-404 *,
.n7-404 *::before,
.n7-404 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-404 {
background: #171717;
color: #ffffff;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
padding: 140px 20px 96px;
text-align: center;
}
.n7-404-inner {
max-width: 640px;
margin: 0 auto;
}
.n7-404-eyebrow {
color: #9a9a9a;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.n7-404-headline {
margin-top: 16px;
font-size: clamp(1.875rem, 4.5vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
}
.n7-404-text {
margin-top: 20px;
color: #b0b0b0;
font-size: 1.0625rem;
line-height: 1.6;
}
.n7-404-actions {
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.n7-404-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 32px;
background: #ffffff;
color: #171717;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 0;
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--n7-chamfer-sm)),
calc(100% - var(--n7-chamfer-sm-x)) 100%,
0 100%
);
transition: background-color 0.2s ease;
}
.n7-404-cta:hover {
background: #d4d4d4;
}
.n7-404-cta:focus-visible {
outline: 2px solid #ffffff;
outline-offset: 3px;
}
.n7-404-link {
color: #9a9a9a;
text-decoration: underline;
text-underline-offset: 3px;
font-size: 0.9375rem;
}
.n7-404-link:hover {
color: #ffffff;
}
@media (min-width: 768px) {
.n7-404 {
padding: 176px 32px 120px;
}
.n7-404-actions {
flex-direction: row;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-404 * {
transition: none !important;
}
}
/* ============ Sektion Rechtsseite (.n7-legal-*) ============
Fuer page-legal.php (Impressum, Datenschutz, AGB),
N7-AENDERUNGEN-RUNDE-2.md Abschnitt B. Bewusst ruhig gehalten:
kein Kopfbild, keine Kicker-Zeile, keine Hairline-Deko - nur
Titel plus redaktioneller Inhalt. Eigene Formatierung fuer
the_content() (h2/h3/p/ul/ol/a/strong), damit im Editor
gepflegte Rechtstexte trotzdem im Designsystem aussehen: Radius
0, Hairlines als Trenner vor h2, Overpass, Zeilenlaenge auf gut
lesbare Breite begrenzt (720px, wie .n7-seo-prosa), grosszuegiger
Zeilenabstand. */
.n7-legal,
.n7-legal *,
.n7-legal *::before,
.n7-legal *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.n7-legal {
background: #f4f4f4;
color: #171717;
font-family: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.n7-legal-inner {
max-width: 1160px;
margin: 0 auto;
padding: 140px 20px 96px;
}
.n7-legal-headline {
font-size: clamp(1.875rem, 4.5vw, 2.75rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.01em;
}
.n7-legal-content {
margin-top: 40px;
max-width: 720px;
}
.n7-legal-content h2 {
margin-top: 48px;
padding-top: 24px;
border-top: var(--n7-hairline-width) solid var(--n7-hairline-on-light);
font-size: 1.375rem;
font-weight: 700;
line-height: 1.3;
}
.n7-legal-content h2:first-child {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.n7-legal-content h3 {
margin-top: 28px;
font-size: 1.125rem;
font-weight: 600;
line-height: 1.35;
}
.n7-legal-content p {
margin-top: 16px;
color: #4a4a4a;
font-size: 1rem;
line-height: 1.75;
}
.n7-legal-content h2 + p,
.n7-legal-content h3 + p {
margin-top: 12px;
}
.n7-legal-content ul,
.n7-legal-content ol {
margin-top: 16px;
padding-left: 22px;
color: #4a4a4a;
font-size: 1rem;
line-height: 1.75;
}
.n7-legal-content li {
margin-top: 8px;
}
.n7-legal-content li:first-child {
margin-top: 0;
}
.n7-legal-content a {
color: #171717;
text-decoration: underline;
text-underline-offset: 3px;
}
.n7-legal-content strong {
color: #171717;
font-weight: 600;
}
.n7-legal-platzhalter {
padding: 20px;
background: #ffffff;
border: 1px dashed rgba(23, 23, 23, 0.25);
color: #5a5a5a;
font-size: 0.9375rem;
line-height: 1.6;
}
@media (min-width: 768px) {
.n7-legal-inner {
padding: 176px 32px 120px;
}
}
@media (prefers-reduced-motion: reduce) {
.n7-legal * {
transition: none !important;
}
}