/* Projektspezifisches CSS – wird von YOOtheme Pro automatisch geladen. */ /* === ic-yoo-mcp:start — verwaltet, NICHT manuell editieren === */ /* ===== V2: 00-base.css ===== */ /* --------------------------------------------------------------------- THE ONE V2 – Basis (Palette des Exposés, Typo-Register, Signatur-Muster) Layer 3 nach uikit-first: nur, was UIkit nicht kann (CSS-Variablen, letter-spacing, Pseudo-Elemente, Verlauf, Grid-Template) und die Palette-Überschreibung der Stil-Tokens (Stil-Compile per API nicht möglich). Versioniert: yootheme/v2/css/00-base.css --------------------------------------------------------------------- */ :root{ --t1-paper:#F6F4EF; --t1-fond:#DEDCD1; --t1-ink:#263032; --t1-text:#3A3A3A; --t1-accent:#C07B61; --t1-accent-dark:#A96E56; --t1-accent-tint:#E1C1B5; --t1-sage:#A6A392; --t1-bluegrey:#B7C0CC; --t1-hair:rgba(38,48,50,.16); --t1-hair-light:rgba(246,244,239,.22); --t1-serif:"The Seasons","Palatino Linotype",Palatino,Georgia,serif; --t1-sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --t1-sky-a:#B7C0CC; --t1-sky-b:#DEDCD1; --t1-sky-c:#E1C1B5; --t1-sky-d:#F6F4EF; } /* --- Palette-Override der Stil-Tokens --------------------------------- */ body,.uk-section-default,.tm-page{background:var(--t1-paper);color:var(--t1-text)} .uk-section-muted{background:var(--t1-fond)} .uk-section-secondary,.t1-ink{background:var(--t1-ink);color:#fff} h1,h2,h3,h4,.uk-h1,.uk-h2,.uk-h3,.uk-h4, .uk-heading-small,.uk-heading-medium,.uk-heading-large,.uk-heading-xlarge,.uk-heading-2xlarge{ color:var(--t1-ink);letter-spacing:-.02em;font-weight:400} .uk-light h1,.uk-light h2,.uk-light h3,.uk-light .uk-h1,.uk-light .uk-h2,.uk-light .uk-h3, .uk-light .uk-heading-small,.uk-light .uk-heading-medium,.uk-light .uk-heading-large, .uk-light .uk-heading-xlarge,.uk-light .uk-heading-2xlarge{color:#fff} a{color:var(--t1-accent-dark)} a:hover{color:var(--t1-accent)} /* --- Buttons: Pills, immer mit Pfeil (Icon per button_item.icon) -------- */ .uk-button,.uk-button-default,.uk-button-primary,.uk-button-secondary{border-radius:500px;letter-spacing:.01em;text-transform:none;font-weight:500;font-size:.9375rem;line-height:38px;padding:0 24px} /* Primär = Terracotta-Fläche, weiß – auf Hell und Dunkel (einzige Terracotta-Fläche) */ .uk-button-primary,.uk-light .uk-button-primary,.uk-section-secondary .uk-button-primary,.uk-section-primary .uk-button-primary{background:var(--t1-accent);color:#fff;border:1px solid var(--t1-accent)} .uk-button-primary:hover,.uk-button-primary:focus-visible,.uk-light .uk-button-primary:hover{background:var(--t1-accent-dark);border-color:var(--t1-accent-dark);color:#fff} /* Sekundär = Outline: Ink auf Hell, Weiß auf Dunkel */ .uk-button-default,.uk-button-secondary{background:transparent;color:var(--t1-ink);border:1px solid var(--t1-ink)} .uk-button-default:hover,.uk-button-default:focus-visible,.uk-button-secondary:hover{background:var(--t1-ink);color:#fff;border-color:var(--t1-ink)} .uk-light .uk-button-default,.uk-section-secondary .uk-button-default,.uk-light .uk-button-secondary{color:#fff;border-color:#fff;background:transparent} .uk-light .uk-button-default:hover,.uk-section-secondary .uk-button-default:hover{background:#fff;color:var(--t1-ink);border-color:#fff} .uk-button .uk-icon{margin-left:.5em} /* Sektionsabstand ≥ 160 px (bar.md §4) */ @media (min-width:960px){.uk-section-large{padding-top:160px;padding-bottom:160px}.uk-section-xlarge{padding-top:200px;padding-bottom:200px}} /* --- Typo-Register ------------------------------------------------------ */ .t1-display{font-family:var(--t1-serif);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--t1-ink)} .t1-h1{font-size:clamp(44px,6.9vw,100px)} .t1-h2{font-size:clamp(32px,3.75vw,54px);line-height:1.2;letter-spacing:-.025em} .t1-giant{font-family:var(--t1-serif);font-weight:400;line-height:.95;letter-spacing:-.02em;font-size:clamp(96px,15vw,220px)} /* 02.09. (User: "in allen Ueberschriften die line-height auf 1.2 anpassen"): Zeilenabstand der Ueberschriften einheitlich 1.2 - .t1-display (h1/h2/h3-Register) war 1, .t1-h2 war 1.05. Die Tag-Regel faengt Ueberschriften ohne t1-Klasse ab, die YOOtheme aus den Style-Settings bedient: gemessen war das die h2 im Footer-CTA mit 45px/1.10 auf allen Seiten. Klassen mit eigener line-height gewinnen ueber die Tag-Regel (Spezifitaet) und bleiben absichtlich, wo 1.2 nichts brachte oder schadete: .t1-kicker/.t1-marker (einzeilige Labels, 1), .t1-sub und .t1-lead (Vorspann-Copy, 1.3), .t1-pj-q (Interview-Frage, 1.3) sowie die einzeiligen Riesenwoerter .t1-giant/.t1-lp-giant/.t1-pj-giant/.t1-muc, die auf Maske und Pin sitzen. */ h1,h2,h3,h4,h5,h6,.uk-h1,.uk-h2,.uk-h3,.uk-h4,.uk-h5,.uk-h6,.uk-heading-small,.uk-heading-medium,.uk-heading-large{line-height:1.2} /* 01.09. (User: 'mobil laeuft "Datenschutzerklaerung" aus dem Bildschirm'): Display-Ueberschriften duerfen ueberlange Woerter trennen. Ursache ist der Wortaufstieg in 02-motion.js - der wickelt jedes Wort in ein inline-block-Span (.t1-rw), und ein inline-block bricht intern nicht um. Gemessen auf /datenschutz/ bei 390 px: das Span war 418 px breit in einem 350 px Container, also 68 px darueber. hyphens:auto greift dank html lang="de" mit deutscher Silbentrennung und nur DANN, wenn eine Zeile sonst nicht passt - kurze Ueberschriften bleiben unangetastet. overflow-wrap:break-word ist der Rueckfall, falls keine Trennstelle gefunden wird. */ .t1-display,.t1-giant,.t1-display .t1-rw,.t1-giant .t1-rw{hyphens:auto;overflow-wrap:break-word} .t1-lead{font-family:var(--t1-sans);font-weight:300;font-size:clamp(20px,2.1vw,31px);line-height:1.3;letter-spacing:-.01em;color:var(--t1-ink)} .t1-sub{font-family:var(--t1-sans);font-weight:400;font-size:clamp(18px,1.6vw,24px);line-height:1.3;color:var(--t1-ink)} .t1-label{font:500 13px/1.4 var(--t1-sans);letter-spacing:0;color:var(--t1-ink)} .t1-kicker{font:500 12px/1 var(--t1-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--t1-ink)} .t1-marker{font:500 13px/1 var(--t1-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--t1-ink);white-space:nowrap;display:inline-flex;align-items:center;gap:20px} .t1-marker p{margin:0;display:inline-flex;align-items:center;gap:20px} .t1-marker-num{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--t1-accent);color:var(--t1-ink);font:500 13px/1 var(--t1-sans);letter-spacing:0;display:inline-flex;align-items:center;justify-content:center} .uk-light .t1-marker-num{color:var(--t1-ink)} .uk-light .t1-marker,.uk-light .t1-kicker,.uk-light .t1-label,.uk-light .t1-lead,.uk-light .t1-sub,.uk-light .t1-display,.uk-light .t1-giant{color:#fff} .t1-caption{font:400 12.5px/1.5 var(--t1-sans);color:var(--t1-ink);opacity:.65} .t1-small{font:400 13px/1.55 var(--t1-sans);color:var(--t1-ink);opacity:.72} .t1-copy{font-family:var(--t1-sans);font-size:17px;line-height:1.55;color:var(--t1-text)} .t1-copy p+p{margin-top:1em} /* --- Zweiton (Signatur): Kern in Ink, Rest in Salbei ------------------- */ .t1-dim{color:var(--t1-sage)} .uk-light .t1-dim{color:var(--t1-sage)} .t1-two .t1-w{transition:color .25s linear} /* JS setzt Wörter beim Scroll von Salbei auf Ink */ /* --- Haarlinien-Register: nummerierte Zeilen, Kennzahlen ---------------- */ .t1-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--t1-hair)} .t1-steps>li{display:grid;grid-template-columns:32px 1fr;column-gap:24px;padding:22px 0;margin:0;border-bottom:1px solid var(--t1-hair)} .t1-steps .t1-num{font:500 11px/2.2 var(--t1-sans);color:var(--t1-sage)} .t1-steps .t1-line{font:400 clamp(18px,1.55vw,22px)/1.4 var(--t1-sans);color:var(--t1-ink)} .uk-light .t1-steps{border-color:var(--t1-hair-light)} .uk-light .t1-steps>li{border-color:var(--t1-hair-light)} .uk-light .t1-steps .t1-line{color:#fff} .t1-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--t1-hair);border-bottom:1px solid var(--t1-hair)} .t1-stats>*{padding:28px 28px 28px 0;border-left:1px solid var(--t1-hair)} .t1-stats>*:first-child{border-left:0} .t1-stats>*+*{padding-left:28px} .t1-stat-value{font:400 clamp(36px,4vw,58px)/1 var(--t1-serif);color:var(--t1-ink);letter-spacing:-.01em} .t1-stat-value small{font-size:.5em;letter-spacing:0} .t1-stat-label{font:400 13px/1.4 var(--t1-sans);color:var(--t1-ink);opacity:.72;margin-top:10px} @media (max-width:959px){.t1-stats{grid-template-columns:repeat(2,1fr)}.t1-stats>*:nth-child(3){border-left:0}} .t1-hair{height:1px;background:var(--t1-hair)} .uk-light .t1-hair{background:var(--t1-hair-light)} .t1-star{color:var(--t1-accent)} /* --- Bilder randscharf (FRE), Slots ------------------------------------ */ .t1-sharp img,.t1-sharp .el-image{border-radius:0} .t1-full .uk-container{max-width:none;padding-left:0;padding-right:0} .t1-full img{width:100%;max-width:none;display:block} /* --- Textlink mit Haarlinie -------------------------------------------- */ .t1-link{font:500 13.5px/1 var(--t1-sans);color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:6px} .t1-link:hover{color:var(--t1-accent)} /* --- Reveal-Startzustand nur mit JS (kein FOUC ohne Skript) ------------ */ html.t1-js .t1-reveal{opacity:0;transform:translateY(24px)} html.t1-js.t1-reduced .t1-reveal{opacity:1;transform:none} /* ===== V2: 02-motion.css ===== */ /* --------------------------------------------------------------------- THE ONE V2 – Mikroanimationen (Vokabular gemessen an findrealestate.com, 26.08.): expo-out cubic-bezier(.16,1,.3,1) · Pills dehnen sich horizontal (scaleX 1.02) · Pfeil rückt nach · Bilder per Clip-Reveal von unten · Haarlinien zeichnen sich · Header wird beim Scrollen fest/verschwindet nach unten, kommt nach oben zurück. Alles hinter html.t1-js, reduced-motion = Endzustand. --------------------------------------------------------------------- */ :root{--t1-ease:cubic-bezier(.16,1,.3,1)} /* Pills: horizontale Dehnung + Pfeil rückt nach (FRE: transform .3s ease) */ .uk-button{transition:transform .3s ease,background-color .3s ease,color .3s ease,border-color .3s ease;transform-origin:50% 50%;will-change:transform} .uk-button:hover,.uk-button:focus-visible{transform:scaleX(1.02)} .uk-button .uk-icon,.uk-button svg{transition:transform .3s ease} .uk-button:hover .uk-icon,.uk-button:hover svg{transform:translateX(3px)} .t1-link{transition:color .3s ease} .t1-link:hover{color:var(--t1-accent)} /* Bilder: Clip-Reveal von unten + leichte Entzoomung (FRE: clip-path 1s expo, img fade .5s) */ html.t1-js:not(.t1-reduced) .t1-clip{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--t1-ease)} html.t1-js:not(.t1-reduced) .t1-clip img,html.t1-js:not(.t1-reduced) .t1-clip video{transform:scale(1.06);transition:transform 1.4s var(--t1-ease)} html.t1-js .t1-clip.t1-in{clip-path:inset(0 0 0 0)} html.t1-js .t1-clip.t1-in img,html.t1-js .t1-clip.t1-in video{transform:scale(1)} /* Haarlinien zeichnen sich von links (Steps, Stats) */ html.t1-js:not(.t1-reduced) .t1-steps{border-top:0;position:relative} html.t1-js:not(.t1-reduced) .t1-steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--t1-hair);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--t1-ease)} html.t1-js:not(.t1-reduced) .t1-steps>li{border-bottom:0;position:relative} html.t1-js:not(.t1-reduced) .t1-steps>li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--t1-hair);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--t1-ease)} html.t1-js .t1-steps.t1-in::before,html.t1-js .t1-steps.t1-in>li::after{transform:scaleX(1)} .t1-steps.t1-in>li:nth-child(1)::after{transition-delay:.08s}.t1-steps.t1-in>li:nth-child(2)::after{transition-delay:.18s}.t1-steps.t1-in>li:nth-child(3)::after{transition-delay:.28s}.t1-steps.t1-in>li:nth-child(4)::after{transition-delay:.38s}.t1-steps.t1-in>li:nth-child(5)::after{transition-delay:.48s}.t1-steps.t1-in>li:nth-child(n+6)::after{transition-delay:.58s} .uk-light .t1-steps::before,.uk-light .t1-steps>li::after{background:var(--t1-hair-light)} html.t1-js:not(.t1-reduced) .t1-stats{border-top-color:transparent;border-bottom-color:transparent;position:relative} html.t1-js:not(.t1-reduced) .t1-stats::before,html.t1-js:not(.t1-reduced) .t1-stats::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--t1-hair);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--t1-ease)} html.t1-js:not(.t1-reduced) .t1-stats::before{top:-1px}html.t1-js:not(.t1-reduced) .t1-stats::after{bottom:-1px} html.t1-js .t1-stats.t1-in::before,html.t1-js .t1-stats.t1-in::after{transform:scaleX(1)} .uk-light .t1-stats::before,.uk-light .t1-stats::after{background:var(--t1-hair-light)} /* Header: fest mit Papiergrund nach dem Hero, verschwindet beim Runterscrollen, kommt beim Hochscrollen (FRE: header transform .3s) */ .tm-header .uk-sticky{transition:transform .35s var(--t1-ease)} .tm-header .uk-navbar-container{transition:background-color .35s ease,box-shadow .35s ease} html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-navbar-container{background:rgba(246,244,239,.94);box-shadow:inset 0 -1px 0 var(--t1-hair)} html.t1-hdr-hide .tm-header .uk-sticky-fixed{transform:translateY(-100%)} /* Lazy-Bilder weich einblenden (FRE: opacity .5s ease-out) */ html.t1-js img[loading="lazy"]{transition:opacity .5s ease-out} /* ===== V2: 05-header.css ===== */ /* THE ONE V2 – Header (1:1 aus der vorigen Version, yootheme/hero-stage/header.css): Burger als Terracotta-Kreis mit weißen Strichen; Vollbild-Dialog seit 27.08. Variante A (Ink-Bühne). Seitenweit gedacht (css/custom.css bzw. Custom-LESS im Stil); vorerst über das Skriptelement der Home-Hero-Section ausgeliefert (DISALLOW_FILE_EDIT). */ .tm-header .uk-navbar-toggle, .tm-header-mobile .uk-navbar-toggle { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%; background: var(--t1-accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; align-self: center; /* .uk-navbar-right ist align-items:stretch -> sonst klebt der Kreis oben */ flex: 0 0 auto; margin: 0; transition: background-color .2s ease, transform .2s ease; } .tm-header .uk-navbar-toggle:hover, .tm-header .uk-navbar-toggle:focus-visible, .tm-header-mobile .uk-navbar-toggle:hover, .tm-header-mobile .uk-navbar-toggle:focus-visible { background: var(--t1-accent-dark); color: #fff; transform: scale(1.04); } .tm-header .uk-navbar-toggle svg, .tm-header-mobile .uk-navbar-toggle svg { color: #fff; } /* Kontakt-Button dichter an den Burger */ .tm-header .uk-navbar-right, .tm-header-mobile .uk-navbar-right { gap: 14px !important; } /* ===== Vollbild-Menü, Variante A „Bühne" (User-Entscheid 27.08., Mockup) ===== Ink-Fläche (Kreis wächst in Ink aus dem Burger), links die Punkte im Marker-Raster mit Haarlinien, rechts ein Rendering, unten Adresse / Kontakt / Rechtliches. Terracotta nur als Akzent (Marker, Schließen, Logo-ONE). */ #tm-dialog { background: var(--t1-ink); } #tm-dialog .uk-modal-dialog { background: transparent; display: block; min-height: 100vh; position: relative; } #tm-dialog.t1-menu .uk-modal-body { display: none !important; } .t1m { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) min(36vw, 520px); grid-template-rows: auto 1fr auto; column-gap: clamp(32px, 4vw, 80px); padding: 30px 40px clamp(32px, 6vh, 56px) clamp(40px, 5.3vw, 76px); box-sizing: border-box; color: var(--t1-paper); } .t1m-top { grid-column: 1 / -1; grid-row: 1; height: 44px; display: flex; align-items: center; } .t1m-logo { width: 214px; height: auto; display: block; } .t1m-logo .t1m-the { fill: var(--t1-paper); } .t1m-logo .t1m-one { fill: var(--t1-accent); } .t1m-left { grid-column: 1; grid-row: 2; align-self: center; max-width: 700px; width: 100%; } #tm-dialog .uk-nav { text-align: left; width: 100%; margin: 0; } #tm-dialog .uk-nav > li { border-top: 1px solid rgba(246,244,239,.16); } #tm-dialog .uk-nav > li:last-child { border-bottom: 1px solid rgba(246,244,239,.16); } #tm-dialog .uk-nav > li > a, #tm-dialog .uk-nav > li.uk-active > a { display: flex; align-items: center; gap: 28px; padding: clamp(12px, 2.4vh, 22px) 0; color: var(--t1-paper); text-decoration: none; font-family: var(--t1-serif); font-weight: 400; font-size: clamp(40px, min(5.8vw, 9vh), 84px); line-height: 1; letter-spacing: -.02em; text-transform: none; } #tm-dialog .uk-nav > li > a:hover, #tm-dialog .uk-nav > li > a:focus-visible { color: var(--t1-paper); opacity: 1; letter-spacing: -.02em; } .t1m-marker { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--t1-accent); color: var(--t1-ink); font: 500 13px/1 var(--t1-sans); letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; } .t1m-text { transition: color .35s ease, transform .5s cubic-bezier(.16,1,.3,1); } .t1m-arr { margin-left: auto; font: 400 34px/1 var(--t1-serif); opacity: 0; transform: translateX(-12px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); } #tm-dialog .uk-nav > li > a:hover .t1m-text, #tm-dialog .uk-nav > li > a:focus-visible .t1m-text { color: var(--t1-accent-tint); transform: translateX(10px); } #tm-dialog .uk-nav > li > a:hover .t1m-arr, #tm-dialog .uk-nav > li > a:focus-visible .t1m-arr { opacity: 1; transform: none; } .t1m-pic { grid-column: 2; grid-row: 2 / 4; margin: 0; position: relative; overflow: hidden; min-height: 0; background: rgba(246,244,239,.06); } .t1m-pic img { width: 100%; height: 100%; object-fit: cover; display: block; } .t1m-pic figcaption { position: absolute; left: 24px; bottom: 22px; color: #fff; font: 500 12px/1 var(--t1-sans); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.35); } .t1m-meta { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 26px; border-top: 1px solid rgba(246,244,239,.16); max-width: 700px; } .t1m-meta .t1m-k { font: 500 12px/1 var(--t1-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--t1-paper); opacity: .7; margin-bottom: 12px; } .t1m-meta p { margin: 0; font: 400 14px/1.5 var(--t1-sans); color: var(--t1-paper); } .t1m-meta a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(246,244,239,.5); padding-bottom: 2px; transition: border-color .25s; } .t1m-meta a:hover { border-color: var(--t1-paper); } /* Schließen als Terracotta-Kreis (wie der Burger), oben rechts */ #tm-dialog .uk-modal-close-full, #tm-dialog [class*="uk-modal-close-"] { position: absolute; right: 40px; top: 30px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--t1-accent) !important; color: #fff; display: grid; place-items: center; box-shadow: none; z-index: 2; transition: background-color .2s, transform .2s; } #tm-dialog .uk-modal-close-full:hover { background: var(--t1-accent-dark) !important; transform: scale(1.04); opacity: 1; } #tm-dialog .uk-modal-close-full svg { width: 18px; height: 18px; } @media (max-width: 1100px) { .t1m { grid-template-columns: 1fr; } .t1m-pic { display: none; } .t1m-left, .t1m-meta { max-width: none; } } @media (max-height: 640px) { .t1m-meta { display: none; } } /* Mobil: Offcanvas (YOOtheme) vollflächig in Ink, gleiche Punkte mit Marker, Meta gestapelt darunter */ #tm-dialog-mobile .uk-offcanvas-bar { width: 100%; max-width: 100%; left: 0; right: 0; background: var(--t1-ink); color: var(--t1-paper); justify-content: center; padding: 88px 24px 40px; } #tm-dialog-mobile .uk-nav > li { border-top: 1px solid rgba(246,244,239,.16); } #tm-dialog-mobile .uk-nav > li:last-child { border-bottom: 1px solid rgba(246,244,239,.16); } #tm-dialog-mobile .uk-nav > li > a, #tm-dialog-mobile .uk-nav > li.uk-active > a { display: flex; align-items: center; gap: 18px; padding: 16px 0; color: var(--t1-paper); font-family: var(--t1-serif); font-size: clamp(30px, 9vw, 40px); line-height: 1; letter-spacing: -.02em; text-transform: none; } #tm-dialog-mobile .t1m-marker { width: 34px; height: 34px; font-size: 12px; } #tm-dialog-mobile .t1m-arr { display: none; } #tm-dialog-mobile .t1m-meta-mobile { grid-template-columns: 1fr; gap: 18px; margin-top: 32px; } #tm-dialog-mobile .uk-offcanvas-close, #tm-dialog-mobile .uk-close { color: var(--t1-paper); } /* Sticky-Header mit Papiergrund (html.t1-hdr-solid) über dunkler Sektion: YOOtheme setzt dort uk-light auf den Navbar-Container (Invers-Logik) -> Weiß auf Papier. Farben auf Ink zurückholen (26.08.). */ html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-light .uk-navbar-nav > li > a, html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-light .uk-logo { color: var(--t1-ink); } html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-light .uk-button-default, html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-light .uk-button-secondary { color: var(--t1-ink); border-color: var(--t1-ink); background: transparent; } html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-light .uk-button-default:hover, html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-light .uk-button-secondary:hover { background: var(--t1-ink); border-color: var(--t1-ink); color: #fff; } html.t1-hdr-solid .tm-header .uk-sticky-fixed .uk-light .uk-navbar-toggle { color: var(--t1-ink); } /* ===== V2: 06-footer.css ===== */ /* THE ONE V2 – Footer (Theme-Ebene, Builder #footer). Der Footer selbst bleibt unangetastet; hier steht nur, was die Wortmarke „THE ONE“ auf schmalen Viewports lesbar macht. 01.09. (User: „auf mobile ist das THE ONE nicht gut zu erkennen und ein Abstand ist zu hoch“). Versioniert: yootheme/v2/css/06-footer.css */ /* --- Wortmarke skaliert unterhalb ihrer Originalbreite ------------------ Die Wortmarke ist das Hintergrundbild der Footer-Section: TheOne.svg, 1050 × 195, „THE“ in #1C1F1C (Tiefe auf Ink), „ONE“ in Weiß, gesetzt mit background-size:auto und bottom right. Unter 1050 px Viewport hängt der linke Teil außerhalb – bei 390 px stehen nur die rechten 37 % im Bild, also ein angeschnittenes „ONE“. Darum bis 1049 px auf die Viewportbreite skalieren: bei 1049 px übernimmt sie nahtlos die Originalgröße, bei 390 px ist sie 390 × 72 und das ganze Wort steht da. Der Rest des „E“ fehlt auch dann – das steckt im SVG selbst (Pfade laufen bis x = 1058,8 bei viewBox 1050) und sieht auf dem Desktop genauso aus. */ @media (max-width: 1049px) { footer .uk-section.uk-background-bottom-right { background-size: 100% auto } } /* --- Leerraum unter der Adresse ---------------------------------------- Unter dem Link-Grid liegt ein leeres Panel (min-height:100px, inline) plus 30 px Grid-Abstand: der Freiraum, den die 195 px hohe Wortmarke auf dem Desktop braucht. Mobil ist sie nur noch 72 px hoch, damit klaffen unter „81379 München“ 210 px. Also Platzhalterzeile raus, Freiraum allein aus dem Section-Padding: 110 px, davon 72 px Wortmarke und 38 px Luft. */ @media (max-width: 639px) { footer .uk-panel[style*="min-height"] { display: none } footer .uk-container > .uk-grid:last-child { margin-top: 0 } footer .uk-section-large { padding-bottom: 110px } } /* ===== V2: 10-home.css ===== */ /* --------------------------------------------------------------------- THE ONE V2 – Home: Hero (Himmel, Text, Haus, Wortmarken-Maske) uikit-first: Höhe/Container/Ausrichtung nativ (height_viewport, width, text_align); Pill-Farbe kommt aus 00-base (Primär = Terracotta, §6). Hier nur Stufe 6: Verlauf, absolute Ankerung an der Sektionsunterkante mit %-Breite, background-clip:text, clip-path, Filter/Transform-Startzustände für GSAP, Theme-Chrome (Burger als Kupferkreis, Vollbild-Menü in Ink – design-system.md §Header, §2 „Terracotta nie als Fläche"). --------------------------------------------------------------------- */ .t1-hero{ position:relative;overflow:hidden; --t1-sky-warm:0; background:linear-gradient(180deg,var(--t1-sky-a) 0%,var(--t1-sky-b) 28%,var(--t1-sky-c) 62%,var(--t1-sky-d) 100%); } /* zweiter (warmer) Himmel-Layer, Deckkraft von GSAP ab dem ersten Scrollpixel gescrubbt */ .t1-hero::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(180deg,var(--t1-sky-b) 0%,var(--t1-sky-c) 30%,#E8CCBE 58%,var(--t1-sky-d) 100%); opacity:var(--t1-sky-warm); } .t1-hero>.uk-container{position:relative} /* --- Textblock im oberen Drittel ---------------------------------------- */ .t1-hero .t1-hero-copy{padding-top:12vh;position:relative;z-index:4} .t1-hero .t1-hero-copy>*{margin:0} /* Abstände nur hier, nicht aus uk-margin */ .t1-hero .t1-hero-eyebrow{margin-bottom:28px;opacity:.8} /* Display-Claim = gestaltetes div (The Seasons, t1-h1); Umbruch wie Figma: „Mit Immobilien / Vermögen schaffen." */ /* 02.09. (User: 'die Ueberschrift "Mit Immobilien Vermoegen schaffen." bitte wieder so wie vorher'): Der Hero-Claim behaelt line-height 1 - die generelle Umstellung der Ueberschriften auf 1.2 gilt fuer ihn nicht. Er ist ein div.t1-display.t1-h1 und haengt deshalb an der .t1-display-Regel. */ .t1-hero .t1-hero-claim{margin:0 auto 26px;max-width:940px;line-height:1} /* Die einzige h1 der Seite = SEO-Subline (Inter, t1-sub, Zweiton) – h1-Token des Themes ausdrücklich übersteuert */ .t1-hero h1.t1-hero-sub{ font-family:var(--t1-sans);font-weight:400;font-size:clamp(18px,1.6vw,24px);line-height:1.3;letter-spacing:0; color:var(--t1-ink);max-width:760px;margin:0 auto 30px; } .t1-hero .t1-hero-cta{margin-top:0} /* Hero-Pill = Primär aus 00-base: Terracotta #C07B61 / Weiß (design-system.md §Buttons) – kein eigenes Button-CSS */ /* --- Das freigestellte Haus (27.08.: Bild-ID 459 `THE-ONE-Haus-Freisteller-View02-voll-scaled.webp`, 2560×2354, Himmel transparent). Anders als der alte Ausschnitt (1962×1302, nur Baukörper) zeigt dieses Bild den vollen Rahmen: Vorplatz, Bäume, Nachbarwand – die oberen 32,5 % sind Himmel und damit transparent, der Verlauf der Sektion liegt frei. Gemessen am Bild: Dachkante bei 32,5 % der Bildhöhe, Baukörper x 430…2700 (71,6 % der Bildbreite), seine Mitte bei 49,3 %. Daraus die Setzung: · width 106 % -> Baukörper ≈ 76 % der Viewportbreite (wie vorher), Bildkanten liegen bei left −2,3 % beidseitig hinter dem Viewportrand – deshalb KEINE Kantenmaske mehr nötig. · top calc(60vh − 31,7vw) -> die Dachkante sitzt bei jeder Fenstergröße auf 60 vh (bar.md §1). 31,7vw = 32,5 % der Bildhöhe, und die Bildhöhe ist 106 %/1,0875 = 97,5 % der Breite. · Bildunterkante (Hecke/Vorplatz) bleibt unter dem Viewport, die Sektion schneidet hart an (overflow:hidden). Keine Maske, kein Feather, kein Rahmen, kein Radius, kein Schatten. uikit-first: Stufe 1–4 scheitern (absolute Ankerung mit %-Breite + gemischter vh/vw-Rechnung). --- */ .t1-hero .t1-hero-house{ position:absolute;left:-2.3%;top:calc(60vh - 31.7vw);width:106%;max-width:none;margin:0; transform-origin:49.3% 100%;pointer-events:none;z-index:1;opacity:1; } .t1-hero .t1-hero-house img{width:100%;height:auto;display:block;border-radius:0;box-shadow:none;filter:none} /* --- FRE-Choreografie (User 27.08.): Logo baut sich als Kontur auf, wird zur Maske, Maske blendet aus --- .t1-hero-composite = Kopie des Hauses (identisch positioniert/animiert), per Logo-SVG maskiert (mask-image), .t1-hero-logo = Inline-SVG des Header-Logos (Logo-RGB.svg), Konturen in Markenfarben (Weiß wäre auf der hellen Fassade unsichtbar), stroke-dashoffset per GSAP von Pfadlänge -> 0. Beide mittig (50 %/50 %), gleiche Breite --t1-logo-w -> Kontur und Maske liegen deckungsgleich. --- */ .t1-hero{--t1-logo-w:min(66vw,1040px)} .t1-hero .t1-hero-fx{margin:0} .t1-hero .t1-hero-composite{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0; -webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320.45%2059.88%22%3E%3Cpath%20fill=%22black%22%20d=%22M16.13,58.13c2.34-.58,3.34-2,3.34-9.68V1.75h-5.76C6.2,1.75,3.37,3.75.87,9.09l-.75-.17L.62.66h42.28l.5,8.26-.75.17c-2.5-5.34-5.34-7.34-12.84-7.34h-5.59v46.7c0,7.68,1,9.1,3.34,9.68v.92h-11.43v-.92Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M49.74,58.13c2.34-.58,3.34-2,3.34-9.68V11.26c0-7.68-1-9.1-3.34-9.68v-.92h11.34v.92c-2.33.58-3.33,2-3.33,9.68v16.26h34.68V11.26c0-7.68-1-9.1-3.32-9.68v-.92h11.34v.92c-2.33.58-3.34,2-3.34,9.68v37.19c0,7.68,1.01,9.1,3.34,9.68v.92h-11.34v-.92c2.32-.58,3.32-2,3.32-9.68v-19.76h-34.68v19.76c0,7.68,1,9.1,3.33,9.68v.92h-11.34v-.92Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M109.62,59.05v-.92c2.34-.57,3.34-2,3.34-9.67V11.26c0-7.67-1-9.09-3.34-9.68v-.91h37.45l1,9.92-.76.17c-2.58-6.5-7.16-9-14.67-9h-15.01v25.68h13.67c8.68,0,10.51-1.92,11.18-5h.92v11.09h-.92c-.67-3.09-2.5-5.01-11.18-5.01h-13.67v26.11c0,2.17,1.16,3.34,3.33,3.34h13.93c7.51,0,11.92-2.01,14.68-9.01l.74.16-.74,9.93h-39.95Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M212.21,34.43c0-17-11.76-32.85-27.36-32.85-14.09,0-22.53,10.09-22.53,23.87,0,16.83,11.44,32.85,27.12,32.85,14.01,0,22.77-9.68,22.77-23.87M157.83,29.94c0-17.68,11.76-29.94,29.44-29.94,14.1,0,29.35,9.67,29.35,30.11s-15.34,29.77-29.35,29.77-29.44-9.51-29.44-29.94%22/%3E%3Cpath%20fill=%22black%22%20d=%22M227.64,6.75v40.19c0,8.69,1.92,10.52,5,11.19v.91h-9.59v-.91c2.34-.59,3.34-2,3.34-9.69V11.24c0-7.66-1.34-9.08-4.34-9.66v-.92h6.92l37.86,50.8V12.76c0-8.68-1.91-10.5-5-11.18v-.92h9.6v.92c-2.34.58-3.34,2-3.34,9.66v48.47h-1.08L227.64,6.75Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M279.76,59.05v-.92c2.34-.57,3.34-2,3.34-9.67V11.26c0-7.67-1-9.09-3.34-9.68v-.91h37.45l1,9.92-.76.17c-2.58-6.5-7.16-9-14.67-9h-15.01v25.68h13.67c8.68,0,10.51-1.92,11.18-5h.92v11.09h-.92c-.67-3.09-2.5-5.01-11.18-5.01h-13.67v26.11c0,2.17,1.17,3.34,3.33,3.34h13.93c7.51,0,11.92-2.01,14.68-9.01l.74.16-.74,9.93h-39.95Z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20320.45%2059.88%22%3E%3Cpath%20fill=%22black%22%20d=%22M16.13,58.13c2.34-.58,3.34-2,3.34-9.68V1.75h-5.76C6.2,1.75,3.37,3.75.87,9.09l-.75-.17L.62.66h42.28l.5,8.26-.75.17c-2.5-5.34-5.34-7.34-12.84-7.34h-5.59v46.7c0,7.68,1,9.1,3.34,9.68v.92h-11.43v-.92Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M49.74,58.13c2.34-.58,3.34-2,3.34-9.68V11.26c0-7.68-1-9.1-3.34-9.68v-.92h11.34v.92c-2.33.58-3.33,2-3.33,9.68v16.26h34.68V11.26c0-7.68-1-9.1-3.32-9.68v-.92h11.34v.92c-2.33.58-3.34,2-3.34,9.68v37.19c0,7.68,1.01,9.1,3.34,9.68v.92h-11.34v-.92c2.32-.58,3.32-2,3.32-9.68v-19.76h-34.68v19.76c0,7.68,1,9.1,3.33,9.68v.92h-11.34v-.92Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M109.62,59.05v-.92c2.34-.57,3.34-2,3.34-9.67V11.26c0-7.67-1-9.09-3.34-9.68v-.91h37.45l1,9.92-.76.17c-2.58-6.5-7.16-9-14.67-9h-15.01v25.68h13.67c8.68,0,10.51-1.92,11.18-5h.92v11.09h-.92c-.67-3.09-2.5-5.01-11.18-5.01h-13.67v26.11c0,2.17,1.16,3.34,3.33,3.34h13.93c7.51,0,11.92-2.01,14.68-9.01l.74.16-.74,9.93h-39.95Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M212.21,34.43c0-17-11.76-32.85-27.36-32.85-14.09,0-22.53,10.09-22.53,23.87,0,16.83,11.44,32.85,27.12,32.85,14.01,0,22.77-9.68,22.77-23.87M157.83,29.94c0-17.68,11.76-29.94,29.44-29.94,14.1,0,29.35,9.67,29.35,30.11s-15.34,29.77-29.35,29.77-29.44-9.51-29.44-29.94%22/%3E%3Cpath%20fill=%22black%22%20d=%22M227.64,6.75v40.19c0,8.69,1.92,10.52,5,11.19v.91h-9.59v-.91c2.34-.59,3.34-2,3.34-9.69V11.24c0-7.66-1.34-9.08-4.34-9.66v-.92h6.92l37.86,50.8V12.76c0-8.68-1.91-10.5-5-11.18v-.92h9.6v.92c-2.34.58-3.34,2-3.34,9.66v48.47h-1.08L227.64,6.75Z%22/%3E%3Cpath%20fill=%22black%22%20d=%22M279.76,59.05v-.92c2.34-.57,3.34-2,3.34-9.67V11.26c0-7.67-1-9.09-3.34-9.68v-.91h37.45l1,9.92-.76.17c-2.58-6.5-7.16-9-14.67-9h-15.01v25.68h13.67c8.68,0,10.51-1.92,11.18-5h.92v11.09h-.92c-.67-3.09-2.5-5.01-11.18-5.01h-13.67v26.11c0,2.17,1.17,3.34,3.33,3.34h13.93c7.51,0,11.92-2.01,14.68-9.01l.74.16-.74,9.93h-39.95Z%22/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:50% 50%;mask-position:50% 50%; -webkit-mask-size:var(--t1-logo-w) auto;mask-size:var(--t1-logo-w) auto} .t1-hero .t1-hero-composite .t1-hero-house2{position:absolute;left:-2.3%;top:calc(60vh - 31.7vw);width:106%;max-width:none;height:auto;display:block; transform-origin:49.3% 100%;border-radius:0} /* muss exakt auf .t1-hero-house liegen */ .t1-hero .t1-hero-logo{position:absolute;left:50%;top:50%;width:var(--t1-logo-w);transform:translate(-50%,-50%);z-index:3;pointer-events:none;opacity:0} .t1-hero .t1-hero-logo svg{display:block;width:100%;height:auto;overflow:visible} .t1-hero .t1-lp{fill:none;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round} .t1-hero .t1-lp-ink{stroke:var(--t1-ink)} .t1-hero .t1-lp-acc{stroke:#B0714E} html:not(.t1-js) .t1-hero .t1-hero-fx,html.t1-reduced .t1-hero .t1-hero-fx{display:none} /* --- Startzustand Claim nur mit JS (kein FOUC ohne Skript) --------------- */ html.t1-js:not(.t1-reduced) .t1-hero .t1-hero-claim{opacity:0;filter:blur(12px)} /* (Burger/Vollbild-Menü: siehe 05-header.css – vorige Version 1:1) */ /* --- Mobil: Haus über die Viewportbreite hinaus (Baukörper ≈ 94 %, Bildkanten hinter dem Rand), Dachkante wie am Desktop auf 60 vh, Bildunterkante unter dem Viewport; Claim ≤ 44px, kein Pin, keine Maske. 27.08.: Breite 130 % -> 170 %, weil der neue Ausschnitt den vollen Rahmen zeigt (Baukörper nur 71,6 % der Bildbreite statt 73 % bei fast doppelter Bildhöhe). 50,8vw = 32,5 % der Bildhöhe bei 170 % Breite (170/1,0875 = 156 % der Breite). --- */ @media (max-width:959px){ .t1-hero .t1-hero-copy{padding-top:13vh} .t1-hero .t1-hero-house, .t1-hero .t1-hero-composite .t1-hero-house2{width:170%;left:-33.8%;top:calc(60vh - 50.8vw);bottom:auto} .t1-hero .t1-h1.t1-hero-claim{font-size:44px} /* 27.08. (User): Logo-Kontur und Masken-Ebene laufen jetzt auch mobil (10-hero.js). Die Kopie des Hauses MUSS dieselbe Geometrie haben wie das Haus, sonst springt der Tausch. Wortmarke breiter als am Desktop (66vw wären auf dem Handy zu klein). */ .t1-hero{--t1-logo-w:min(84vw,560px)} /* Maske und Kontur tiefer als am Desktop: mobil steigt das Haus kaum (das Bild endet knapp unter der Falz), die Fassade liegt deshalb erst ab ~57 % Höhe. Auf 50 % wären die Buchstaben mit Himmel gefüllt – gemessen: Fassade 477…810 px bei 844 vh, die Wortmarke ist 61 px hoch, Mitte auf 72 % trifft sie mittig. */ .t1-hero .t1-hero-composite{-webkit-mask-position:50% 72%;mask-position:50% 72%} .t1-hero .t1-hero-logo{top:72%} } /* ===== V2: 11-home-rest.css ===== */ /* --------------------------------------------------------------------- THE ONE V2 – Home, Sektionen 2–6 (Kennzahlen, Projekt, Lage, Kapitalanlage, CTA). uikit-first: Abstände/Breiten/Ausrichtung/Hintergrund nativ (padding_*, width, column_gap collapse, maxwidth, block_align, text_align, style secondary, image). Hier nur Stufe 6: Marker-Raster in Prozent (kein uk-width-Bruch trifft 43,32 %), aspect-ratio, negative Überlappung des Ink-Panels, Ink-Overlay über Foto, helle Register auf Ink, die 00-base für .uk-light nicht abdeckt. Gescopt auf .t1-home-* --------------------------------------------------- */ /* --- Marker-Raster exakt nach bar.md §4 (Label x=76, Inhalt 634–1364 bei 1440) --- */ @media (min-width:1200px){ .t1-home-sec>.uk-container{max-width:1288px;padding-left:76px;padding-right:76px} } @media (min-width:960px){ .t1-home-row>.t1-home-l{width:43.32%;padding-right:40px} .t1-home-row>.t1-home-r{width:56.68%} } @media (max-width:959px){.t1-home-row>.t1-home-r{margin-top:32px}} /* --- Blockabstand innerhalb einer Sektion (Text → Bildpaar): uk-margin-xlarge endet bei 140 --- */ .t1-home-sec .uk-grid.t1-home-gap{margin-top:120px} @media (max-width:959px){.t1-home-sec .uk-grid.t1-home-gap{margin-top:64px}} /* --- Bilder: gleiche Höhe, randscharf (object-fit = uk-object-cover; aspect-ratio hat UIkit nicht) --- */ .t1-home-projekt .t1-fig img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block} .t1-home-kapital .t1-people img{display:block;aspect-ratio:1/1;object-fit:cover} /* --- Kennzahlen: direkt nach dem Hero, Werte nicht umbrechen ------------- */ .t1-home-stats .t1-stat-value{white-space:nowrap} @media (max-width:639px){ .t1-home-stats .t1-stats{grid-template-columns:1fr} .t1-home-stats .t1-stats>*{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--t1-hair)} .t1-home-stats .t1-stats>*:first-child{border-top:0} } /* --- Lage (Runde 2, Craft-Kritik): randloser Hell/Dunkel-Wechsel statt Kasten. Bild = eigene Sektion, vollbreit 0–1440 (t1-full, padding none); direkt darunter die Ink-Sektion (style secondary, 0–1440, kein Papierrand). Innen Marker-Raster (bar.md §4/§7): links bei x≈76 Marker · Erklärung · Textlink · Bildunterschrift unten; rechts ab 44 % Riesenwort „München." ≥ 200 px und H2. Column-Wrapper + Panel als Flex-Spalte, damit die Caption unten steht. --- */ .t1-home-lage-img .t1-lage-img img{aspect-ratio:21/9;object-fit:cover;width:100%;display:block} /* 27.08. (User): Skyline (Bild-ID 461, 8184×3491 ≈ 21:9, passt ohne Beschnitt) läuft unten in die Ink-Sektion aus – kein harter Schnitt zwischen Foto und dunklem Element. Mehrstufig, damit die Rampe auf großen Flächen nicht bandet; deckend erst auf der letzten Zeile, dort trifft sie exakt den Sektionsgrund #263032. */ .t1-home-lage-img{position:relative} .t1-home-lage-img::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none; background:linear-gradient(to bottom, rgba(38,48,50,0) 0%, rgba(38,48,50,.16) 34%, rgba(38,48,50,.46) 60%, rgba(38,48,50,.78) 80%, var(--t1-ink) 100%); } /* Makrokarte unter der H2 (Ink-Fassung, Bild-ID 462): satzbreit, randscharf, ohne Schatten */ .t1-home-lage .t1-lp-map img{width:100%;display:block;border-radius:0} .t1-home-lage .t1-lp-map{max-width:760px} .t1-home-lage .t1-lage-l,.t1-home-lage .t1-lage-l>.uk-panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0} .t1-home-lage .t1-lp-copy{margin-top:40px} .t1-home-lage .t1-lp-cap{margin-top:auto;padding-top:56px} /* 27.08. nicht mehr im Layout, Regel bleibt für den Fall der Rückkehr */ /* 27.08. (User): Bildunterschrift ist raus. Sie war der bodenverankerte Abschluss der Spalte – ohne sie verteilt der Flex-Container (Zeile oben: flex:1 1 auto) die Restfläche auf Copy und Textlink und schiebt den Link ins Nichts. Also nicht wachsen lassen: Inhalt steht oben, der Link folgt direkt auf den Text. */ .t1-home-lage .t1-lage-l>.uk-panel{flex:0 0 auto} .t1-home-lage .t1-lp-cap .t1-caption{max-width:22em;color:#fff;opacity:.62} .t1-home-lage .t1-lp-giant{line-height:1;white-space:nowrap;letter-spacing:-.06em;font-size:clamp(72px,13.9vw,200px);margin:-.06em 0 0 -.04em} .t1-home-lage .t1-lp-h2{margin-top:64px} /* 27.08. (User): 96 -> 64 px. Der Parallax des Riesenworts läuft gemessen nur nach OBEN (transform y −60…0), bewegt sich also stets von der H2 weg — der Puffer musste nie ±60 abdecken. Enger als ~56 px nicht gehen, sonst berührt die Unterlänge von „München." die Zeile. */ .t1-home-lage .t1-lage-r{overflow:visible} .t1-home-lage .t1-copy{color:rgba(255,255,255,.82)} .t1-home-lage .t1-dim{color:var(--t1-sage)} .t1-home-lage .t1-link{color:#fff} .t1-home-lage .t1-link:hover{color:var(--t1-accent-tint)} @media (max-width:959px){ .t1-home-lage .t1-lage-row{display:flex;flex-direction:column} .t1-home-lage .t1-lage-row>.t1-lage-r{order:-1;margin-top:0} .t1-home-lage .t1-lage-row>.t1-lage-l{margin-top:32px} .t1-home-lage .t1-lp-giant{font-size:clamp(56px,17vw,120px);margin:0} .t1-home-lage .t1-lp-h2{margin-top:56px} /* 27.08.: mobil im gleichen Verhältnis mit hochgezogen */ .t1-home-lage .t1-lp-copy{margin-top:24px} .t1-home-lage .t1-lp-cap{padding-top:40px} } /* --- Kapitalanlage: Label über den Schritten auf gleicher Höhe wie die H2-Oberkante --- */ .t1-home-kapital .t1-label{opacity:.72} .t1-home-kapital .t1-steps .t1-line .t1-dim{color:var(--t1-sage)} /* --- CTA-Band: Foto dunkel überlagert (FRE), Inhalt darüber ------------------ Pills: theme.css setzt auf .uk-section-secondary:not(.uk-preserve-color) (0,3,0) Primär = Weiß/Ink und schlägt damit 00-base (0,2,0). Hier gleiche Spezifität, spätere Quelle: Primär Terracotta/Weiß, Sekundär Outline Weiß (design-system.md §Buttons). */ .t1-home-cta.uk-light .uk-button-primary{background:var(--t1-accent);color:#fff;border-color:var(--t1-accent)} .t1-home-cta.uk-light .uk-button-primary:hover,.t1-home-cta.uk-light .uk-button-primary:focus-visible{background:var(--t1-accent-dark);border-color:var(--t1-accent-dark);color:#fff} .t1-home-cta.uk-light .uk-button-default{background:transparent;color:#fff;border-color:#fff} .t1-home-cta.uk-light .uk-button-default:hover,.t1-home-cta.uk-light .uk-button-default:focus-visible{background:#fff;color:var(--t1-ink);border-color:#fff} .t1-home-cta .uk-button{opacity:1} /* YOOtheme legt das Hintergrundbild auf den INNEREN .uk-section-Div (Wrapper #expose ist nur Klassenträger) – Overlay deshalb dort, Inhalt (uk-container) darüber. */ .t1-home-cta>.uk-section{position:relative} .t1-home-cta>.uk-section::before{content:"";position:absolute;inset:0;background:rgba(38,48,50,.86);pointer-events:none;z-index:0} .t1-home-cta .uk-container{position:relative;z-index:1} .t1-home-cta .t1-display,.t1-home-cta .t1-sub{color:#fff} .t1-home-cta .t1-dim{color:var(--t1-sage)} .t1-home-cta .t1-sub{font-weight:300} /* --- Zweiton-Endzustand statisch (ohne JS / reduced): Kern Ink bzw. Weiß, Rest Salbei --- */ .t1-home-sec .t1-two{color:var(--t1-ink)} .t1-home-sec .t1-copy.t1-two{color:var(--t1-text)} .t1-home-sec .uk-light .t1-two,.t1-home-cta .t1-two{color:#fff} .t1-home-sec .t1-two .t1-w{transition:none} /* Wörter springen (steps), keine Mischtöne */ /* Sternchen-Fußnote unter den Kennzahlen: eine schmale uk-text-small-Zeile (User 27.08.) */ .t1-fn{margin:0;color:var(--t1-ink);opacity:.72;line-height:1.5} /* ===== 02.09. (User: "auf der Home soll das DWV-Logo animiert werden – zuerst nur das DWV-Logo groesser, dann laufen die Striche nach unten zu den anderen Logos"): Grafik ist jetzt Inline-SVG (js/14-home-dwv.js), damit Marke, Linien und Logos einzeln ansprechbar sind. aspect-ratio fixiert die Box: der viewBox faehrt von der Marke auf die ganze Gruppe auf, ohne dass die Seite dabei springt. Ohne JS/bei reduzierter Bewegung bleibt alles sichtbar. */ .t1-dwv{max-width:560px} .t1-dwv-svg{display:block;width:100%;height:auto;aspect-ratio:141.73/58} .t1-dwv-svg.is-anim .dwv-mark,.t1-dwv-svg.is-anim .dwv-lines,.t1-dwv-svg.is-anim .dwv-logo{opacity:0} @media (max-width:959px){.t1-dwv{max-width:420px}} /* ===== 02.09. (User: „nimm die Hintergrundfarbe von das-projekt 03 Energiekonzept"): Der Bauherr laeuft auf demselben nativen Stil wie dort - YOOthemes „muted" und damit --t1-fond (#DEDCD1), gesetzt als props.style im Layout, nicht per CSS. Zwischenstand Salbei (#A6A392) ist damit hinfaellig, ebenso die dortige .t1-dim-Ausnahme: auf Fond bleibt der zurueck- genommene Text im normalen Salbei, genau wie im Energiekonzept auf „Das Projekt". */ /* ===== V2: 12-home-video.css ===== */ /* THE ONE V2 – Video-Sektion nach dem Hero (FRE: satzbreites, randscharfes Ambient-Video) */ .t1-home-video video,.t1-home-video .el-video{display:block;width:100%;height:auto;border-radius:0;box-shadow:none} .t1-home-video .el-video{aspect-ratio:16/9;object-fit:cover;background:var(--t1-fond)} .t1-video video{display:block;width:100%;height:auto;border-radius:0;box-shadow:none} /* 27.08. (User): Video-Sektion überlappt das Hero-Ende wie bei FRE – schiebt sich während der Masken-Ausblendung von unten über den gepinnten Hero, damit zwischen Ausblendung und Videostart kaum Leerweg liegt. 27.08. später (User: "mobil ist der Abstand zum Video fast der ganze Bildschirm"): Gate min-width:960px entfernt. Ohne die Überlappung ist der Hero am Pin-Ende leer (Haus aus, Maske aus) und dieser leere Himmel muss erst ganz durchscrollen – auf dem Handy also ein Screen Nichts. Mit -40vh tritt die Oberkante des Videos bei ~0,83 der Pin-Strecke in den Viewport, genau wenn die Maske ausblendet, und steht am Pin-Ende auf 60 % Höhe – dasselbe Verhältnis wie am Desktop. Nebeneffekt, erwünscht: 13-home-sky.js liest den negativen Rand und legt die Naht des Himmel-Auslaufs damit auch mobil auf die Hero-Unterkante (Übergabe bei 60 %, wie im CSS). */ html.t1-js:not(.t1-reduced) #video{margin-top:-40vh;position:relative;z-index:3} /* 01.09.: Steckt das Video in der Pin-Gruppe .t1-vk (12-home-video.js), traegt der WRAPPER die Ueberlappung - liegt sie am ersten Kind, wandert sie per Margin-Collapsing an der Gruppe vorbei und der Pin sitzt falsch. 13-home-sky.js liest den Wert fuer die Naht des Himmel-Auslaufs deshalb zuerst an .t1-vk. */ html.t1-js:not(.t1-reduced) .t1-vk{margin-top:-40vh;position:relative;z-index:3} html.t1-js:not(.t1-reduced) .t1-vk > #video{margin-top:0} /* Mobil mehr Überlappung: der Bildschirm ist hoch, 40vh liessen am Pin-Ende noch 60 % leeren Himmel stehen. Mit 70vh sind es 30 %. Dazu blendet 10-hero.js die Maske mobil früher aus (0,70 statt 0,84), damit die Videokante nie durch die sichtbare Wortmarke schneidet: sie erreicht deren Unterkante erst bei 0,81 (Maske dann bei ~0,2) und die Oberkante bei 0,84 (Maske 0). */ @media (max-width:959px){ html.t1-js:not(.t1-reduced) #video{margin-top:-70vh} html.t1-js:not(.t1-reduced) .t1-vk{margin-top:-70vh} } html.t1-js:not(.t1-reduced) #video.uk-section{padding-top:48px!important} /* statt 160 px: Video folgt direkt auf die Masken-Ausblendung */ /* halber Abstand zum Kennzahlen-Balken. Der Abstand kommt komplett aus diesem padding-bottom – die Kennzahlen-Sektion selbst hat 0 (YOOtheme rendert bei padding_top:none ein uk-padding-remove-vertical, das BEIDE Seiten nullt). */ #video.uk-section{padding-bottom:80px} /* ===== 01.09. (User): Video + Kennzahlen halten als Gruppe mittig an ===== Die Gruppe war 1106 px hoch und passte auf keinen ueblichen Schirm (1440x900: +206 px, 1366x768: +294 px). Zwei Eingriffe, damit beides gleichzeitig im Bild steht: 1. Video-Paddings von 48/80 auf 24/24 - nur ab 960 px, mobil bleibt die Staffelung. 2. Das Video wird nur so hoch, wie nach Paddings und Kennzahlen uebrig ist. width:auto ist dabei entscheidend: mit width:100% wuerde max-height die Box flacher machen, waehrend die Breite steht - object-fit:cover schnitte das Bild oben und unten an statt es zu verkleinern. So schrumpft es proportional und sitzt mittig mit Papier an den Seiten. --t1-vk-rest setzt 12-home-video.js aus den echten Paddings und der gemessenen Kennzahlenhoehe; 192px ist nur der Rueckfall. */ @media (min-width:960px){ /* 01.09. Nachtrag (User: "der Hintergrund ist falsch, der Gradient ist verrutscht"): Das Video ist von der Containerbreite begrenzt (max-width 1288 px) und kann die Resthoehe hoher Fenster nicht nutzen - die Gruppe war dort KLEINER als der Bildschirm (gemessen 1268x1273: 813 px Gruppe, je 230 px Luecke oben und unten; 1512x1400: je 242 px). In den Luecken scheint der Seitengrund durch, und weil die Gruppe steht und die Seite scrollt, wandert die Rampe dahinter - das waren die Streifen. Also faellt die Gruppe auf voller Bildschirmhoehe aus und die Video-Sektion nimmt den Rest auf. Damit malt ihr Hintergrund (die beiden Rampen-Ebenen in 13-home-sky.css) bis an beide Bildschirmkanten und es gibt keine Luecke mehr. Bei 900 px Hoehe aendert sich nichts, dort war die Gruppe schon genau bildschirmhoch. */ /* 01.09. (3. Nachtrag, User: "die vier Fakten wieder direkt unter dem Video mit nur 70 px Abstand"): Die Video-Sektion wird NICHT mehr gestreckt - sie behaelt ihre natuerliche Hoehe und 70 px Abstand zu den Kennzahlen. Den Rest der Bildschirmhoehe nimmt der WRAPPER auf und zentriert die Gruppe darin. Der uebrige Raum liegt damit im Wrapper, nicht in einer Sektion - und wird von dessen eigenem Verlauf bemalt (13-home-sky.css, .t1-vk.t1-fest). Das ersetzt das bisherige Flicken pro Sektion: im Halt malt EIN Element EINE durchgehende Rampe. */ html.t1-js:not(.t1-reduced) .t1-vk{min-height:100vh;display:flex;flex-direction:column;justify-content:center} html.t1-js:not(.t1-reduced) .t1-vk > #video.uk-section{padding-top:24px!important;padding-bottom:70px} /* Die Hoehenbegrenzung ist als BREITEN-Grenze formuliert - ueber das 16:9 der Quelle (1920x1080) zurueckgerechnet. Grund: mit width:auto + max-height greift die Container- breite statt der Sektionsbreite, das Video schrumpfte auf hohen Schirmen unnoetig von 1440x810 auf 1288x725. So bleibt width:100% wirksam, solange Platz ist, und erst wenn der Schirm flach wird, zieht max-width die Breite (und damit die Hoehe) zurueck. 1080 hoch: (1080-192)*16/9 = 1578 -> breiter als die Sektion, also 1440x810 unveraendert 900 hoch: (900-192)*16/9 = 1259 -> 1259x708 768 hoch: (768-189)*16/9 = 1029 -> 1029x579 */ html.t1-js:not(.t1-reduced) .t1-vk #video video{ width:100%;height:auto; max-width:calc((100vh - var(--t1-vk-rest,192px)) * 16 / 9); margin-left:auto;margin-right:auto} } /* ===== V2: 13-home-sky.css ===== */ /* --------------------------------------------------------------------- THE ONE V2 – Home: der Himmel läuft bis über die Projekt-Headline aus (User 27.08.: „der Verlauf soll erst enden über der Überschrift ‚Weniger Fläche, mehr Lebensqualität.'") Vorher: die Video-Sektion (12-home-video.css: margin-top:-40vh, Papier, z-index:3) schob sich über den Hero und schnitt den Himmel bei 60 % der Rampe hart ab – mitten im Terracotta. Jetzt zwei Abschnitte, farbgleich an der Naht: 1. Hero zeigt 0 … --t1-sky-cut (60 %) seiner Rampe. Dazu wird die Rampe per background-size auf 100 %/0.6 gestreckt – die Unterkante des Heros trifft damit genau den 60-%-Punkt (Ton --t1-sky-seam). 2. Ab Hero-Unterkante trägt jede der drei folgenden Sektionen dieselbe Fortsetzung: EIN Verlauf --t1-sky-seam -> --t1-sky-d, dessen Kasten in Dokumentkoordinaten an der Hero-Unterkante beginnt und 48 px über der Headline endet. Höhe und Versatz je Sektion misst 13-home-sky.js. Warum an den Sektionen und nicht an einem eigenen Streifen: die Video-Sektion ist z-index:3 (sie schiebt sich über den gepinnten Hero) und überdeckt damit jede tiefer liegende Ebene. Ein z-index:-1-Streifen war in der ersten Fassung komplett unsichtbar. Als Sektions-Hintergrund malt der Verlauf dagegen in der normalen Ebene – ohne Stapel-Tricks. `background-repeat:no-repeat` sorgt dafür, dass oberhalb des Kastens (Video-Sektion überlappt den Hero) nichts liegt: dort bleibt der Hero-Himmel sichtbar. Alles hängt an .t1-sky-host, das 13-home-sky.js erst setzt, wenn es gemessen hat: ohne JS bleibt die Seite exakt wie vorher. uikit-first: Stufe 1–5 scheitern (ein Verlauf über Sektionsgrenzen hinweg, gemessene Geometrie) – Stufe 6, eng gescopt. Versioniert: yootheme/v2/css/13-home-sky.css --------------------------------------------------------------------- */ /* Übergabepunkt – die beiden Werte gehören zusammen: --t1-sky-seam IST der Ton der Hero-Rampe bei --t1-sky-cut (60 %: zwischen #E8CCBE bei 58 % und --t1-sky-d bei 100 %). Wer den Anteil ändert, ändert auch den Ton. */ .t1-sky-host{--t1-sky-cut:.6;--t1-sky-seam:#E9CDBF} .t1-sky-host .t1-hero, .t1-sky-host .t1-hero::before{background-size:100% calc(100% / var(--t1-sky-cut,.6))} .t1-sky-host #video.uk-section-default, .t1-sky-host .t1-home-stats.uk-section-default, .t1-sky-host .t1-home-projekt.uk-section-default{ background-color:transparent; background-image:linear-gradient(180deg,var(--t1-sky-seam) 0%,var(--t1-sky-d) 100%); background-repeat:no-repeat; background-size:100% var(--t1-sky-tail-h,0px); background-position:0 var(--t1-sky-tail-y,0px); } /* ===== 01.09.: In der Pin-Gruppe malt der WRAPPER die Rampe, nicht die Sektionen ===== Der Wrapper .t1-vk ist bildschirmhoch und zentriert Video + Kennzahlen darin (12-home-video.css). Der freie Raum ueber und unter der Gruppe liegt damit IM Wrapper - keine Sektion deckt ihn ab. Deshalb traegt der Wrapper die Rampe und die Sektionen darin sind transparent: ein Element, eine Rampe, keine Luecke, in jedem Zustand. Ebene 1 (Fortsetzung ab der Naht) liegt IMMER an. Sie deckt damit auch den Streifen unter den Kennzahlen ab - der war zuvor unbemalt und zeigte nach dem Halt den Seitengrund als Kante. Ebene 2 (Ersatz fuer den Hero oberhalb der Naht) nur im Halt. Davor muss der obere Bereich des Wrappers transparent bleiben: dort liegt er ueber dem Hero, dessen Logo-Maske noch ausblendet (gemessen bei progress 0,90 noch opacity 0,33). Deckend schnitt sie die Wortmarke waagerecht ab. Dass der freie Raum ueber der Gruppe immer INNERHALB dieser Ueberlappung liegt, garantiert die Zentrierung: (vh - Inhalt)/2 <= 0.4*vh gilt fuer jeden Inhalt - bei Ausrichtung an der Unterkante waere das ab ~1700 px Fensterhoehe nicht mehr wahr. Die Toene sind aus der Hero-Rampe gerechnet, nicht geschaetzt: sie ist #DEDCD1 -> #E1C1B5 30% -> #E8CCBE 58% -> #F6F4EF und auf vh/0.6 gestreckt. Die Ueberlappung von 40vh ist damit IMMER 24 % der Rampe (0.4*vh / (vh/0.6)) - unabhaengig von der Fenstergroesse also die Strecke 36 % bis zur Naht bei 60 %. Ton bei 36 %: #E2C3B7. max(0px, ...) ist Pflicht, nicht Kosmetik: nach dem Halt ist --t1-sky-tail-y NEGATIV (gemessen -244px, weil die Gruppe um die Pin-Strecke tiefer sitzt). Eine negative background-size ist unzulaessig - Chrome verwirft dann die GANZE Deklaration, beide Ebenen fallen auf 'auto' zurueck und fuellen die Flaeche in falscher Phase. Genau das passierte beim Hochscrollen in den Halt. */ html.t1-js:not(.t1-reduced) .t1-sky-host .t1-vk{ background-color:transparent; background-image:linear-gradient(180deg,var(--t1-sky-seam) 0%,var(--t1-sky-d) 100%); background-repeat:no-repeat; background-size:100% var(--t1-sky-tail-h,0px); background-position:0 var(--t1-sky-tail-y,0px); } html.t1-js:not(.t1-reduced) .t1-sky-host .t1-vk.t1-fest{ background-image: linear-gradient(180deg,var(--t1-sky-seam) 0%,var(--t1-sky-d) 100%), linear-gradient(180deg,#E2C3B7 0%,var(--t1-sky-seam) 100%); background-repeat:no-repeat,no-repeat; background-size:100% var(--t1-sky-tail-h,0px),100% max(0px, var(--t1-sky-tail-y,0px)); background-position:0 var(--t1-sky-tail-y,0px),0 0; } /* Sektionen in der Gruppe malen nicht mit - sonst legten sie ihre eigene Phase darueber. */ html.t1-js:not(.t1-reduced) .t1-sky-host .t1-vk > #video.uk-section-default, html.t1-js:not(.t1-reduced) .t1-sky-host .t1-vk > .t1-home-stats.uk-section-default{ background-image:none; } /* ===== V2: 20-projekt.css ===== */ /* --------------------------------------------------------------------- THE ONE V2 – Das Projekt (Seite 325). Gescopt auf .t1-pj-*. uikit-first: nur, was UIkit nicht kann – aspect-ratio (kein Pendant), grid-template-columns (kein Pendant), Typo-Register/letter-spacing, Haarlinien in Palette-Tokens, exakte Satzbreite/Spaltenmaße des Marker-Rasters (bar.md §4: Label x=76, Inhalt x=634–1364 – kein uk-width-Bruch trifft 43,3 %). object-fit steht hier nur, weil das von YOOtheme erzeugt wird und keine Klasse (uk-object-cover) annehmen kann – die Klassen-Prop landet auf dem Wrapper. --------------------------------------------------------------------- */ /* --- 01 Seiten-Intro (bar.md §0): Kicker, zentrierte H1, Zweiton-Lead, satzbreites randscharfes Bild – kein Haus, kein Pin. Breiten: uk-width-Stufen enden bei 500 px, Lead braucht ~760 px (Stufe 6). */ .t1-pj-intro .t1-pj-kicker{margin-bottom:28px} .t1-pj-intro .t1-pj-h1{font-size:clamp(40px,5.6vw,80px);max-width:16ch;margin-left:auto;margin-right:auto} .t1-pj-intro .t1-pj-lead{max-width:760px;margin-left:auto;margin-right:auto;text-align:center} .t1-pj-intro .t1-pj-intro-img{margin-top:72px} @media (min-width:960px){.t1-pj-intro .t1-pj-intro-img{margin-top:112px}} .t1-pj-intro .t1-pj-wide img{aspect-ratio:16/9} /* Weißraum Apartments -> Fotogrid ≥ 160 px (uk-margin-xlarge-top endet bei 140 px und trägt !important -> kein margin_top-Prop, Wert hier) */ .t1-pj-grid-first{margin-top:72px} @media (min-width:960px){.t1-pj-grid-first{margin-top:160px}} /* --- Satzbreite 1288 (76..1364 bei 1440): uk-container ist content-box -> max-width 1288 + 2×76 Padding = 1440. Unter 1200 gilt das native Container-Padding. */ @media (min-width:1200px){ .t1-pj-sec>.uk-container{max-width:1288px;padding-left:76px;padding-right:76px} } /* --- Marker-Raster: Gutter nativ kollabiert (column_gap collapse), Spalten 558/730 von 1288 */ @media (min-width:960px){ .t1-pj-row>.t1-pj-l{width:43.32%;padding-right:40px} .t1-pj-row>.t1-pj-r{width:56.68%} } @media (max-width:959px){ .t1-pj-row>.t1-pj-r{margin-top:32px} } /* Bildformate (randscharf, beschnitten) */ .t1-pj-wide img{width:100%;aspect-ratio:16/8;object-fit:cover} .t1-pj-roof img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 55%} .t1-pj-grid img{width:100%;aspect-ratio:1/1;object-fit:cover} .t1-pj-side{max-width:320px} /* Zweiton in der Copy: Rest in Ink 66 % (design-system: klein = Ink 62–72 %) */ .t1-pj-copy .t1-dim{color:rgba(38,48,50,.66)} /* --- 05 Mobilität (Papier, Figma 384:332): Kennzahlen-Band mit 3 Zellen – 00-base .t1-stats ist auf 4 Spalten gebaut (grid-template-columns: kein UIkit-Pendant), hier auf 3 gesetzt. */ .t1-pj-mobgrid{margin-top:64px} @media (min-width:960px){.t1-pj-mobgrid{margin-top:120px}} .t1-pj-stats{grid-template-columns:repeat(3,1fr)} .t1-pj-stats .t1-stat-value{font-size:clamp(48px,5vw,72px)} .t1-pj-stats .t1-stat-label{max-width:30em} @media (max-width:959px){.t1-pj-stats{grid-template-columns:1fr}.t1-pj-stats>*{border-left:0;padding-left:0}} /* Interview: Frage = h3 in Inter Medium 21px (Auftrag), Antwort Ink 72 %, Haarlinien dazwischen */ .t1-pj-q{font:500 21px/1.3 var(--t1-sans);letter-spacing:-.005em;color:var(--t1-ink);margin:0;padding-top:28px;border-top:1px solid var(--t1-hair)} .t1-pj-interview .t1-pj-q{margin-top:44px} .t1-pj-a{color:rgba(38,48,50,.72)} .t1-pj-a:last-child{padding-bottom:28px;border-bottom:1px solid var(--t1-hair)} /* Porträts nebeneinander in der Marker-Spalte */ .t1-pj-portraits{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-items:start;align-content:start} .t1-pj-portraits>.t1-marker{grid-column:1/-1} .t1-pj-portraits img{width:100%;aspect-ratio:1/1;object-fit:cover} /* Kapitalanlage (muted): Marker + Domicil-Bild links, H2/Lead/Steps ab 44 % rechts (bar.md §4) */ .t1-pj-invest .t1-pj-l .t1-pj-side{margin-top:32px} .t1-pj-invest .t1-pj-r .t1-pj-steps{margin-top:40px} .t1-pj-invest-steps .t1-steps .t1-line{font-size:clamp(17px,1.4vw,20px)} .t1-pj-note{max-width:34em} /* Seiten-CTA (Ink): Register weiß; Pill = Primär Terracotta (README), Stil aus 00-base */ .t1-pj-cta{border-top:1px solid var(--t1-hair-light)} .t1-pj-cta .t1-sub,.t1-pj-cta .t1-display{color:#fff} /* README: alle Headlines im Satzsatz – CTA-H2 „Grundrisse und Preisliste anfordern.“ */ .t1-pj-cta .t1-pj-cta-h{max-width:14ch;margin-left:auto;margin-right:auto} /* Lesbarkeit: Intro-Lead und CTA-Zeile breiter als uk-width-large/medium (500/400 px) – kein passender uk-width-Schritt */ .t1-pj-cta .t1-sub{width:auto;max-width:640px} /* Primär-Pill auf Ink: theme.css setzt .uk-section-secondary:not(.uk-preserve-color) .uk-button-primary auf Weiß (Spezifität 0,3,0) – hier gescopt überstimmt */ .t1-pj-cta.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary{background:var(--t1-accent);color:#fff;border-color:var(--t1-accent)} .t1-pj-cta.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:hover,.t1-pj-cta.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary:focus-visible{background:var(--t1-accent-dark);border-color:var(--t1-accent-dark);color:#fff} /* --- 04 Energiekonzept (style muted, Brief Rev. 2 / Kritik R2): Marker-Raster wie Kapitalanlage, kein Riesenwort. Nur Label-Abstand über der Liste (uk-margin-small-top = 10 px; hier 16 px). */ .t1-pj-energie .t1-label{margin-bottom:16px} /* --- 05a Architektur-Opener (Runde 4, Craft-Kritik R3 / bar.md §7): randlose Ink-Sektion mit Riesenwort. Marker bei x=76, Erklärung ab 44 % (x=634), darunter – durch 1-px-Haarlinien getrennt – das Riesenwort „Entwurf.“ ≥ 200 px im Leichtschnitt, Satzsatz, rechtsbündig bis 1364 (data-t1-parallax aus 01-core). Haarlinien in Palette-Token (kein UIkit-Pendant für 22 %-Weiß); Riesenwort-Größe/Laufweite = Typo-Register. */ .t1-pj-ink .t1-pj-ink-a{padding-bottom:56px;border-bottom:1px solid var(--t1-hair-light)} .t1-pj-ink .t1-pj-ink-b{padding-top:120px;padding-bottom:120px;border-bottom:1px solid var(--t1-hair-light)} /* Parallax ±60 px darf die Haarlinien nie berühren */ .t1-pj-ink .t1-pj-ink-copy .t1-copy{color:rgba(255,255,255,.82);max-width:34em;margin:0} .t1-pj-ink .t1-pj-ink-copy .t1-dim{color:var(--t1-sage)} .t1-pj-ink .t1-pj-giant{color:#fff;font-weight:300;line-height:1;white-space:nowrap;letter-spacing:-.02em;font-size:clamp(72px,15vw,216px);text-align:left;margin:0 0 0 -.03em} /* beginnt wie FRE „Buy“ bei x=634 */ .t1-pj-ink .t1-pj-r{overflow:visible} @media (max-width:959px){ .t1-pj-ink .t1-pj-ink-b{padding-top:88px;padding-bottom:88px} .t1-pj-ink .t1-pj-ink-b>.t1-pj-l{display:none} .t1-pj-ink .t1-pj-ink-b>.t1-pj-r{margin-top:0} .t1-pj-ink .t1-pj-giant{font-size:clamp(56px,18vw,120px);text-align:left} } /* --- Architektur: dunkle Eröffnungsbühne, hellt beim Scrollen zu Fond auf (User 26.08.) --- Ohne JS / reduced-motion: Fond-Grund, Text in Ink. Mit JS: Start Ink + Weiß, GSAP blendet gescrubbt (Desktop gepinnt ~70 % Viewport, mobil beim Herausscrollen der Bühne). */ .t1-pj-arch{background:var(--t1-fond);--t1-arch-fg:var(--t1-ink)} html.t1-js:not(.t1-reduced) .t1-pj-arch{background:var(--t1-ink);--t1-arch-fg:#fff} /* 02.09. (User: „oben und unten selber Abstand wie bei den anderen Punkten"): Die Buehne hatte min-height:min(60vh,620px) und zentrierten Inhalt - bei 900 px Viewport 540 px hoch bei ~242 px Inhalt, also 149 px zusaetzlich ueber dem Marker (gemessen 309 px bis zum Marker gegen 160 px in allen anderen Sektionen). Ohne Zusatzhoehe umschliesst die Buehne ihren Inhalt und die Sektion folgt dem 160-px-Rhythmus; der dunkle Grund und die Zentrierung der Zeilen bleiben. */ .t1-arch-stage{align-content:center} .t1-pj-arch .t1-arch-stage .t1-marker,.t1-pj-arch .t1-arch-stage .t1-marker-label,.t1-pj-arch .t1-arch-title{color:var(--t1-arch-fg)} .t1-pj-arch .t1-arch-title{font-size:clamp(40px,5.6vw,84px);line-height:1.2;letter-spacing:-.025em;margin:0;text-wrap:balance} .t1-pj-arch .uk-grid.t1-arch-body{margin-top:120px} /* 01.09. (User: „ein Abstand ist zu hoch"): Die Bühne stand mobil auf min-height:78vh (658 px) mit zentrierter Headline – zwischen Headline und Portraits klafften damit 313 px (241 px Bühnenrest + 72 px Body-Abstand), über der Headline nochmal 313 px. Der Grund für die Höhe war die Farbblende: der Interview-Fließtext steht immer in Ink und darf erst auftauchen, wenn der Grund hell ist. Das regelt jetzt der Trigger selbst (js/20-projekt.js: start 'top 88%' → end 'bottom 88%', also genau die Bühnenhöhe als Scrollweg) – die Höhe ist dafür nicht mehr zuständig und wird zu dem, was sie sein soll: Luft um die Headline. 88 px oben/unten + 56 px zum Body = 144 px statt 313 px. */ @media (max-width:959px){.t1-arch-stage{padding:0}.t1-pj-arch .uk-grid.t1-arch-body{margin-top:56px}} /* 02.09.: die 88 px Buehnen-Polster mobil ebenfalls raus - sonst 168 px statt der 80 px der anderen Sektionen */ .t1-pj-arch .t1-pj-portraits>*{margin-top:0!important} /* Portraits bündig (ohne Marker davor fehlt dem ersten Bild der uk-margin) */ /* ===== 02.09. (User): "mobil bei den Punkten 01 und 02 derselbe Abstand wie bei 03" ===== Bei 03 Energiekonzept liegt darueber das randlose Rooftop-Bild mit padding:0 - der Marker steht deshalb 80 px unter der Sektionskante. Bei 01 und 02 addierten sich zwei Paddings: gemessen 200 px ueber Marker 01 (Intro 120 + 80) und 160 px ueber Marker 02 (80 + 80). Loesung: mobil das UNTERE Padding der jeweils VORHERGEHENDEN Sektion auf 0. Die 80 px kommen dann - wie bei 03 - aus der Sektion selbst, und das Muster "Inhalt, 80 px, Marker" gilt fuer alle drei Punkte. Desktop bleibt unberuehrt. */ @media (max-width:959px){ #intro.t1-pj{padding-bottom:0} #apartments.t1-pj{padding-bottom:0} } /* ===== V2: 30-lage.css ===== */ /* --------------------------------------------------------------------- THE ONE V2 – Lage (Seite 327). Nur, was UIkit/native Props nicht können: Ebenen-Stapel (absolute Überlagerung), Haarlinien-Bänder, Slider-Schärfe, Stats auf Ink. Alles gescopt auf .t1-lage-* / .t1-… --------------------------------------------------------------------- */ /* --- Ebenen-Stapel (Luftbild + Fläche + Gebäude + Bildmarke) ----------- Runde 2: Grid statt absolute Positionierung – alle Ebenen liegen in derselben Grid-Zelle, damit sie am Inhaltsrand der Column (ohne uk-grid-Gutter) exakt übereinander liegen. Stufe 6: kein UIkit-Pendant für gestapelte Bildelemente. */ .t1-stack{display:grid;grid-template-columns:100%} .t1-stack .t1-layer{grid-area:1/1;margin:0;width:100%;min-width:0} .t1-stack .t1-layer img{width:100%;display:block} .t1-stack .t1-layer:not(.t1-layer-base){pointer-events:none;z-index:1} .t1-stack .t1-layer.t1-layer-label{align-self:start;justify-self:start;position:relative;top:27.5%;width:clamp(120px,24%,420px);margin-left:16%} /* top statt margin-top: uk-margin setzt margin-top !important */ .t1-stack .t1-layer.t1-layer-label-2{width:clamp(120px,22%,400px);margin-left:14%;top:30%} html.t1-js .t1-stack .t1-layer-area,html.t1-js .t1-stack .t1-layer-bldg,html.t1-js .t1-stack .t1-layer-label:not(.t1-layer-label-2){opacity:0} /* Bildmarke auf dem Anbindung-Luftbild steht sofort (kein Stapel-Aufbau nötig) */ html.t1-js.t1-reduced .t1-stack .t1-layer-area,html.t1-js.t1-reduced .t1-stack .t1-layer-bldg,html.t1-js.t1-reduced .t1-stack .t1-layer-label{opacity:1} /* --- Intro: Lead zentriert, Stapel unter dem Text ---------------------- */ .t1-lage-intro .t1-kicker{opacity:.72} /* --- Bildslots: gleiche Höhe, randscharf (object-fit hat UIkit: uk-object-cover – aspect-ratio nicht) */ .t1-fig img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block} .t1-lage-viertel .t1-caption{max-width:34em} /* --- Slider: Bilder randscharf, gleiche Höhe --------------------------- */ .t1-lage-slider img{border-radius:0;aspect-ratio:3/2;object-fit:cover;width:100%;display:block} /* Pfeile: YOOtheme setzt hier keine Positionsklasse → als Zeile rechts unter dem Slider (FRE-Muster); Punkt-Navigation bei 16 Bildern ausblenden (kein Prop greift). Stufe 6: internes Slider-Markup. */ .t1-lage-slider .uk-position-relative{text-align:right} .t1-lage-slider .uk-position-relative>.uk-position-medium{position:static;display:inline-block;margin:20px 0 0 18px} .t1-lage-slider .uk-position-relative>.uk-position-medium .uk-slidenav+.uk-slidenav{margin-left:10px} /* Runde 5: Pfeile im Pill-Register (bar.md §6: kein dritter Buttonstil) – Outline-Kreis, Pfeil statt Chevron. UIkit-Chevron-SVG hat keinen Icon-Prop (Stufe 6). */ .t1-lage-slider .uk-slidenav{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:38px;padding:0 18px;border:1px solid var(--t1-ink);border-radius:100px;color:var(--t1-ink);font:500 16px/1 var(--t1-sans);transition:background .3s,color .3s} .t1-lage-slider .uk-slidenav svg{display:none} .t1-lage-slider .uk-slidenav-previous::before{content:"\2190"} .t1-lage-slider .uk-slidenav-next::before{content:"\2192"} .t1-lage-slider .uk-slidenav:hover,.t1-lage-slider .uk-slidenav:focus-visible{background:var(--t1-ink);color:var(--t1-paper);outline:0} .t1-lage-slider .el-nav{display:none} /* --- Mikrolage: Karte satzbreit (eigene Row), Legende im Marker-Raster ---- */ .t1-map img{width:100%;display:block} .t1-legend img{max-width:100%;display:block} .t1-lage .uk-grid.t1-lage-mapgap{margin-top:56px} /* --- Bänder Anbindung: Kicker, Minuten im Haarlinien-Register ---------- */ .t1-bands{border-top:1px solid var(--t1-hair);border-bottom:1px solid var(--t1-hair);padding:40px 0} .t1-band .t1-kicker{margin:0 0 22px;opacity:.72;font-family:var(--t1-sans)} .t1-mins{list-style:none;margin:0;padding:0} .t1-mins>li{display:flex;align-items:baseline;gap:16px;margin:0 0 12px} .t1-mins .t1-stat-value{font-size:clamp(30px,2.8vw,42px);min-width:2.7em} .t1-mins .t1-stat-label{margin:0} @media (max-width:959px){.t1-bands{padding:24px 0}.t1-band+.t1-band{margin-top:32px}} /* --- Umland-/Autobahnkarte (Runde 2 Craft): im Marker-Raster der Anbindung-Sektion, satzbreit, randscharf. Die Datei 86 trägt eine eingebackene weiße Radial-Vignette auf Alpha; uk-blend-multiply (Stufe 1) löscht Weiß/Transparenz gegen den flachen Grund – übrig bleiben Straßen und Schrift. uk-blend-multiply landet aber am Wrapper (YOOtheme setzt die Klasse auf .el-image-Div, das den Fond-Grund trägt) und blendet dann Wrapper gegen Papier statt Bild gegen Fond – daher Stufe 6 direkt auf dem img. Grund Fond (uk-background-muted = alter Stil-Token). */ .t1-umland{background:var(--t1-fond)} .t1-umland img{width:100%;display:block;border-radius:0;mix-blend-mode:multiply} /* --- Luftbild 298 vollbreit INNERHALB der Marker-Sektion (Sollfolge: Bänder → Luftbild → Karte). Vollbreite aus dem Container heraus: kein UIkit-Pendant (uk-container-expand gilt nur für die ganze Sektion) → Stufe 6. */ .t1-lage .uk-grid.t1-bleed{width:100vw;margin-left:calc(50% - 50vw);padding-left:0} .t1-lage .uk-grid.t1-bleed>*{padding-left:0} .t1-lage-anbindung.uk-section{overflow-x:clip} /* 100vw + klassische Scrollbar darf keinen Horizontal-Scroll erzeugen */ /* --- Investment (Ink): Riesenwort, Stats hell, Menschenbild ----------- */ /* YOOtheme 5 setzt auf uk-section-secondary KEIN .uk-light (uk-inverse-Attribut) → die Ink-Sektionen tragen die UIkit-Klasse uk-light im class-Prop (Stufe 2), damit 00-base und die Zweiton-JS greifen. Ergänzend die Register, die 00-base für .uk-light nicht abdeckt (Stats, Caption, Copy). */ .t1-lage-invest .t1-muc{margin:0;white-space:nowrap;line-height:.9;opacity:.92;font-size:clamp(56px,14vw,200px)} .t1-lage-invest .t1-marker,.t1-lage-invest .t1-display,.t1-lage-invest .t1-giant,.t1-lage-invest .t1-sub, .t1-lage-invest .t1-stat-value,.t1-lage-invest .t1-stat-label,.t1-lage-invest .t1-caption{color:#fff} .t1-lage-invest .t1-copy{color:rgba(255,255,255,.82)} .t1-lage-invest .t1-dim{color:var(--t1-sage)} .t1-lage-invest .t1-stats{border-color:var(--t1-hair-light)} .t1-lage-invest .t1-stats>*{border-color:var(--t1-hair-light)} .t1-lage-invest .t1-stat-label{max-width:30em} .t1-people img{display:block} @media (max-width:959px){.t1-lage-invest .t1-muc{font-size:clamp(48px,13vw,120px);margin-bottom:.4em}} /* 01.09. (User: "Abstand mobil fixen"): war 48px fest */ /* --- Runde 5: CTA-Pill = primary (Terracotta), keine eigene Button-Typo (design-system: 500 / 0,01em aus 00-base). theme.css invertiert Primär-Buttons auf Ink-Sektionen (.uk-section-secondary:not(.uk-preserve-color) .uk-button-primary, 0,3,0 → weiß) – kein nativer Prop, kein UIkit-Pendant (uk-preserve-color würde die ganze Sektion entinvertieren). */ .t1-lage-cta.uk-section-secondary .uk-button-primary{background:var(--t1-accent);color:#fff;border-color:var(--t1-accent)} .t1-lage-cta.uk-section-secondary .uk-button-primary:hover,.t1-lage-cta.uk-section-secondary .uk-button-primary:focus-visible{background:var(--t1-accent-dark);border-color:var(--t1-accent-dark);color:#fff} /* --- Runde 2: Zweiton-Endzustand statisch (bar.md §3: Kern Ink, Rest Salbei) --- Ohne JS bzw. reduced-motion: Wörter vor .t1-dim erben Ink/Weiß, .t1-dim bleibt Salbei. */ .t1-lage-viertel .t1-two,.t1-lage-mikro .t1-two,.t1-lage-anbindung .t1-two,.t1-lage-intro .t1-two{color:var(--t1-ink)} .t1-lage-invest.uk-light .t1-two{color:#fff} .t1-lage-invest.uk-light .t1-two .t1-dim,.t1-lage-viertel .t1-dim,.t1-lage-mikro .t1-dim,.t1-lage-anbindung .t1-dim,.t1-lage-intro .t1-dim{color:var(--t1-sage)} /* --- Runde 2: Kennzahlen mobil einspaltig (Werte wie „40.800 €*" brachen um) --- */ @media (max-width:639px){ .t1-lage-invest .t1-stats{grid-template-columns:1fr} .t1-lage-invest .t1-stats>*{border-left:0;padding-left:0;padding-right:0;border-top:1px solid var(--t1-hair-light)} .t1-lage-invest .t1-stats>*:first-child{border-top:0} .t1-lage-invest .t1-stat-value{font-size:clamp(34px,10vw,44px);white-space:nowrap} } /* --- Runde 4: Marker-Raster exakt nach bar.md §4 (Label x=76, Inhalt 634–1364 bei 1440) --- uk-container ist content-box: max-width 1288 + 2×76 Padding = 1440. Spalten 558/730 von 1288 (43,32 / 56,68 %) – kein uk-width-Bruch trifft das (Stufe 1 gescheitert), Gutter nativ „collapse". Unter 1200 gilt das native Container-Padding, unter 960 stapeln die Spalten. */ @media (min-width:1200px){ .t1-lage-sec>.uk-container{max-width:1288px;padding-left:76px;padding-right:76px} } @media (min-width:960px){ .t1-lage-row>.t1-lage-l{width:43.32%;padding-right:40px} .t1-lage-row>.t1-lage-r{width:56.68%} } @media (max-width:959px){.t1-lage-row>.t1-lage-r{margin-top:32px}} /* --- Runde 4: Blockabstände ≥ 160 px (bar.md §4) – uk-margin-xlarge endet bei 140 px (Stufe 1 gescheitert) --- */ .t1-lage .uk-grid.t1-lage-gap{margin-top:160px} /* 0,3,0 > .uk-grid+.uk-grid (0,2,0) */ @media (max-width:959px){.t1-lage .uk-grid.t1-lage-gap{margin-top:96px}} /* Riesenwort → H2: Luft unter dem Riesenwort (Parallax ±60 px darf die Headline nicht berühren) */ /* 01.09. (User): Der Abstand unter dem Riesenwort war MOBIL groesser als am Desktop - gemessen 195 px bei 390 px Viewport gegen 148 px bei 1440 px, obwohl die Schrift dort ein Viertel der Groesse hat. Ursache waren zwei Festwerte: 56 px padding-bottom hier und 48 px margin-bottom in der Mobil-Regel oben. Beide jetzt in em - am Desktop bleibt es bei 0.28em x 200px = 56 px, mobil werden aus 50,7 px Schrift 14 px. */ .t1-lage-invest .t1-muc{padding-bottom:.28em} /* --- Runde 4: Zweiton ohne Zwischentöne (design-system: auf Ink nur Weiß/Salbei, kein Verlauf) --- Die Wörter springen (JS steps(1)) – der 250-ms-Farbübergang aus 00-base würde Mischwerte erzeugen. */ .t1-lage .t1-two .t1-w{transition:none} /* --- Bildstrecke als UIkit-Slider mit Texten unter den Bildern (26.08.) --- */ .t1-lage-gallery .t1-slide{margin:0} .t1-lage-gallery .t1-slide img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0} .t1-lage-gallery .t1-slide figcaption{padding-top:14px} .t1-lage-gallery .t1-slide-cap{margin:0;max-width:34em} .t1-gal-nav{display:flex;justify-content:flex-end;gap:10px;margin-top:24px} .t1-gal-btn{display:inline-flex;align-items:center;justify-content:center;min-width:64px;height:38px;padding:0 18px;border:1px solid var(--t1-ink);border-radius:100px;color:var(--t1-ink);font:500 16px/1 var(--t1-sans);text-decoration:none;transition:background .3s,color .3s,transform .3s} .t1-gal-btn:hover,.t1-gal-btn:focus-visible{background:var(--t1-ink);color:var(--t1-paper);outline:0;transform:scaleX(1.02)} /* --- Mikrolage: Karte kleiner, per Klick als Lightbox --- */ /* Mikrolage nach Figma (26.08.): Marker links (2/5), rechts 3/5 mit Headline, großer Karte in Spaltenbreite, Bildtext darunter */ @media (min-width:960px){ .t1-mikro-row>.t1-lage-l{width:40%;padding-right:40px} .t1-mikro-row>.t1-lage-r{width:60%} } .t1-lage-mikro .t1-mikro-karte{max-width:none;width:100%;cursor:zoom-in} .t1-lage-mikro .t1-mikro-karte img{width:100%} .t1-lage-mikro .t1-mikro-hint{margin-top:6px;opacity:.5} .t1-lage-mikro .t1-mikro-legend{max-width:460px} .t1-lage-mikro .t1-mikro-cap{max-width:44em} .t1-lage-mikro .t1-mikro-karte img{border-radius:0} /* --- Bänder: mehr Luft, Freisteller unten bündig (26.08.) --- */ .t1-bands{padding:56px 0 0} /* 01.09.: unten 0 - die _bes-Freisteller sind angeschnitten (Fussgaenger unten), sie muessen die untere Haarlinie beruehren, sonst schwebt die Schnittkante. Alle drei sind per margin-top:auto unten ausgerichtet, teilen also weiter eine Grundlinie. */ .t1-band{display:flex;flex-direction:column;padding:8px 8px 0} /* .t1-band = Flex-Item der Zeile; UIkit streckt auf gleiche Höhe */ .t1-band .t1-kicker{margin:0 0 30px} .t1-mins li{padding:6px 0} .t1-band .t1-band-fig{margin-top:auto!important;padding-top:48px;align-self:stretch;width:100%;max-width:100%} /* 01.09.: width:auto liess den Container per Shrink-to-fit auf 328 px einrasten (kein CSS-Deckel, sondern die Fit-content-Aufloesung des Flex-Items) - damit war max-height wirkungslos. Volle Spaltenbreite, die Groesse bestimmt allein das max-height am Bild. */ /* UIkit: *+.uk-margin{margin-top:20px!important} */ .t1-band-fig img{max-height:220px;width:auto;max-width:100%;display:block} /* 01.09. (User): groesser. Angeschnittene Varianten (_bes) - bei 220 px Hoehe stehen alle drei gleich hoch da: Fussgaenger 191x220, Auto 435x220, S-Bahn 350x220 (Spalteninnenbreite 460). Der 328-px-Deckel aus uk-width-small ist am Element entfernt, die Groesse regelt nur noch dieses max-height. */ @media (max-width:959px){.t1-band-fig{padding-top:28px}} /* 01.09. (User): "mit schmalem Viewport sind alle unterschiedlich gross". Einspaltig bekommt jedes Band die volle Breite; dadurch wuchs das Auto (breitestes Format) auf 342-435 px, waehrend der Zug bei seinen 333 px Originalgroesse und der Fussgaenger bei 191 px stehenblieben - gemessen bei 390 px Viewport: Hoehen 220 / 173 / 209. Loesung ohne feste Hoehe je Bild: die Breitengrenze folgt dem Seitenverhaeltnis, dann ergibt JEDE verfuegbare Breite bei allen drei die gleiche Hoehe. Auto 731x370 = 1,9757 -> 100 % (breitestes Format, bestimmt die gemeinsame Hoehe) Zug 333x209 = 1,5933 -> 80,65 % Fuss 747x860 = 0,8686 -> 43,97 % max-height 209 px ist die Originalhoehe des Zugs - darueber wuerde er hochskaliert. Ist Platz, begrenzt die Hoehe; ist es eng, die Breite. Beide Faelle liefern gleiche Hoehen. */ @media (max-width:959px){ .t1-band-fig img{max-height:209px} .t1-band-fig img[src*="Mobilitaet-Auto"]{max-width:100%} .t1-band-fig img[src*="sbahn"]{max-width:80.65%} .t1-band-fig img[src*="Fussgaenger"]{max-width:43.97%} } /* Galerie-Pfeile: nur ein Pfeil (Text), kein Pseudo-Element */ .t1-lage-slider .t1-gal-btn::before{content:none} /* Bandzeilen: Startzustand für gestaffelten Reveal */ html.t1-js:not(.t1-reduced) .t1-mins li,html.t1-js:not(.t1-reduced) .t1-band .t1-kicker,html.t1-js:not(.t1-reduced) .t1-band-fig{opacity:0;transform:translateY(18px)} /* Auto-Freisteller blickt nach rechts (User 27.08.) – gespiegelt per CSS, Reveal liegt auf dem Wrapper */ .t1-band-fig img[src*="Mobilitaet-Auto"]{transform:scaleX(-1)} /* 01.09. (User): "den Zug noch 20 % groesser". Er hing nicht am max-height, sondern an der Spalteninnenbreite von 328 px (uk-grid-column-large legt .t1-band 140 px padding-left auf, s. Notiz oben) - gerendert 328x206. 20 % mehr sind 394x247, also 66 px mehr als die Spalte hergibt. Er ist die LETZTE Spalte und zeigt nach rechts, darf also um genau diese 66 px nach rechts auslaufen; der eigene Trennstrich liegt links und bleibt unberuehrt. Nur ab 960 px - einspaltig mobil ist kein Platz, dort wuerde die Seite horizontal scrollen. */ @media (min-width:960px){ /* width explizit, height:auto - der Zug rendert mit 333x209 in ORIGINALGROESSE, ein hoeheres max-height kann ihn also nicht vergroessern (Maximum, kein Sollwert). 400 px = +20 %. max-height MUSS auf none: das globale 220-px-Limit wuerde sonst die Hoehe kappen, waehrend die Breite gesetzt bleibt - der Zug wuerde gestaucht. max-width als Notbremse, damit er bei schmalen Fenstern proportional kleiner wird statt aus dem Container zu laufen; height:auto haelt dabei das Seitenverhaeltnis. */ .t1-band-fig img[src*="sbahn"]{width:400px;height:auto;max-height:none;max-width:calc(100% + 48px)} } /* Ab 1280 px ist mehr Ueberstand drin, ohne dass der Zug aus dem Container laeuft (gemessen: +72 px liegen dort noch 12 px innerhalb der Containerkante, bei 960-1100 px waeren es 24 px darueber). Erst hier erreicht er die volle Sollbreite von 400 px. */ @media (min-width:1280px){ .t1-band-fig img[src*="sbahn"]{max-width:calc(100% + 72px)} } /* CTA „Lernen Sie die Lage vor Ort kennen." mit Adresse + Umland-Karte (27.08., User: Projektadresse hier integriert; Grund Papier) */ .t1-lage-cta .t1-cta-addr,.t1-lage-cta .t1-cta-addr p{color:var(--t1-ink)} .t1-lage-cta .t1-cta-addr .t1-small{color:var(--t1-ink);opacity:.72} .t1-lage-cta .t1-cta-addr strong{font-weight:500} .t1-lage-cta .t1-cta-map img{width:100%;display:block;border-radius:0} @media (min-width:960px){.t1-lage-cta .t1-cta-l{padding-right:32px}} /* CTA: Marker oben, restlicher Text unten bündig mit der Karte (User 27.08.) */ @media (min-width:960px){ .t1-lage-cta .t1-cta-l{display:flex;flex-direction:column;min-height:100%} .t1-lage-cta .t1-cta-l>.t1-display{margin-top:auto!important} } /* ===== V2: 31-lage-quartier.css ===== */ /* THE ONE V2 – Quartier-Ebenenstapel (Tanjas Sektion, 1:1 aus dem alten custom.css) */ /* --------------------------------------------------------------------- THE ONE - Quartier Hofmann Hoefe Alle Regeln haengen an .q-stack (Klasse an der Spalte). Diese Klasse ist im gerenderten HTML nachgewiesen - anders als eine id oder Klasse an der Sektion. Damit ist die Positionierung unabhaengig davon, was YOOtheme mit Sektions-Props macht. Luftbild liegt im Fluss und gibt die Hoehe, die beiden Overlays liegen absolut darueber. Weil alle drei Dateien 2480x1754 sind und dieselbe Box fuellen, sitzt alles bei jeder Breite passgenau. Prozentwerte am Broschuerenlayout gemessen, nicht geschaetzt. Versionierte Kopie: yootheme/style/quartier.css im Projekt-Repo. --------------------------------------------------------------------- */ /* Ebenen-Stapel */ .q-stack{position:relative;padding:0 !important} .q-stack img{display:block;width:100%;max-width:none;height:auto} .q-stack .uk-margin-remove-vertical{margin:0 !important} .q-stack .q-layer{position:absolute;left:0;top:0;width:100%;z-index:2} /* Sektion vollflaechig - nur Kosmetik, die Passgenauigkeit haengt nicht daran */ .uk-container:has(.q-stack){padding-left:0 !important;padding-right:0 !important; max-width:none !important;width:100%} /* Oberkante weich in den Seitengrund ueberfuehren, liegt ueber allem */ /* V2 (26.08., User): Ober- UND Unterkante laufen in den Papiergrund (--t1-paper) aus; z-index 3 = über den Bildebenen (2), unter den Labels (4). Alte Farbe #edeae2 war der Grund der alten Seite -> sichtbare Kante. */ .quartier-sec .q-stack::before{content:"";position:absolute;left:0;top:0;right:0;height:20%; background:linear-gradient(180deg,var(--t1-paper,#F6F4EF),rgba(246,244,239,0)) !important;z-index:3;pointer-events:none} .quartier-sec .q-stack::after{content:"";position:absolute;left:0;bottom:0;right:0;height:18%; background:linear-gradient(0deg,var(--t1-paper,#F6F4EF),rgba(246,244,239,0));z-index:3;pointer-events:none} /* --- Labels ---------------------------------------------------------- */ .q-stack .q-label{position:absolute;z-index:4;margin:0;line-height:1;white-space:nowrap; font-size:clamp(9px,.85vw,15px);letter-spacing:.06em;text-transform:uppercase} .q-stack .q-label p{margin:0;display:flex;align-items:center;gap:.4em} .q-stack .q-pill{display:inline-block;background:#fff;color:#1f1f1d;border-radius:500px; padding:.5em 1.1em;font-weight:500;box-shadow:0 1px 4px rgba(31,31,29,.18)} /* Verkehrs-Badges, Farben aus der Broschuere gemessen */ .q-stack .q-badge{display:inline-flex;align-items:center;justify-content:center; width:1.9em;height:1.9em;border-radius:50%;color:#fff;font-weight:600;letter-spacing:0; box-shadow:0 1px 4px rgba(31,31,29,.18)} .q-stack .q-u{background:#3e71ad} .q-stack .q-s{background:#609e79} /* Gemessene Positionen */ .q-stack .q-innenstadt {left:75.1%;top:14.9%} .q-stack .q-mittlerer-ring{left:37.4%;top:17.7%} .q-stack .q-obersendling {left:72.9%;top:30.7%} .q-stack .q-aidenbach {left:10.5%;top:36.2%} .q-stack .q-siemenswerke {left:77.9%;top:40.8%} /* 02.09. (User): Mobil stehen S- und U-Bahn-Icon RECHTS vom Text. Auf 390 px ist die Pill im Verhältnis zum Bild viel breiter als am Desktop; mit dem Icon links zeigt es vom Haltepunkt weg und der Text läuft nach rechts über die Station hinaus. Umgekehrte Laufrichtung setzt das Icon an das rechte Ende der Beschriftung – dort, wo die Station liegt – und der Text wächst nach links in die freie Fläche. Nachtrag 02.09. (User): NUR die beiden rechten Labels. Aidenbachstraße haengt links im Bild (left:10.5%), dort markiert das Icon die Station schon am linken Ende und der Text laeuft ohnehin in die freie Flaeche – bleibt also unveraendert. */ @media (max-width:959px){ .q-stack .q-obersendling p, .q-stack .q-siemenswerke p{flex-direction:row-reverse} } /* ISAR sitzt hart am rechten Rand, deshalb rechts verankert */ .q-stack .q-isar {right:2.9%;top:19.1%} /* THE ONE mit Anschlusslinie */ .q-stack .q-theone{left:33.2%;top:54.3%;height:8.6%;display:flex;align-items:flex-end; text-transform:none;letter-spacing:0} .q-stack .q-theone::before{content:"";position:absolute;left:2.1em;top:0;bottom:2.4em; width:1px;background:#fff} .q-stack .q-theone .q-pill{font-family:"The Seasons","Palatino Linotype",Palatino,Georgia,serif; font-weight:400;font-size:1.3em;letter-spacing:.02em;padding:.35em .8em;text-transform:none} /* Schriftzug auf der Quartiersflaeche - Display-Serif, ohne Pill */ .q-stack .q-quartier{left:16.8%;top:72.2%;z-index:3;text-transform:none;letter-spacing:0; font-family:"The Seasons","Palatino Linotype",Palatino,Georgia,serif; font-size:clamp(18px,2.6vw,46px);color:#fff;text-shadow:0 1px 6px rgba(31,31,29,.25)} /* Bildhinweis unten */ .q-stack .q-hinweis{left:35.4%;top:97.9%;z-index:3;text-transform:none;letter-spacing:0; font-size:clamp(7px,.55vw,11px);color:#fff;opacity:.85} /* Hinweis sitzt im unteren Verlauf (fast Papier): Ink statt Weiß (26.08.) */ .quartier-sec .q-stack .q-hinweis{color:var(--t1-ink) !important;opacity:.6 !important;text-shadow:none !important;z-index:5 !important} /* Sektions-CSS ist per #quartier gescoped -> !important noetig */ /* ===== V2: 40-kontakt.css ===== */ /* THE ONE V2 – Kontakt (FRE-Geist: Haarlinien statt Kästen, Pill mit Pfeil) */ /* 02.09. — Formular ist jetzt das Essentials-Element (ZOOlanders "yooessentials_form"). Dessen Markup: .uk-form-label > .uk-form-controls > .uk-input/.uk-select/.uk-textarea, Fehlermeldung als .uk-text-danger, Reihen als uk-grid mit .uk-grid-margin-large. Das alte Handmarkup (.t1-form-grid/.t1-field) und js/40-kontakt.js sind entfallen; die Optik bleibt identisch: Haarlinien statt Kästen, Label in Versalien. */ .t1-form>.uk-grid-margin-large{margin-top:28px} .t1-form .uk-grid>.uk-grid-margin{margin-top:28px} .t1-form .uk-margin{margin-top:0} .t1-form .uk-form-label{display:block;font:500 12px/1 var(--t1-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--t1-ink);margin-bottom:6px} .t1-form .uk-input,.t1-form .uk-select,.t1-form .uk-textarea{border:0;border-bottom:1px solid var(--t1-hair);border-radius:0;background:transparent;padding-left:0;padding-right:0;color:var(--t1-ink);font:400 17px/1.5 var(--t1-sans);height:44px} .t1-form .uk-textarea{height:auto;min-height:96px;padding-top:10px;resize:vertical} .t1-form .uk-input:focus,.t1-form .uk-select:focus,.t1-form .uk-textarea:focus{border-bottom-color:var(--t1-ink);outline:0;background:transparent} .t1-form .uk-select:not([multiple]):not([size]){background-image:linear-gradient(45deg,transparent 50%,var(--t1-ink) 50%),linear-gradient(135deg,var(--t1-ink) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 8px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:28px} .t1-form .uk-text-danger{color:var(--t1-accent-dark);font:400 13px/1.5 var(--t1-sans);letter-spacing:0;margin-top:6px} .t1-form .t1-consent label{display:flex;gap:14px;align-items:flex-start;font:400 13px/1.55 var(--t1-sans);color:var(--t1-text);text-transform:none;letter-spacing:0;margin-right:0} .t1-form .t1-consent .uk-margin-small-left{margin-left:0} .t1-form .t1-consent .uk-checkbox{flex:0 0 auto;margin-top:3px;border:1px solid var(--t1-ink);border-radius:0;background:transparent} .t1-form .t1-consent .uk-checkbox:checked{background-color:var(--t1-ink);border-color:var(--t1-ink)} .t1-form .t1-consent a{color:var(--t1-ink);border-bottom:1px solid currentColor} .t1-form .uk-button{margin-top:26px} .t1-form .uk-button[disabled]{opacity:1;cursor:default} .t1-form-hint{margin:0} .t1-form .uk-text-left>.uk-panel{margin-top:0} /* Danke-Meldung der Formular-Aktion */ .t1-form-success-h{font-family:var(--t1-serif);font-size:clamp(22px,2vw,28px);line-height:1.2;color:var(--t1-ink);margin:0 0 8px} .t1-kontakt-img img{max-width:240px} /* Einstiegstext schmaler (User 27.08.): ~32em, zentriert unter der Headline */ .t1-kontakt-intro .t1-sub{max-width:32em;margin-left:auto;margin-right:auto;text-wrap:balance} /* === ic-yoo-mcp:end === */