/* ============================================================================ Hausverwaltung Clauser · sections.css — Variante 1a „Blaupause" ========================================================================== */ /* ---- HERO ---------------------------------------------------------------- */ .hero{ position:relative; padding:70px clamp(20px,5vw,48px) 60px; overflow:hidden; } /* Position kommt aus dem transform, nicht aus left/top: theme.js schreibt sie bei jeder Zeigerbewegung, und left/top würden dabei jedes Mal Layout auslösen. */ .hero-glowdot{ position:absolute; width:520px; height:520px; left:0; top:0; border-radius:50%; background:radial-gradient(circle,rgba(226,117,31,.16),transparent 65%); pointer-events:none; transform:translate3d(-260px,-160px,0) translate(-50%,-50%); will-change:transform; } .hero-grid{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center; } .hero-eyebrow{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; color:var(--accent-deep); margin-bottom:22px; } .hero h1{ font-family:var(--font-display); font-weight:400; font-size:var(--fs-hero); line-height:.86; letter-spacing:.005em; color:var(--ink); } .hero h1 .accent{ color:var(--accent-deep); } .hero .hero-sub{ font-size:17px; line-height:1.6; color:var(--text); max-width:440px; margin:26px 0 30px; } .hero-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; } .hero-figure{ justify-self:center; display:flex; flex-direction:column; align-items:center; gap:48px; } .hero-logo{ position:relative; width:min(360px,74vw); aspect-ratio:148/108; touch-action:manipulation; } .hero-logo-grid{ position:absolute; inset:0; width:100%; height:100%; z-index:0; } /* Der Canvas ist absichtlich größer als die Logo-Box: er ist der Auslauf, in den die Partikel fliegen. pointer-events aus, damit er nichts blockiert — die Zeiger-Ereignisse hängen an der Logo-Box selbst. */ /* Größe explizit, NICHT über inset+auto: canvas ist ein ersetztes Element, dort gewinnt die intrinsische Größe aus dem width-Attribut — der Canvas würde sich bei jedem Neuaufbau selbst hochschaukeln. */ .hero-logo-canvas{ position:absolute; left:-26%; top:-33%; width:152%; height:148%; z-index:1; display:none; pointer-events:none; } .hero-logo-img{ position:relative; z-index:1; width:78%; height:auto; margin:6% auto 0; display:block; } /* Das Video ist freigestellt, deshalb keine Fläche und kein Rahmen darunter — es liegt direkt auf dem Blatt, das 44px-Raster läuft hindurch. Etwas größer als die Box, weil das isometrische Haus beim Wachsen nach oben ausgreift. */ .hero-logo-video{ position:absolute; left:-6%; top:-10%; width:112%; height:auto; z-index:1; display:none; pointer-events:none; } /* JS+Motion aktiv → das isometrische Haus übernimmt, statisches Bild aus. Ohne JS / reduced-motion bleibt das statische Logo (kein .motion → img sichtbar). */ html.motion .sheet .hero-logo .hero-logo-video{ display:block; } html.motion .sheet .hero-logo .hero-logo-img{ display:none; } /* Der Partikel-Canvas bleibt im Markup, aber aus: Das Video sitzt an seinem Platz. Nicht gelöscht, damit die Partikel-Fassung ohne Rückbau wieder anzuschalten ist — sie ist in den Markenrichtlinien Kapitel 08 als „der eine große Moment" geführt. */ html.motion .sheet .hero-logo .hero-logo-canvas{ display:none; } /* Hinweiszeile unter dem Logo. Sie erklärt die Bedienung nicht, sie lädt ein und sagt gleichzeitig, was die Hausverwaltung tut. Nur sichtbar, wenn der Effekt auch läuft — sonst stünde dort eine Aufforderung ins Leere. */ .hero-logo-note{ display:none; font-family:var(--font-mono); font-size:11.5px; line-height:1.75; text-align:center; color:var(--text); max-width:32ch; } .hero-logo-note span{ display:block; color:var(--text); transition:color .6s var(--ease); } html.motion .sheet .hero-logo-note{ display:block; } /* Läuft das Video statt der Partikel, ist die Zeile eine Aufforderung ins Leere: Am Video gibt es nichts durcheinanderzubringen. Sie bleibt im Markup, weil sie in den Markenrichtlinien Kapitel 08 wörtlich steht und mit dem Partikel-Logo sofort wieder greift. */ html.motion .sheet .hero-logo-video ~ .hero-logo-note, html.motion .sheet .hero-logo:has(.hero-logo-video) + .hero-logo-note{ display:none; } /* Zweite Zeile hebt sich genau dann hervor, wenn das Logo tatsächlich wieder ganz ist. */ html.motion .sheet .hero-logo.is-whole + .hero-logo-note span{ color:var(--accent-deep); } /* ---- SÄULEN (Pillars) ---------------------------------------------------- */ .pillars{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .pillar{ padding:34px clamp(20px,4vw,40px); border-right:1px solid var(--line); } .pillar:last-child{ border-right:none; } .pillar .n{ font-family:var(--font-mono); font-size:11px; color:var(--accent-deep); margin-bottom:10px; } .pillar h3{ display:block; margin:0; font-family:var(--font-display); font-weight:400; font-size:34px; letter-spacing:.02em; color:var(--ink); } .pillar p{ font-size:14px; color:var(--text); margin-top:6px; } /* ---- LEISTUNGEN als Liste (kein Card-Grid) ------------------------------ */ .leist{ padding:66px clamp(20px,5vw,48px); } .leist h2{ font-family:var(--font-serif); font-weight:400; font-size:var(--fs-h2); line-height:1.1; margin:14px 0 16px; max-width:600px; } .leist-intro{ font-size:14px; color:var(--text); max-width:560px; margin:0 0 38px; } .leist h2 em{ color:var(--accent-deep); } .leist-list{ border-top:1px solid var(--ink); } .leist-row{ display:grid; grid-template-columns:60px 1fr 1.4fr; gap:24px; align-items:baseline; padding:28px 6px; border-bottom:1px solid var(--line-2); /* padding gehört nicht in die Transition: es ließ die 3-Spalten-Grid-Zeile bei jedem Hover 0,35 s lang neu umbrechen. transform kostet kein Layout. */ transition:transform .35s var(--ease), background .35s var(--ease); } .leist-row:hover{ background:rgba(226,117,31,.05); transform:translateX(8px); } .leist-row .n{ font-family:var(--font-mono); color:var(--accent-deep); } .leist-row h3{ font-family:var(--font-display); font-weight:400; font-size:30px; letter-spacing:.02em; color:var(--ink); } .leist-row p{ font-size:14px; color:var(--text); } /* ---- ÜBER MICH ----------------------------------------------------------- */ .about{ padding:0 clamp(20px,5vw,48px) 70px; display:grid; grid-template-columns:.6fr 1.4fr; gap:clamp(28px,4vw,48px); align-items:center; } .about-portrait{ aspect-ratio:3/4; background:var(--surface); border:1px solid var(--line); border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; } .about-portrait span{ font-family:var(--font-serif); font-size:120px; color:#d0c6b0; } .about-portrait picture{ display:block; width:100%; height:100%; } .about-portrait img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); } .about-portrait:hover img{ transform:scale(1.04); } .about blockquote{ font-family:var(--font-serif); font-weight:400; font-size:clamp(24px,3.4vw,34px); line-height:1.25; margin:16px 0 22px; color:var(--ink); } .about blockquote em{ color:var(--accent-deep); } .about p{ font-size:15px; line-height:1.6; color:var(--text); max-width:520px; margin-bottom:18px; } .about .sign b{ display:block; font-family:var(--font-display); font-weight:400; font-size:22px; letter-spacing:.04em; color:var(--ink); } .about .sign span{ font-family:var(--font-mono); font-size:11px; color:var(--text); } /* ---- TEAM ---------------------------------------------------------------- */ /* Zwei Karten, keine Schatten: Tiefe kommt in dieser Welt aus Hairlines und Flächen. Die Bildmaße sind bei beiden gleich, damit die Köpfe gleich groß sitzen — sonst liest sich die Reihe als zwei einzelne Fotos. */ .team{ padding:0 clamp(20px,5vw,48px) 70px; } .team h2{ font-family:var(--font-serif); font-weight:400; font-size:var(--fs-h2); line-height:1.1; margin:14px 0 36px; max-width:600px; } .team h2 em{ color:var(--accent-deep); } .team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,4vw,40px); } .team-card{ margin:0; } .team-card img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; border:1px solid var(--line); border-radius:14px; background:var(--surface); } .team-card figcaption{ padding-top:16px; } .team-card b{ display:block; font-family:var(--font-display); font-weight:400; font-size:30px; letter-spacing:.02em; color:var(--ink); } .team-card .rolle{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep); margin-top:4px; } .team-card p{ font-size:14px; color:var(--text); margin-top:10px; } /* ---- OBJEKTREGISTER (Freie Mietobjekte) ---------------------------------- */ /* Dieselbe Zeilensprache wie .leist-row: Haarlinie, Einschub im Hover, Orange-Tint. Anderes Raster, weil hier Daten stehen und kein Fließtext. Geschlossen zeigt eine Zeile bewusst KEIN Foto — das ist das Gegenteil des Portal-Looks, den DESIGN.md ausschließt. */ .angebote{ padding:0 clamp(20px,5vw,48px) 66px; } .angebote > h2{ font-family:var(--font-serif); font-weight:400; font-size:var(--fs-h2); line-height:1.1; margin:14px 0 34px; max-width:600px; } .angebote > h2 em{ color:var(--accent-deep); } .woh-list{ border-top:1px solid var(--ink); } .woh{ border-bottom:1px solid var(--line-2); } /* Der Einschub sitzt auf dem , NICHT auf dem
: sonst verschiebt ein aufgeklappter Eintrag seine ganze Bildtafel mit, und die absolut positionierte Plot-Linie wandert hinterher. */ .woh-kopf{ display:grid; grid-template-columns:60px 88px 1fr auto 30px; gap:24px; align-items:start; padding:26px 6px; cursor:pointer; list-style:none; transition:transform .35s var(--ease), background .35s var(--ease); } .woh-kopf::-webkit-details-marker{ display:none; } .woh-kopf::marker{ content:""; } .woh-kopf:hover{ background:rgba(226,117,31,.05); transform:translateX(8px); } .woh-kopf .n{ font-family:var(--font-mono); font-size:13px; color:var(--accent-deep); padding-top:6px; } /* Vorschaubild: fest 88×88, unabhängig von der Original-Auflösung oder dem Seitenverhältnis des hochgeladenen Fotos — object-fit:cover schneidet mittig zu, statt zu verzerren oder die Zeile zu strecken. Ohne Foto bleibt die Fläche leer stehen, sonst verspringen die Zeilen untereinander, sobald ein Objekt kein Bild hat. aria-hidden, weil daneben Objektart, Ort und alle Eckdaten schon als Text stehen — für eine Vorlesehilfe wäre das Bild eine Dopplung. */ .woh-vorschau{ width:88px; height:88px; border-radius:10px; overflow:hidden; background:var(--surface); flex-shrink:0; } .woh-vorschau img{ width:100%; height:100%; object-fit:cover; display:block; } .woh-titel b{ display:block; font-family:var(--font-display); font-weight:400; font-size:30px; letter-spacing:.02em; color:var(--ink); } .woh-fakten{ display:block; font-size:14px; color:var(--text); margin-top:4px; } /* Der Energiestempel ist Pflichtangabe nach § 87 GEG und steht deshalb im geschlossenen Zustand. 11px statt 10px: laut PRODUCT.md liest ein Teil der Zielgruppe bei wechselndem Licht. */ .woh-geg{ display:block; font-family:var(--font-mono); font-size:11px; line-height:1.5; color:var(--text); margin-top:9px; } /* Miete auf display-xs (30px) — zwei Stufen unter der Rechner-Zahl. Die größte Zahl der Seite gehört dem Argument, das Eigentümer überzeugt. */ .woh-miete{ text-align:right; white-space:nowrap; } .woh-miete b{ font-family:var(--font-display); font-weight:400; font-size:30px; letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums; } .woh-miete i{ display:block; font-family:var(--font-mono); font-style:normal; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text); margin-top:2px; } .woh-warm{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--accent-deep); margin-top:4px; font-variant-numeric:tabular-nums; } /* 17px = die dokumentierte body-lg-Stufe, hier in Mono. 18px wäre eine siebzehnte Schriftgröße für einen Unterschied, den niemand sieht. */ .woh-schalter{ font-family:var(--font-mono); font-size:17px; line-height:1; color:var(--accent-deep); justify-self:end; padding-top:8px; transition:transform .3s var(--ease); } .woh[open] .woh-schalter{ transform:rotate(45deg); } /* Aufgeklappt: Bildtafel wie ein Kontaktbogen — alles gleichzeitig, kein Karussell. Geschlossen lädt der Browser hier nichts: ein nicht gerendertes
löst lazy-Bilder nicht aus. */ .woh-tafel{ padding:4px 6px 38px; } .woh-platten{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:26px; } .woh-platten figure{ margin:0; } .woh-platten figure:first-child{ grid-column:1 / -1; } .woh-platten img{ width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--line); border-radius:12px; background:var(--surface); } /* Die Beschriftung macht aus einer Fotostrecke eine Raumliste — das ist der Unterschied zu einer Angebotskarte. */ .woh-platten figcaption{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text); margin-top:7px; } .woh-text{ font-size:15px; line-height:1.65; color:var(--text); max-width:60ch; margin-bottom:24px; } /* Fehlt ein optionales Feld, fehlt das ganze Paar — kein Strich, kein „k. A.". flex-wrap schließt die Lücke von selbst. */ .woh-daten{ display:flex; flex-wrap:wrap; gap:0 30px; margin:0 0 20px; } .woh-daten > div{ flex:1 1 150px; min-width:150px; padding:11px 0; border-bottom:1px solid var(--line); } .woh-daten dt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); } .woh-daten dd{ margin:4px 0 0; font-size:15px; color:var(--ink); } .woh-stand{ font-family:var(--font-mono); font-size:11px; color:var(--text); margin-bottom:22px; } .woh-aktion{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; } /* Leerzustand: dieselbe Zeile, nur ohne Bild, ohne Schalter und ohne Hover. Eigenes Grid ohne die 88px-Bildspalte, sonst schiebt sich eine leere Spalte in den Leerzustand und Text/„Suche hinterlegen" werden gequetscht — der Leerzustand hat nie ein Bild, das ist hier der Normalfall der Seite. */ .woh-kopf-leer{ grid-template-columns:60px 1fr auto; cursor:default; } .woh-kopf-leer:hover{ background:none; transform:none; } .woh-leer{ border-bottom:1px solid var(--line-2); } .woh-leer .n, .woh-leer .woh-titel b{ color:var(--line-2); } /* Instagram-Panel: derselbe helle Akzent-Block wie bisher, nur als Fuß des Registers statt als eigener Abschnitt. Der Abstand nach oben steht unten bei .offers.woh-insta (66px, überschreibt diesen Wert hier ohnehin). */ .woh-insta h3{ font-family:var(--font-serif); font-weight:400; font-size:var(--fs-h3); margin:0 auto 12px; max-width:520px; color:var(--ink); } .woh-insta h3 em{ color:var(--accent-deep); } /* ---- MIETANGEBOTE (heller Akzent-Block) --------------------------------- */ .offers{ margin:0 clamp(20px,5vw,48px) 66px; background:linear-gradient(155deg,#F6EEDF,#EFE7D6); border:1px solid var(--line); border-radius:18px; padding:clamp(32px,5vw,56px); text-align:center; } .offers h2{ font-family:var(--font-serif); font-weight:400; font-size:var(--fs-h3); margin:14px auto 14px; max-width:560px; } .offers h2 em{ color:var(--accent-deep); } .offers p{ font-size:15px; color:var(--text); max-width:460px; margin:0 auto 26px; } /* .offers und .woh-insta landen zusammen auf demselben