/* =========================================================
3U Reinigung – Website-Grundgerüst
Aus 3UREINIGUNG.xd extrahiert (Home / Services / Kontakt = Phase 1)
========================================================= */
/* ---------- Header / Navigation ---------- */
.site-header { padding: 26px 0; background: transparent; }
/* Feedback-Runde 16, Kopfzeile: "Logo auf Desktop auf x/y34 zurueckkehren.
Menue entsprechend auch y34 und x vom Bildrand rechts -34 einziehen."
Die Kopfzeile steht damit NICHT mehr auf dem Inhaltsraster (x144/x1296,
das war Option B aus Runde 15 und ist hiermit zurueckgenommen), sondern
34 px von jeder Bildkante entfernt. Der Menue-Knopf bleibt wie bisher auf
der Hoehe des Logos zentriert.
Nur ab 1276 px - im Fluss setzt responsive.css weiterhin den Seitenrand
der jeweiligen Vorlage, dort aendert sich nichts. */
@media (min-width: 1276px) {
.site-header { padding: 34px 0; }
.site-header .container {
max-width: none;
padding-left: 34px;
padding-right: 34px;
}
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.nav-logo img { height: 34px; width: auto; display: block; }
/* Bug-Fix (Feedback-Runde 2, Punkt 5): das Drei-Tropfen-Icon blieb trotz
.nav-logo-alt{height:55px} optisch bei 34px, weil diese generische
".nav-logo img"-Regel (gilt für JEDES Bild innerhalb von .nav-logo,
also auch das Icon) die Höhe des ![]()
selbst weiterhin auf 34px
erzwang. Explizite Override auf die geforderten 55x55px. */
.nav-logo-alt img { height: 55px; width: 55px; }
.nav-menu-btn {
background: none; border: none; cursor: pointer;
font-family: var(--font-body); font-size: 13px; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--color-gold);
display: flex; align-items: center; gap: 10px;
}
/* Echtes Hamburger-Icon-Asset (Feedback 7.2, Gruppe 508.svg): zwei
ungleich lange Striche (oben durchgehend, unten kürzer/rechtsbündig),
statt der vorherigen selbstgebauten CSS-Balken. */
.nav-menu-btn .bars { display: inline-flex; align-items: center; }
.nav-menu-btn .bars-icon { width: 34px; height: 13px; display: block; }
/* .nav-overlay (alter Platzhalter-Menü-Entwurf) entfernt - ersetzt durch
das Figma-genaue .menu-card-System, siehe effects.css. */
/* ---------- Hero ---------- */
.hero {
padding: 200px 0 120px;
background: var(--color-cream);
}
.hero h1 { font-size: 52px; max-width: 780px; line-height: 1.15; }
.hero p.lead { font-weight: 300; font-size: 17px; max-width: 560px; color: var(--color-gray-600); margin-top: 18px; }
.hero .btn { margin-top: 34px; }
.page-hero {
padding: 190px 0 90px;
background: var(--color-cream);
}
.page-hero h1 { font-size: 46px; max-width: 760px; }
.page-hero p.lead { font-weight: 300; font-size: 16px; max-width: 600px; color: var(--color-gray-600); margin-top: 16px; }
/* ---------- Sektionen allgemein ---------- */
section { padding: 90px 0; }
.section-heading { max-width: 640px; margin-bottom: 48px; }
.section-heading h2 { font-size: 38px; }
.section-heading p { font-weight: 300; color: var(--color-gray-600); }
/* ---------- Service-Kategorien (3-Spalten) ---------- */
.services-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
position: relative;
border-radius: 4px;
overflow: hidden;
min-height: 460px;
display: flex;
align-items: flex-end;
color: var(--color-white);
}
.service-card img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
z-index: 0;
}
.service-card::before {
content: "";
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(180deg, rgba(21,21,21,0.05) 30%, rgba(21,21,21,0.82) 100%);
}
.service-card-body { position: relative; z-index: 2; padding: 34px; }
.service-card .label-caps { color: var(--color-gold); }
.service-card h3 { color: var(--color-white); font-size: 30px; margin: 8px 0 14px; }
.service-card p { font-weight: 300; font-size: 14px; color: rgba(255,255,255,0.85); max-width: 320px; }
.service-card ul { list-style: none; margin: 14px 0; padding: 0; font-weight: 300; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.9; }
.service-card a.link-underline { color: var(--color-white); font-size: 14px; display: inline-block; margin-top: 10px; }
/* ---------- Mini-Kalkulator-Teaser (Home) ---------- */
.calc-teaser {
background: var(--color-navy-light);
border-radius: 6px;
padding: 56px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 48px;
align-items: center;
}
@media (max-width: 860px) { .calc-teaser { grid-template-columns: 1fr; } }
.calc-teaser h2 { font-size: 34px; }
.calc-teaser-form { display: grid; gap: 14px; }
.calc-teaser-form select, .calc-teaser-form input {
width: 100%; padding: 13px 14px; border: 1px solid var(--color-gray-300);
border-radius: 3px; font-family: var(--font-body); background: var(--color-white);
}
.calc-teaser-price {
background: var(--color-navy); color: var(--color-white); border-radius: 4px; padding: 26px;
}
.calc-teaser-price .label-caps { color: var(--color-gold); }
.calc-teaser-price .amount { font-family: var(--font-headline); font-size: 34px; margin-top: 6px; letter-spacing: var(--font-headline-tracking); }
/* ---------- Über uns / Textblock ---------- */
.about-block { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
@media (max-width: 860px) { .about-block { grid-template-columns: 1fr; } }
.about-block p { font-weight: 300; line-height: 1.75; color: var(--color-gray-600); white-space: pre-line; }
/* ---------- Tag-Liste (Meistgesuchte Leistungen) ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.tag-list a {
border: 1px solid var(--color-gray-300); border-radius: 30px;
padding: 10px 20px; font-size: 13px; transition: border-color 250ms ease, background 250ms ease;
}
.tag-list a:hover { border-color: var(--color-navy); background: var(--color-navy-light); }
/* ---------- Blog-Vorschau ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 860px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card .media-frame { border-radius: 4px; aspect-ratio: 3/2; margin-bottom: 20px; }
.blog-card .media-frame img { width: 100%; height: 100%; object-fit: cover; }
.blog-card h3 { font-size: 26px; margin: 10px 0 12px; }
.blog-card p { color: var(--color-gray-600); font-weight: 300; font-size: 14px; }
/* ---------- FAQ Accordion ---------- */
.faq-list { border-top: 1px solid var(--color-gray-200); }
.faq-item { border-bottom: 1px solid var(--color-gray-200); }
.faq-question {
width: 100%; text-align: left; background: none; border: none; cursor: pointer;
padding: 24px 0; display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-body); font-size: 17px; font-weight: 500; color: var(--color-black);
}
.faq-question .plus { font-size: 22px; color: var(--color-navy); transition: transform 300ms ease; }
.faq-item.is-open .faq-question .plus { transform: rotate(45deg); }
.faq-answer {
max-height: 0; overflow: hidden; transition: max-height 420ms cubic-bezier(0.16,1,0.3,1);
}
.faq-answer p { padding-bottom: 24px; font-weight: 300; color: var(--color-gray-600); max-width: 700px; }
/* ---------- Testimonials ---------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: var(--color-cream); border-radius: 4px; padding: 40px; }
.testimonial-card p { font-weight: 300; color: var(--color-gray-600); line-height: 1.7; }
.testimonial-card h4 { font-size: 20px; margin-top: 18px; color: var(--color-navy); font-family: var(--font-headline); font-weight: 400; letter-spacing: var(--font-headline-tracking); }
/* ---------- Kontaktformular-Seite ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info-block { margin-bottom: 32px; }
.contact-info-block h3 { font-size: 20px; }
.contact-info-block p { font-weight: 300; color: var(--color-gray-600); white-space: pre-line; }
/* =========================================================
FOOTER (y6182–6577) — HELLER Hintergrund (Creme) mit
Seigaiha-Muster, Navy-/Schwarz-Text. KEIN Navy-Hintergrund
(per Figma-Datei frisch verifiziert, vom Auftraggeber
bestätigt: "Footer gemäss aktuellem Design (beige,
Seigaiha-Muster) erstellen."). Genau EIN Logo im gesamten
unteren Bereich - die Mini-Wortmarke im Gold-CTA-Band
(.home-footer-cta, siehe home.css) direkt darüber; der
Footer selbst enthält kein zweites Logo.
========================================================= */
/* Footer-Masse exakt aus Figma (Gruppe 29767 = 1440x395, Oberkante y6148 im
Frame /services/residential). Alle Kinder sitzen ABSOLUT auf den Figma-
Koordinaten der 1440px-Bühne, damit sich keine Fluss-Rundungen aufsummieren
(vorher ergab die Padding-/Margin-Variante 400px statt 395px und machte damit
jede Seite 5px zu hoch).
Spaltentitel y 90 Bodoni Moda 30/33, -4% Laufweite, Navy
Links y 142 / 172 / 202 Montserrat Light 15/30, #151515
Kontaktblock y 142 Montserrat Regular 13/24 (beide Zeilen gleich gross)
Social-Icons y 199 34x34, Abstand 21
Bodenzeile y 285 Montserrat Regular 13/24, 14.4% Laufweite, Navy
Spalten-x: 145 / 451 / 757 / 1064, Breite 233. */
.site-footer {
position: relative;
overflow: hidden;
height: 395px;
background: var(--color-cream);
color: var(--color-black);
padding: 0;
}
.footer-stage {
position: relative;
z-index: 1;
width: 1440px;
height: 100%;
margin: 0 auto;
}
/* Seigaiha-Muster (Gruppe 2861) als dezente Hintergrund-Textur.
Runde 17, Punkt 13.3: Bisher lag hier ein 1440 px breites Bild mittig im
Footer - auf breiteren Bildschirmen blieb links und rechts davon eine
leere Fläche. Jetzt traegt der Footer selbst die nahtlose Kachel (siehe
home.css), das Bild im Quelltext wird nicht mehr gebraucht. Bei 1440 px
ist das Ergebnis dasselbe: die Kachel ist phasengleich zur Vorlage. */
.site-footer {
background-image: url("../assets/img/seigaiha-tile.svg");
background-repeat: repeat;
background-position: 0 0;
background-size: 65px 39px;
}
.site-footer-pattern { display: none; }
.footer-col { position: absolute; top: 90px; width: 233px; }
.footer-col-1 { left: 145px; }
.footer-col-2 { left: 451px; }
.footer-col-3 { left: 757px; }
.footer-col-4 { left: 1064px; }
/* Im Figma-File gibt es KEINE Trennlinie zwischen Spalten und Bodenzeile
(nachgeprüft: kein Linien-/Rechteck-Knoten im Footer-Bereich) - die
frühere border-bottom war eine Erfindung und ist entfernt. */
.footer-col h4 { font-family: var(--font-headline); font-weight: 400; font-size: 30px; line-height: 33px; color: var(--color-navy); margin: 0 0 19px; letter-spacing: var(--font-headline-tracking); }
/* width:fit-content (statt volle Block-/Spaltenbreite): der Unterstrich-
Balken (.link-underline::after, width:100% relativ zur eigenen Box)
soll nur so lang wie der Text selbst sein, nicht die ganze Spalte
durchziehen (Feedback-Runde 2, Punkt 8) - bei einem vollbreiten
display:block-Link wäre die Box sonst spaltenbreit. Bleibt trotzdem
block-artig/eigene Zeile, da jeder Link ohnehin als eigenes Element
im normalen Fluss steht. */
.footer-col a, .footer-col p { display: block; width: fit-content; font-size: 15px; line-height: 30px; color: var(--color-black); font-weight: 300; transition: color 220ms ease; }
.footer-col a:hover { color: var(--color-gold); }
/* Feedback 10 / Feedback-Runde 2 Punkt 8: Hover-Effekt der Dienstleistungs-
UND Kontakt-Links (E-Mail/Telefon, jetzt ebenfalls mit .link-underline)
im Footer identisch zum Bereich "Unsere Dienstleistungen" (Navy-Farbe +
einfliegender Unterstrich "Balken", siehe .link-underline in
effects.css) statt der Gold-Einfärbung. Kürzere Balken-Dauer (220ms
statt 420ms) - wirkte sonst zu träge/langgezogen. */
.footer-col .link-underline { padding-bottom: 0; }
.footer-col .link-underline:hover { color: var(--color-navy); }
.footer-col .link-underline::after { transition-duration: 220ms; }
/* Kundenwunsch (Runde 8, Punkt 7.2) "Schriftgrösse unter Kontakt
vereinheitlichen": E-Mail und Telefon sind im Figma EIN einziger Textknoten
(Montserrat Regular 13/24) und damit bereits gleich gross - vorher standen
sie in zwei verschiedenen Grössen. Jetzt beide auf dem Figma-Wert 13/24;
dadurch sitzen auch die Social-Icons wieder exakt auf y199 (142 + 2x24 + 9). */
/* Kundenwunsch (Runde 7 und 9, Punkt 7.2): E-Mail und Telefon sollen exakt
gleich aussehen wie die uebrigen Footer-Links. Das Figma-File setzt sie
abweichend in Montserrat Regular 13/24 - dieser Wert wird hier bewusst
NICHT uebernommen, sondern die Angaben laufen in derselben Schrift, Groesse,
Staerke, Zeilenhoehe und Farbe wie die Spaltenlinks (Montserrat Light
15/30, #151515). Dadurch sitzen sie auch auf derselben Grundlinie wie die
Nachbarspalten. */
.footer-col-contact a {
font-family: var(--font-body);
font-size: 15px; line-height: 30px; font-weight: 300;
color: var(--color-black);
}
/* Die Social-Icons bleiben trotz der groesseren Kontaktschrift exakt auf
ihrer Figma-Hoehe (y199 = Spaltenoberkante 90 + 109). */
/* Runde 37, Punkt 2.3: Die Hover-Linie unter der Telefonnummer stiess an
die Icons - gemessen blieben bei 1440 px nur 2 px dazwischen. Die Icons
stehen jetzt 19 px tiefer, damit 21 px Luft bleiben (Hausmass, und im
Fluss sind es ohnehin 26). */
.footer-social { position: absolute; left: 0; top: 128px; display: flex; align-items: center; gap: 21px; }
.footer-social a {
display: block; width: 34px; height: 34px;
transition: opacity 250ms ease, transform 250ms ease;
}
.footer-social a img { display: block; width: 34px; height: 34px; max-width: none; }
.footer-social a:hover { opacity: 0.78; transform: translateY(-2px); }
.footer-bottom { position: absolute; top: 285px; font-size: 13px; line-height: 24px; letter-spacing: 0.144em; color: var(--color-navy); white-space: nowrap; }
.footer-bottom-l { left: 145px; }
/* "© 3U GMBH" endet im Figma rechtsbündig bei x1208 (nicht am Rasterrand
1296) - Abstand von rechts darum 232px. */
.footer-bottom-r { right: 232px; }
.footer-bottom a { color: var(--color-navy); }
.footer-bottom a:hover { color: var(--color-gold); }
/* =========================================================
Seitenübergreifende Bausteine, die auf JEDER Seite vorkommen und
deshalb hier (statt in der startseiten-eigenen home.css) liegen:
das 1440px-Raster des Figma-Designs sowie das goldene CTA-Band
direkt über dem Footer.
========================================================= */
.home-canvas { width: 1440px; margin: 0 auto; overflow-x: clip; overflow-y: visible; }
.home-inner { width: 1152px; margin: 0 auto; }
/* ---------- Footer-CTA-Band (Gold, y6080-6182) ---------- */
.home-footer-cta {
position: relative;
background: var(--color-gold);
height: 102px;
overflow: hidden;
}
/* Echtes Footer-Logo-Asset (Feedback 10, Group 29763 aus Figma - als PDF
geliefert und zu SVG konvertiert): ersetzt die vorher selbstgebaute
Text-Annäherung "3Ureinigung®" in Bodoni/Headline-Font. */
.home-footer-cta .home-footer-brand { position: absolute; left: 145px; top: 28px; display: block; }
.home-footer-cta .home-footer-brand img { display: block; width: 194px; height: 40px; max-width: none; }
.home-footer-cta-link.arrow-link {
/* Figma: Pfeil x885, Text x920 - also nur 1px zwischen den Boxen. Optisch
klebt der Pfeil damit am Wort. Der Text bleibt darum exakt auf x920, der
Pfeil rutscht 7px nach links und der Abstand betraegt sichtbare 8px;
die rechte Kante der Schaltflaeche bleibt unveraendert bei x1297. */
position: absolute; left: 872px; top: 43px; height: 18px;
font-weight: 500; font-size: 21px; line-height: 18px; color: var(--color-white);
}
/* Pfeil im CTA-Band: Figma "Gruppe 29749" = 34x10 (Kundenwunsch 7.1:
Strichstärke 3 statt 1.3). */
/* Runde 19, Punkt 7: 14 px Abstand als rechter Rand am Pfeil statt als
Flex-"gap" (Begruendung siehe effects.css). Wert unveraendert. */
.home-footer-cta-link.arrow-link .arrow-icon { width: 34px; height: 13px; margin-right: 14px; }
/* Es soll ausdruecklich NUR der Pfeil wandern, nicht die ganze Schaltflaeche.
Damit er dabei nicht in den Text schneidet, ist der Ruheabstand auf 14px
vergroessert (der Pfeil sitzt entsprechend weiter links, der Text bleibt
exakt auf der Figma-Position x920). Beim Hover bleiben so 7px Luft. */
@media (max-width: 1480px) {
.home-canvas { width: 100%; }
}
/* Der Footer bleibt auch auf schmaleren Fenstern eine 1440px-Bühne (die
Inhalte sitzen absolut auf Figma-Koordinaten) und wird durch
overflow:hidden am .site-footer mittig beschnitten. */
/* =========================================================
Header-Farbvarianten je nach Seitenhintergrund.
- .on-gold : die ganze Seite liegt auf der goldenen Musterfläche
(/services) -> Logo, MENU-Label und Hamburger bleiben
durchgehend weiss.
- .hero-photo: nur der Hero ist ein dunkles Foto (Service-Detailseiten,
Über uns). Dort ist der Header laut Figma weiss - sobald
aber weitergescrollt wird, liegt er auf hellem Grund und
muss zurück auf die normale Goldfarbe wechseln, sonst wäre
er unsichtbar. Genutzt wird dafür die ohnehin vorhandene
Klasse .is-scrolled (siehe initHeader() in effects.js).
Das Logo-SVG ist einfarbig, daher genügt eine Filter-Umfärbung.
========================================================= */
body.on-gold .nav-menu-btn,
body.page-404 .nav-menu-btn,
body.hero-photo .site-header:not(.is-scrolled) .nav-menu-btn { color: var(--color-white); }
/* Das Logo ist ein einfarbiges ![]()
und wird per filter auf Weiss gezogen,
solange der Header ueber der goldenen Flaeche bzw. dem dunklen Foto-Hero
liegt.
Das Hamburger-Icon braucht das ausdruecklich NICHT: es ist ein Inline-SVG,
dessen Striche ueber currentColor direkt der Textfarbe des Buttons folgen
(inkl. der Kontrastautomatik .on-light/.on-dark in effects.css). Ein filter
darauf wuerde diese Automatik ueberschreiben. */
body.on-gold .nav-logo img,
body.page-404 .nav-logo img,
body.hero-photo .site-header:not(.is-scrolled) .nav-logo img { filter: brightness(0) invert(1); }
body.hero-photo .site-header .nav-logo img { transition: filter 420ms ease; }
/* ---------- Spam-Schutz der E-Mail-Verweise (Runde 38, Punkt 17.1) ----------
Die Adresse steht im Quelltext nur noch in zwei Teilen. Das At-Zeichen
kommt von hier - als Zeichennummer geschrieben, damit auch im Stylesheet
kein "@" neben dem Namen auftaucht. Fuer Lesende aendert sich nichts:
im Bild steht die vollstaendige Adresse wie bisher. */
.mail-schutz .mail-n::after { content: "\0040"; }
/* Runde 56: auch ZWISCHEN den beiden Teilen kein Umbruch - im Fliesstext
brach die Adresse sonst nach dem At-Zeichen um («info@» / «3u-…»). */
.mail-schutz, .mail-schutz .mail-n, .mail-schutz .mail-d { white-space: nowrap; }
/* ---------- Eigene Zeichenebene fuer Band und Fusszeile ----------
Runde 39, Punkt 1.5 (Safari auf dem MacBook): Nach dem Auf- und
Zuklappen des FAQ blieben helle waagrechte Streifen im goldenen Band
stehen. Sie haben exakt die Hintergrundfarbe der Seite und reichen im
Bildschirmfoto bis in die Spur des Rollbalkens - dorthin kann kein
Element zeichnen. Es sind also stehengebliebene Kacheln im Bildspeicher
des Browsers.
Safari legt fuer feste Elemente (Kopfzeile, Menuekarte, Preisleiste)
eigene Zeichenebenen an und baut beim Rollen nur die geaenderten Kacheln
neu auf. Band und Fusszeile bekommen hier eine EIGENE Ebene; sie werden
dadurch unabhaengig von den Kacheln des Seiteninhalts gezeichnet, und
eine stehengebliebene Kachel kann nicht mehr darueber liegen.
"translateZ(0)" ist dabei nur das Mittel, die Ebene anzufordern - die
Lage aendert sich um keinen Punkt (nachgemessen auf allen Breiten). */
.home-footer-cta,
.site-footer {
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}