/* ============================================ Impact Up – Webseite (Testlauf) Design Guide v1: Tempel/Wald/Gold ============================================ */ :root { --gold: #C9A961; --moss: #2D4A2B; --moss-deep: #1F3320; --leaf: #7BA05B; --stone: #B8855E; --parchment: #F4ECD8; --ink: #1F1A14; --orange: #D4622A; --purple: #4A2B5C; --blue: #7B92B5; --serif: 'Cormorant Garamond', Georgia, serif; --sans: 'Inter', system-ui, sans-serif; --maxw: 1040px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: 64px; } body { font-family: var(--sans); color: var(--ink); background: var(--parchment); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } /* ---------- Reusable typography ---------- */ .eyebrow { font-size: 15px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 18px; } .eyebrow--light { color: var(--gold); } .section-title { font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; color: var(--ink); margin-bottom: 20px; letter-spacing: -0.01em; } .section-title--light { color: var(--parchment); } .section-title span { color: var(--gold); font-style: italic; } .lead { font-size: 17px; line-height: 1.55; max-width: 680px; margin-bottom: 32px; color: #3A332A; } .lead--full { max-width: none; } /* Blocksatz für längere Fließtexte */ .hero__sub, .lead, .quelle p, .bewegung p, .card p, .philo-text p, .about__text p, .weitergehen__notiz { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .card__result { text-align: left; } /* kurzer Schluss-Satz, kein Justify */ /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 14px 28px; font-family: var(--sans); font-weight: 500; font-size: 15px; letter-spacing: 0.5px; border: 1.5px solid var(--gold); border-radius: 2px; transition: all .25s ease; cursor: pointer; } .btn--primary { background: var(--gold); color: var(--ink); } .btn--primary:hover { background: var(--ink); color: var(--gold); border-color: var(--ink); } .btn--ghost { background: transparent; color: var(--parchment); } .btn--ghost:hover { background: var(--gold); color: var(--ink); } /* ============================================ 1 · HERO ============================================ */ .hero { min-height: 100vh; background: radial-gradient(ellipse at 30% 20%, rgba(201,169,97,0.12) 0%, transparent 60%), linear-gradient(180deg, var(--moss) 0%, var(--moss-deep) 100%); color: var(--parchment); padding: 84px 32px 80px; position: relative; display: flex; flex-direction: column; } /* .nav ist direktes -Kind (Mai 2026) -> sticky greift seitenweit, nicht nur solange der Hero im Viewport ist. Analog zu .sitenav der Session-Werkstatt. position/top/z-index reichen; kein Hero-Layout-Shift. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; gap: 32px; margin: 0; width: 100%; max-width: none; padding: 12px 32px; background: rgba(21, 39, 26, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201, 169, 97, 0.32); transition: background .3s ease, border-color .3s ease, padding .3s ease; } /* Index lädt main.js → JS setzt .nav--transparent, solange das Hero-Lockup noch im Bild ist; beim Wegscrollen fällt die Klasse weg und die Nav wird wieder solide (mit Wortmarke + Goldlinie). Default = solide, damit die Nav auf den JS-losen Unterseiten überall lesbar bleibt. */ .nav--transparent { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .nav__left { display: flex; align-items: center; gap: 28px; } /* Wortmarke: im Default sichtbar (= solide Nav). Über dem Hero (--transparent) eingeklappt, weil dort das große Lockup steht. */ .nav__wordmark { display: flex; align-items: center; gap: 9px; flex: none; white-space: nowrap; max-width: 320px; opacity: 1; overflow: hidden; transition: max-width .4s ease, opacity .35s ease, margin-right .4s ease; margin-right: 4px; } .nav--transparent .nav__wordmark { max-width: 0; opacity: 0; margin-right: 0; } .nav__wordmark-mark { width: 26px; height: auto; flex: none; } .nav__wordmark-name { font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: -0.01em; color: var(--parchment); } .nav__wordmark-name em { font-style: normal; color: var(--gold); } .nav__links--right { justify-content: flex-end; width: auto; } .nav__links { display: flex; gap: 28px; list-style: none; font-size: 14px; letter-spacing: 0.5px; } /* Active-Highlight (Scrollspy) – das Item der sichtbaren Sektion hebt sich ab */ .nav__links a.is-active { opacity: 1; color: var(--gold); } /* Dropdown im Menu */ .nav__item--has-dropdown { position: relative; } /* Hover-Brücke: füllt den schmalen Spalt zwischen Trigger und Menü, damit das Dropdown beim Runterfahren zur Liste nicht zuklappt. */ .nav__item--has-dropdown::before { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 14px; display: none; } .nav__item--has-dropdown:hover::before, .nav__item--has-dropdown:focus-within::before { display: block; } .nav__dropdown { position: absolute; top: 100%; left: -16px; list-style: none; margin: 0; padding: 8px 0; min-width: 200px; background: rgba(31, 51, 32, 0.96); backdrop-filter: blur(10px); border: 1px solid rgba(201, 169, 97, 0.3); border-top: none; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 1001; } .nav__item--has-dropdown:hover .nav__dropdown, .nav__item--has-dropdown:focus-within .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .nav__dropdown li { display: block; } .nav__dropdown a { display: block; padding: 10px 18px; color: var(--parchment); font-size: 13px; letter-spacing: 0.5px; opacity: 0.85; transition: color .2s, opacity .2s, background .2s; } .nav__dropdown a:hover { color: var(--gold); opacity: 1; background: rgba(201, 169, 97, 0.08); } .nav__item--has-dropdown > a::after { content: ' ▾'; font-size: 9px; opacity: 0.7; } /* Verlinkter Systems-Change-Begriff im Schluss-Text */ .schluss-link { color: inherit; border-bottom: 1px solid rgba(201, 169, 97, 0.5); transition: border-color .2s; } .schluss-link:hover { border-color: var(--gold); } /* Subseiten-Layout */ .hero--sub { min-height: auto; padding-bottom: 56px; } .hero__claim--sub { font-size: clamp(48px, 7vw, 96px); } .sub__inner { padding: 36px 0 24px; } .sub-section { padding: 90px 32px; } .sub-section--parchment { background: var(--parchment); color: var(--ink); } .sub-section--moss { background: var(--moss); color: var(--parchment); } .sub-section--moss .section-title { color: var(--parchment); } .sub-section--moss .lead { color: rgba(244, 236, 216, 0.85); } .def-heading { margin-top: 48px !important; margin-bottom: 16px; } /* Definitions-Zitate auf der Subseite – Pinnwand aus zwei ungleich großen Zetteln */ .def-quotes { display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px 36px; align-items: start; margin: 36px 0 0; max-width: 860px; } .def-quote { position: relative; margin: 0; padding: 26px 30px; background: #FFFBF0; box-shadow: 0 1px 3px rgba(31,26,20,0.06); font-family: var(--serif); } .def-quote:nth-of-type(1) { transform: rotate(-0.8deg); } .def-quote:nth-of-type(2) { transform: rotate(1deg); margin-top: 34px; } .def-quote::before, .def-quote::after { content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none; } .def-quote::before { top: -8px; left: -8px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); } .def-quote::after { bottom: -8px; right: -8px; border-bottom: 3px solid var(--gold); border-right: 3px solid var(--gold); } .def-quote p { font-size: 18px; line-height: 1.55; color: #3A332A; margin-bottom: 14px; font-style: italic; } .def-quote p:last-of-type { margin-bottom: 18px; } .def-quote cite { display: block; font-style: normal; font-family: var(--sans); font-size: 13px; letter-spacing: 1px; color: var(--gold); font-weight: 500; } @media (max-width: 720px) { .def-quotes { grid-template-columns: 1fr; gap: 28px; } .def-quote:nth-of-type(1), .def-quote:nth-of-type(2) { transform: none; margin-top: 0; } } .six__notes { margin: 56px auto 0; max-width: 760px; } .six__notes p { font-size: 16px; line-height: 1.65; color: rgba(244, 236, 216, 0.92); margin-bottom: 18px; } .six__notes p strong { color: var(--gold); font-weight: 600; } .six__notes p em { color: var(--parchment); font-style: italic; } /* Zweiter Block innerhalb einer Sub-Section (z.B. nach Definitionen) */ .sub-block { margin-top: 88px; padding-top: 56px; border-top: 1px solid rgba(31, 26, 20, 0.1); } .sub-block .eyebrow { margin-bottom: 12px; } .praxis-links { margin-top: 56px; display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--serif); font-size: 18px; } .praxis-links a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201, 169, 97, 0.3); padding-bottom: 4px; transition: border-color .2s ease, color .2s ease; } .praxis-links a:hover { color: var(--moss-deep); border-bottom-color: var(--gold); } /* Inline-Verweis im Fließtext (Philosophie / Konstrukte) – gold, auf hell & dunkel lesbar */ .philo-link { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(201, 169, 97, 0.4); transition: border-color .2s ease, color .2s ease; } .philo-link:hover { border-bottom-color: var(--gold); color: var(--gold); } /* Philosophie: relationale Ebene – Visual + Text nebeneinander */ .philo-home { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 48px; align-items: center; max-width: 920px; } .philo-home__visual svg { width: 100%; height: auto; } .philo-home__text p { font-size: 16px; line-height: 1.65; color: rgba(244, 236, 216, 0.92); margin-bottom: 18px; } .philo-home__text p:last-child { margin-bottom: 0; } .philo-cta-row { margin-top: 40px; } @media (max-width: 720px) { .philo-home { grid-template-columns: 1fr; gap: 28px; } .philo-home__visual { max-width: 200px; margin: 0 auto; } } .nav__links a { color: var(--parchment); opacity: 0.75; transition: opacity .2s, color .2s; } .nav__links a:hover { opacity: 1; color: var(--gold); } .hero__inner { flex: 1; max-width: var(--maxw); margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 460px; gap: 32px; align-items: start; padding: 36px 0 12px; } .hero__text { padding-top: 0; } .hero__logo-link { display: block; margin-top: 12px; margin-left: -30px; } .hero__logo { width: 540px; /* +50 % */ height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)); } .hero__claim { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 5.6vw, 76px); line-height: 0.96; letter-spacing: -0.02em; margin-bottom: 16px; max-width: 780px; } .hero__claim em { color: var(--gold); font-style: italic; font-weight: 500; } .hero__sub { font-size: 16px; line-height: 1.55; max-width: 540px; color: rgba(244,236,216,0.85); margin-bottom: 16px; } .hero { min-height: auto; padding-bottom: 48px; } .hero__buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 1px; height: 56px; background: rgba(201,169,97,0.3); } .hero__scroll span { position: absolute; top: 0; left: -2px; width: 5px; height: 16px; background: var(--gold); animation: scroll-pulse 2.4s ease-in-out infinite; } @keyframes scroll-pulse { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(40px); opacity: 0.2; } } /* ============================================ 2 · DREI QUELLEN ============================================ */ .quellen { background: linear-gradient(180deg, var(--moss) 0%, var(--moss-deep) 100%); padding: 24px 16px 14px; position: relative; } .eyebrow--center { text-align: center; display: block; margin: 0 auto 24px; } .netz-lead { text-align: center; font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: 0.5px; color: var(--moss); margin: 0 auto 10px; max-width: 760px; line-height: 1.3; } .quellen__caption { max-width: 860px; margin: 12px 0 40px; text-align: justify; hyphens: auto; -webkit-hyphens: auto; font-family: var(--serif); font-size: 19px; line-height: 1.45; color: var(--parchment); font-style: normal; } .quellen__caption em { color: var(--gold); font-style: italic; font-weight: 600; } .quellen__label { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--gold); text-align: left; margin-bottom: 14px; } .quellen__quellen { font-size: 12px; line-height: 1.5; color: var(--parchment); opacity: 0.65; text-align: left; margin-top: 18px; } .netz { position: relative; width: 100%; max-width: 1840px; height: 440px; margin: 0 auto 14px; border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #FAF4E2 0%, #EFE5CB 100%); box-shadow: inset 0 0 80px rgba(201,169,97,0.08); } #netz-canvas { width: 100%; height: 100%; display: block; } .netz__hint { position: absolute; bottom: 20px; right: 24px; font-size: 12px; letter-spacing: 1.5px; color: var(--ink); opacity: 0.4; pointer-events: none; } .quellen__legende { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: var(--maxw); margin: 0 auto; } .quelle { position: relative; padding: 28px 28px 28px 32px; border-left: 3px solid var(--c); background: rgba(255,255,255,0.9); } .quelle__dot { position: absolute; left: -8px; top: 32px; width: 13px; height: 13px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px var(--parchment); } .quelle h3 { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink); margin-bottom: 12px; } .quelle p { font-size: 15px; line-height: 1.6; color: #3A332A; } .quellen__schluss { text-align: justify; hyphens: auto; margin: 40px auto 0; max-width: 940px; font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--gold); font-weight: 500; } /* ============================================ 3 · WIE WIR WEITERGEHEN ============================================ */ .weitergehen { background: var(--moss); color: var(--parchment); padding: 90px 32px 90px; } .weitergehen .eyebrow { color: var(--gold); } .weitergehen .section-title { color: var(--parchment); max-width: 720px; } .weitergehen .lead { color: rgba(244,236,216,0.85); } .weitergehen .lead em { color: var(--gold); font-style: italic; } /* Six Conditions of Systems Change – umgekehrtes Tempel-Trapez */ .six { margin: 32px 0 56px; } .six__intro { font-family: var(--serif); font-size: 18px; line-height: 1.5; color: rgba(244,236,216,0.92); text-align: center; max-width: 760px; margin: 0 auto 24px; } .six__intro strong { color: var(--gold); font-weight: 600; } .six__source { display: block; font-size: 13px; font-style: italic; color: rgba(244,236,216,0.55); margin-top: 6px; } .six__diagram { width: 100%; max-width: 980px; margin: 0 auto; padding: 0; } .six__diagram svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.25)); } /* Prozess – drei Schritte als Flow mit goldenem Faden */ .prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; margin: 56px 0 40px; } .prozess__faden { position: absolute; top: 75px; /* mittig durch die Visuals */ left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(201,169,97,0.7) 12%, rgba(201,169,97,0.7) 50%, rgba(201,169,97,0.7) 88%, transparent 100%); z-index: 0; } .prozess__step { text-align: center; position: relative; z-index: 1; } .prozess__visual { position: relative; width: 150px; height: 150px; margin: 0 auto 18px; border-radius: 50%; background: var(--moss-deep); border: 1px solid rgba(201,169,97,0.35); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 30px rgba(201,169,97,0.08); } .prozess__visual svg { width: 110px; height: 110px; } .prozess__num { position: absolute; top: -8px; right: -4px; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: var(--moss-deep); font-family: var(--serif); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.3); } .prozess__axis { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 15px; letter-spacing: 1px; margin-bottom: 8px; } .prozess__step h3 { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--parchment); margin-bottom: 12px; line-height: 1.2; } .prozess__step .prozess__text { font-size: 14.5px; line-height: 1.6; color: rgba(244,236,216,0.82); text-align: justify; hyphens: auto; -webkit-hyphens: auto; padding: 0 4px; max-height: calc(4 * 1.6 * 14.5px); overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); transition: max-height .5s ease, -webkit-mask-image .3s, mask-image .3s; margin-bottom: 4px; } .prozess__step .prozess__text.expanded { max-height: 1500px; -webkit-mask-image: none; mask-image: none; } .prozess__more { background: none; border: none; color: var(--gold); font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; cursor: pointer; padding: 8px 4px; margin-top: 6px; transition: opacity .2s; } .prozess__more::after { content: ' ▾'; font-size: 10px; } .prozess__more.expanded::after { content: ' ▴'; } .prozess__more:hover { opacity: 0.7; } .weitergehen__notiz { font-size: 17px; max-width: 820px; color: rgba(244,236,216,0.85); margin-bottom: 32px; } .weitergehen__notiz strong { color: var(--gold); font-weight: 500; } .weitergehen__bridge { font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--gold); border-top: 1px solid rgba(201,169,97,0.4); padding-top: 32px; text-align: center; letter-spacing: 0.5px; } /* ============================================ 4 · ANGEBOTE ============================================ */ .angebote { background: var(--parchment); padding: 90px 32px 80px; } .angebote .section-title { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; } .angebote .lead { text-align: center; max-width: 720px; margin: 0 auto 64px; } .angebote .lead strong { color: var(--gold); font-weight: 600; } .angebote__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; } .angebote__label { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--gold); } .angebote__kontakt { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--gold); text-decoration: none; transition: opacity 0.2s; } .angebote__kontakt:hover { opacity: 0.7; } .angebote__foot { text-align: right; margin-top: -32px; } .angebote__cards .card h3 { color: var(--gold); } .angebote__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 56px; } .card { background: white; padding: 40px 32px; border-top: 4px solid var(--gold); position: relative; transition: transform .3s ease, box-shadow .3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(31,26,20,0.08); } .card__num { position: absolute; top: 24px; right: 28px; font-family: var(--serif); font-size: 48px; color: var(--gold); opacity: 0.35; font-weight: 500; } .card__axis { font-style: italic; color: var(--gold); font-size: 14px; letter-spacing: 1px; margin-bottom: 8px; } .card h3 { font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--ink); margin-bottom: 12px; white-space: nowrap; } .card__tag { font-size: 13px; letter-spacing: 0.5px; color: #A9843D; /* Gold, leicht abgedunkelt für Lesbarkeit auf der weißen Karte */ margin-bottom: 20px; font-style: italic; } .card p { font-size: 15px; line-height: 1.65; color: #3A332A; margin-bottom: 16px; } .card__result { border-top: 1px solid rgba(201,169,97,0.3); padding-top: 16px; font-size: 14px !important; color: var(--moss) !important; } .erstgespraech { background: var(--moss); color: var(--parchment); padding: 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; border-left: 4px solid var(--gold); } .erstgespraech h4 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin-bottom: 8px; } .erstgespraech p { color: rgba(244,236,216,0.85); } /* Compact-Variante: kleiner, ruhiger Gold-Link statt großem Grün-Block */ .erstgespraech--compact { background: none; border-left: none; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 8px 0 0; } .erstgespraech--compact .btn { font-size: 15px; padding: 11px 26px; } .erstgespraech--compact .erst-open__note { color: #6b5d4d; } .btn--big { font-size: 18px; padding: 18px 40px; letter-spacing: 0.8px; } /* Multi-Step-Formular */ .erst-form { margin: 24px auto 0; max-width: 720px; text-align: left; animation: erst-fade .35s ease; } @keyframes erst-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .erst-form__progress { display: flex; justify-content: center; gap: 12px; margin-bottom: 28px; } .erst-form__progress .dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--gold); background: transparent; transition: background .25s ease, transform .25s ease; } .erst-form__progress .dot.active { background: var(--gold); transform: scale(1.15); } .erst-step { border: none; padding: 0; margin: 0; display: none; animation: erst-slide .25s ease; } .erst-step.active { display: block; } @keyframes erst-slide { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } } .erst-step legend { font-family: var(--serif); font-size: 22px; color: var(--gold); margin-bottom: 18px; font-weight: 500; text-align: center; width: 100%; } .erst-step legend small { font-size: 14px; font-style: italic; color: rgba(244,236,216,0.6); margin-left: 4px; } .erst-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .erst-card { position: relative; cursor: pointer; padding: 22px 18px; background: rgba(244,236,216,0.06); border: 1.5px solid rgba(201,169,97,0.35); border-radius: 2px; text-align: center; font-family: var(--serif); font-size: 16px; color: var(--parchment); transition: border-color .2s, background .2s, transform .2s; display: flex; align-items: center; justify-content: center; min-height: 80px; } .erst-card input { position: absolute; opacity: 0; pointer-events: none; } .erst-card span strong { display: block; color: var(--gold); font-size: 22px; margin-bottom: 4px; } .erst-card:hover { border-color: var(--gold); background: rgba(201,169,97,0.08); transform: translateY(-1px); } .erst-card:has(input:checked) { border-color: var(--gold); background: rgba(201,169,97,0.18); box-shadow: 0 0 0 1px var(--gold) inset; } .erst-input { width: 100%; padding: 14px 18px; background: rgba(244,236,216,0.08); border: 1.5px solid rgba(201,169,97,0.35); color: var(--parchment); font-family: var(--sans); font-size: 16px; border-radius: 2px; margin-bottom: 14px; transition: border-color .2s, background .2s; } .erst-input:focus { outline: none; border-color: var(--gold); background: rgba(244,236,216,0.12); } .erst-input::placeholder { color: rgba(244,236,216,0.45); } .erst-input--textarea { resize: vertical; min-height: 56px; } .erst-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 8px; } .erst-skip { background: transparent; border-color: rgba(201,169,97,0.4); color: rgba(244,236,216,0.7); } .erst-skip:hover { background: transparent; color: var(--gold); border-color: var(--gold); } /* ============================================ 5 · PHILOSOPHIE ============================================ */ .philosophie { background: var(--moss-deep); color: var(--parchment); padding: 110px 32px 100px; position: relative; } .philosophie::before { content: ''; position: absolute; top: 60px; left: 50%; transform: translateX(-50%); width: 1px; height: 60px; background: var(--gold); opacity: 0.5; } .philosophie .container { max-width: 820px; } .philo-text p { font-size: 18px; line-height: 1.65; color: rgba(244,236,216,0.85); margin-bottom: 14px; } .philo-text p em { color: var(--gold); font-style: italic; } .philo-text p strong { color: var(--gold); font-weight: 500; } .philo-leitsatz { text-align: center; margin: 16px auto 36px; max-width: 760px; padding: 16px 16px; border-top: 1px solid rgba(201,169,97,0.5); border-bottom: 1px solid rgba(201,169,97,0.5); } .philo-leitsatz .philo-name { font-family: var(--sans, 'Inter', sans-serif); font-size: clamp(11px, 1.2vw, 14px); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); opacity: 0.85; margin: 0 0 10px; } .philo-leitsatz .philo-claim-line { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.2; font-style: italic; font-weight: 500; color: var(--parchment); margin: 0; } .philo-leitsatz .philo-claim-line em { font-style: italic; color: var(--gold); } .philo-break { text-align: center; color: var(--gold); opacity: 0.55; margin: 14px 0 12px !important; font-size: 18px; letter-spacing: 0.6em; line-height: 1; } .philo-claim { font-family: var(--serif); text-align: center; font-size: clamp(24px, 3vw, 34px); color: var(--gold); margin: 28px 0 32px !important; letter-spacing: 0.01em; } .philo-claim strong { color: var(--gold); font-weight: 600; } .philo-more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.4s ease; } .philo-more.expanded { max-height: 6000px; opacity: 1; } .philo-more-btn { display: block; margin: 18px auto 0; background: transparent; border: 1px solid rgba(201,169,97,0.5); color: var(--gold); padding: 9px 24px; cursor: pointer; font-family: var(--sans, 'Inter', sans-serif); font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.2s ease, border-color 0.2s ease; } .philo-more-btn:hover { background: rgba(201,169,97,0.12); border-color: var(--gold); } .philo-more-btn.expanded { margin-top: 28px; } /* ---------- Willkommen / Gründungsimpuls ---------- */ .intro { background: var(--parchment); padding: 64px 0 56px; text-align: left; position: relative; } .intro .eyebrow { color: var(--gold); } .intro .philo-more-btn { margin-left: 0; margin-right: auto; } .intro__lead { max-width: 860px; margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: #3A332A; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .intro__more { text-align: left; max-width: 860px; margin: 0; } .intro__more p { font-size: 17px; line-height: 1.6; margin-bottom: 18px; color: #3A332A; text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .intro__more .philo-break { text-align: center; color: var(--gold); margin: 8px 0 22px; } /* Einleitung: zentrierter Text mit Stein-Tuermen links/rechts */ .intro__layout { position: relative; z-index: 2; max-width: none; margin: 0; padding: 0; } /* Textspalte zwischen den beiden Trenn-Linien, von links etwas eingerueckt */ .intro__center { max-width: none; margin: 0 18% 0 28%; } .intro__brand { color: var(--gold); font-weight: 700; } @media (max-width: 900px) { .intro { padding-left: 22px; padding-right: 22px; } .intro__center { margin: 0; } } /* Trenn-Fugen aus der Steinleiste laufen senkrecht durch die Flaeche nach oben (3. Fuge von links ~20.8%, 2. Fuge von rechts ~87.8% der vollen Breite) */ .intro__seam { position: absolute; top: 64px; bottom: 0; width: calc(100% / 300); background: var(--moss-deep); z-index: 1; pointer-events: none; } .intro__seam--l { left: 20.667%; } .intro__seam--r { left: 87.667%; } @media (max-width: 900px) { .intro__seam { display: none; } } /* Weicher Moos-Verlauf links/rechts, von unten satt nach oben/innen auslaufend */ .intro::before, .intro::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; pointer-events: none; z-index: 0; } .intro::before { left: 0; background: radial-gradient(72% 100% at 0% 100%, rgba(45,74,43,0.20), rgba(45,74,43,0) 72%); } .intro::after { right: 0; background: radial-gradient(72% 100% at 100% 100%, rgba(45,74,43,0.20), rgba(45,74,43,0) 72%); } @media (max-width: 900px) { .intro::before, .intro::after { display: none; } } .intro__kompass { margin-top: 30px; padding: 26px 28px; border: 1px solid rgba(201,169,97,0.4); border-radius: 6px; background: rgba(201,169,97,0.07); text-align: center; } .intro__kompass p { margin-bottom: 18px; } .intro__kompass strong { color: var(--gold); font-weight: 600; } .philo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; } .philo-grid h4 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--gold); margin-bottom: 12px; line-height: 1.3; } .philo-grid p { font-size: 15px; line-height: 1.65; color: rgba(244,236,216,0.75); } /* ============================================ 6 · ABOUT ============================================ */ .about { background: var(--parchment); padding: 90px 32px 48px; } .about__intro { max-width: 1080px; margin: 0 0 56px 0; text-align: justify; hyphens: auto; position: relative; } .about__intro .eyebrow { margin-bottom: 16px; } .about__intro a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: font-weight 0.15s ease, color 0.15s ease; } .about__intro a:hover, .about__intro a:focus { font-weight: 700; text-decoration-thickness: 2px; } .about__mail strong { font-weight: 700; } .about__intro .about__gap { margin-top: 2em; } .about__bio { max-width: 1000px; display: flow-root; position: relative; } .about__photo { float: left; width: 300px; max-width: 42%; margin: 6px 28px 14px 0; border-top: 4px solid var(--gold); border-left: 4px solid var(--gold); padding: 12px 0 0 12px; } .about__photo-img { display: block; width: 100%; height: auto; background: transparent; } /* Gold-Eckklammern (zweiseitig) um Intro- und Bio-Text */ .about__intro::before, .about__intro::after, .about__bio::after { content: ""; position: absolute; width: 58px; height: 58px; pointer-events: none; } .about__intro::before { top: -12px; left: -16px; border-top: 4px solid var(--gold); border-left: 4px solid var(--gold); } .about__intro::after { bottom: -12px; right: -16px; border-bottom: 4px solid var(--gold); border-right: 4px solid var(--gold); } .about__bio::after { bottom: -12px; right: -16px; border-bottom: 4px solid var(--gold); border-right: 4px solid var(--gold); } .about__text .section-title { font-size: clamp(32px, 3.6vw, 44px); margin-bottom: 12px; } .about__sub { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gold); margin-bottom: 32px; } .about__text p { font-size: 17px; line-height: 1.75; margin-bottom: 20px; color: #3A332A; } .about__text strong { color: var(--moss); font-weight: 600; } /* Gold: Mail-Links + Name "Stefan" (wie der Eyebrow-Ton) */ .about__mail, .about__mail strong { color: var(--gold); font-weight: 700; } .about__text .about__name { color: var(--gold); } .about__signoff { margin-top: -14px; } .about__close { font-family: var(--serif); font-size: 24px !important; color: var(--gold) !important; margin-top: 32px !important; border-top: 1px solid rgba(201,169,97,0.4); padding-top: 24px; } /* ============================================ TRENNER (Bausteine, Mini-Dächer) ============================================ */ .trenner { display: flex; justify-content: center; align-items: center; pointer-events: none; } .trenner--steine { background: var(--moss-deep); height: 24px; padding: 0; } .trenner--steine svg { width: 100%; height: 100%; display: block; } .trenner--steine--dunkel { background: var(--parchment); height: 18px; } .trenner--dom { background: linear-gradient(180deg, var(--moss) 0%, var(--parchment) 50%, var(--parchment) 100%); padding: 32px 0 18px; position: relative; } .trenner--dom svg { width: 100%; max-width: 720px; height: auto; overflow: visible; } .trenner--dom::before, .trenner--dom::after { content: ''; position: absolute; top: calc(50% + 16px); width: 28%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 60%, var(--gold)); opacity: 0.55; } .trenner--dom::before { left: 8%; } .trenner--dom::after { right: 8%; transform: scaleX(-1); } .trenner--skyline { display: block; padding: 0; width: 100%; } .trenner--skyline svg { width: 100%; height: auto; display: block; } .trenner--skyline-a { background: linear-gradient(180deg, var(--parchment) 0%, var(--moss) 100%); } .trenner--skyline-b { background: linear-gradient(180deg, var(--moss) 0%, var(--parchment) 100%); } .trenner--skyline-c { background: linear-gradient(180deg, var(--moss-deep) 0%, var(--parchment) 100%); } .trenner--bogen { background: linear-gradient(180deg, var(--moss-deep) 0%, var(--parchment) 100%); padding: 18px 0 12px; position: relative; } .trenner--bogen svg { width: 100%; max-width: 1180px; height: auto; overflow: visible; } /* ============================================ FOOTER ============================================ */ .foot { background: var(--ink); color: rgba(244,236,216,0.55); padding: 40px 32px; text-align: center; font-size: 13px; letter-spacing: 1px; } .foot__small { margin-top: 8px; opacity: 0.5; font-size: 11px; } .foot a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .foot a:hover { color: var(--gold); } /* ============================================ SUBPAGES (Impressum, Impulse, ...) ============================================ */ .hero--mini { min-height: 80px; padding: 0; background: var(--moss-deep); } .page { background: var(--parchment); padding: 140px 32px 90px; min-height: 70vh; } .page__inner { max-width: 880px; } .page__title { font-family: var(--serif); font-size: clamp(36px, 4.5vw, 56px); margin: 8px 0 24px; color: var(--ink); } .page__lead { font-size: 18px; line-height: 1.6; margin-bottom: 48px; color: var(--ink); opacity: 0.85; } .page p, .page h2 { color: var(--ink); } .page h2 { font-family: var(--serif); font-size: 22px; margin: 32px 0 8px; } .page a { text-decoration: underline; text-underline-offset: 3px; } .page a:hover { color: var(--gold); } .impulse-list { display: grid; gap: 32px; margin-top: 16px; } .impulse-card { background: #fff; border: 1px solid rgba(31, 26, 20, 0.08); border-radius: 12px; padding: 28px 32px; box-shadow: 0 4px 20px rgba(31, 26, 20, 0.04); transition: transform .2s ease, box-shadow .2s ease; } .impulse-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(31, 26, 20, 0.08); } .impulse-card__date { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--moss-deep); margin-bottom: 8px; } .impulse-card__title { font-family: var(--serif); font-size: 24px; margin: 0 0 12px; color: var(--ink); } .impulse-card__teaser { margin: 0; line-height: 1.6; color: var(--ink); opacity: 0.85; } /* Aufklappbarer Volltext eines Impulses */ .impulse-card__more { margin-top: 16px; } .impulse-card__more > summary { cursor: pointer; display: inline-block; font-size: 14px; letter-spacing: 0.5px; color: var(--moss-deep); font-weight: 600; list-style: none; padding: 4px 0; border-bottom: 1px solid rgba(31, 26, 20, 0.15); transition: color .15s ease; } .impulse-card__more > summary::-webkit-details-marker { display: none; } .impulse-card__more > summary::after { content: " ↓"; display: inline-block; transition: transform .2s ease; } .impulse-card__more[open] > summary::after { content: " ↑"; } .impulse-card__more > summary:hover { color: var(--gold); } .impulse-card__body { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(31, 26, 20, 0.08); line-height: 1.7; color: var(--ink); } .impulse-card__body p { margin: 0 0 18px; } .impulse-card__body h3 { font-family: var(--serif); font-size: 20px; margin: 32px 0 10px; color: var(--ink); } .impuls-quote { margin: 28px 0; padding: 20px 24px; border-left: 3px solid var(--gold); background: rgba(199, 161, 92, 0.06); font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink); font-style: italic; } /* ============================================ MOBILE-NAV (Hamburger + Drawer) nav.js baut Button + Drawer auf allen Seiten; unabhängig von main.js. Drawer = Overlay aus . ============================================ */ .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 38px; padding: 9px 8px; background: none; border: none; cursor: pointer; flex: none; } .nav__toggle span { display: block; height: 2px; width: 100%; background: var(--parchment); border-radius: 2px; } .nav__drawer { position: fixed; inset: 0; z-index: 1200; background: rgba(21, 39, 26, 0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: 78px 32px 40px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } .nav__drawer.open { opacity: 1; visibility: visible; transform: none; } .nav__drawer a { display: block; color: var(--parchment); font-family: var(--serif); font-size: 22px; line-height: 1.2; padding: 11px 0; border-bottom: 1px solid rgba(201, 169, 97, 0.15); opacity: 0.92; transition: color .2s ease; } .nav__drawer a:hover { color: var(--gold); } .nav__drawer a.sub { font-size: 16px; padding-left: 18px; opacity: 0.72; } /* Zugeklappte Dropdown-Gruppen im Drawer: Text navigiert, Pfeil klappt aus */ .nav__drawer .drawer-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(201, 169, 97, 0.15); } .nav__drawer .drawer-row a { flex: 1; border-bottom: none; } .nav__drawer .drawer-toggle { background: none; border: none; color: var(--gold); font-size: 20px; padding: 8px 6px 8px 22px; cursor: pointer; line-height: 1; } .nav__drawer .drawer-toggle span { display: inline-block; transition: transform .25s ease; } .nav__drawer .drawer-group.open .drawer-toggle span { transform: rotate(180deg); } .nav__drawer .drawer-subs { display: none; border-bottom: 1px solid rgba(201, 169, 97, 0.15); padding-bottom: 6px; } .nav__drawer .drawer-group.open .drawer-subs { display: block; } .nav__drawer .drawer-subs a { border-bottom: none; padding: 8px 0 8px 18px; } .nav__drawer a.lang { margin-top: 22px; border: 1px solid var(--gold); border-bottom: 1px solid var(--gold); width: max-content; padding: 6px 16px; font-size: 14px; letter-spacing: 1.6px; } .nav__drawer-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: var(--parchment); font-size: 32px; line-height: 1; cursor: pointer; } @media (min-width: 901px) { .nav__drawer { display: none; } } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 900px) { .nav__toggle { display: flex; } .nav__links { display: none; } .hero__inner { grid-template-columns: 1fr; gap: 24px; } .hero__logo { width: 240px; } .hero__logo-link { margin: 0 auto; } .quellen__legende, .bewegungen, .prozess, .angebote__cards, .philo-grid { grid-template-columns: 1fr; gap: 24px; } .prozess__faden { display: none; } .about__intro { margin-bottom: 40px; } .about__photo { float: none; width: auto; max-width: 260px; margin: 0 auto 24px; } .netz { height: 480px; } .erstgespraech { flex-direction: column; align-items: flex-start; } .erst-choices { grid-template-columns: 1fr; } } /* Datenschutz-Checkbox am Erstgespräch-Formular */ .erst-consent { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; font-size: 0.85rem; line-height: 1.45; color: #4a3f33; } .erst-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; } .erst-consent a { color: inherit; text-decoration: underline; } /* Sprachumschalter in der Nav */ .nav__lang { margin-left: 14px; } .nav__lang a { display: inline-block; padding: 3px 9px; border: 1px solid currentColor; border-radius: 3px; font-size: 0.72rem; letter-spacing: 1.4px; font-weight: 500; opacity: 0.7; transition: opacity 0.2s ease; } .nav__lang a:hover { opacity: 1; } /* Stimmen / Referenzen-Block – Pinnwand aus zwei ungleich großen Zetteln */ .stimmen { background: #F4ECD8; padding: 32px 0 72px; } .stimmen__list { display: flex; flex-direction: column; gap: 16px; } .stimmen__frame { max-width: 900px; margin: 8px auto 0; padding: 0 20px; } .stimmen__label { margin-bottom: 28px; } .zettel-board { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px 40px; align-items: start; } .zettel { position: relative; background: #FFFBF0; border-radius: 2px; box-shadow: 0 1px 3px rgba(31,26,20,0.06); padding: 30px 34px; } .zettel--large { transform: rotate(-0.9deg); } .zettel--small { transform: rotate(1.1deg); margin-top: 36px; } .zettel::before, .zettel::after { content: ""; position: absolute; width: 28px; height: 28px; pointer-events: none; } .zettel::before { top: -9px; left: -9px; border-top: 3px solid var(--gold); border-left: 3px solid var(--gold); } .zettel::after { bottom: -9px; right: -9px; border-bottom: 3px solid var(--gold); border-right: 3px solid var(--gold); } .stimmen__quelle { color: var(--gold); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.3px; margin: 16px 0 0; } .stimme { margin: 0; padding: 0; } .stimme + .stimme { border-top: 1px solid rgba(201,169,97,0.28); padding-top: 16px; } .stimme p { margin: 0 0 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; line-height: 1.55; color: #1F1A14; font-style: italic; } .stimme cite { display: block; font-style: normal; font-size: 0.82rem; color: #6b5d4d; letter-spacing: 0.3px; } @media (max-width: 720px) { .stimmen { padding: 56px 0; } .zettel-board { grid-template-columns: 1fr; gap: 24px; } .zettel { padding: 22px 24px; } .zettel--large, .zettel--small { transform: none; margin-top: 0; } .stimme p { font-size: 1.05rem; } } /* Hinweis unter Erstgespräch-Button */ .erst-open__note { margin: 8px 0 0; font-size: 0.85rem; font-style: italic; color: #6b5d4d; text-align: center; } /* Auslauf-Hinweis auf der Impulse-Seite */ .impulse-outro { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(201,169,97,0.3); font-style: italic; color: #6b5d4d; text-align: center; } /* ============================================ */ /* NEUES SYSTEM (Mai 2026): Hero-Umbau */ /* emergentes Feld + Wortmarke-Lockup */ /* ============================================ */ /* overflow:clip am Hero clippt die Parallax-Felder (.hero-field, height 122%), ohne einen Scroll-Container zu erzeugen. Die Nav steckt seit Mai 2026 NICHT mehr im Hero (sie ist -Kind), darum hat clip keinen Einfluss mehr aufs Sticky-Verhalten. Nur der hohe Parallax-Hero (index, .hero ohne Modifier) braucht den Clip; .hero--sub bleibt visible. (.hero--mini wird nicht mehr gerendert: die Mini-Subseiten haben gar keinen Hero mehr, nur die Nav.) */ .hero { overflow: clip; } .hero--mini, .hero--sub { overflow: visible; } .hero-field { position: absolute; left: 0; top: 0; width: 100%; height: 122%; object-fit: cover; pointer-events: none; z-index: 0; will-change: transform; } .hero-field--far { opacity: .3; filter: blur(.5px); } .hero-field--near { opacity: .6; } /* Kompaktes Hero-Band: Lockup links, Claim rechtsbündig ins freie rechte Feld. */ .hero--band { min-height: auto; padding-top: 92px; padding-bottom: 44px; } .hero__inner--v2 { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: clamp(24px, 6vw, 96px); padding: 4px 0 0; } .hero__lockup-col { align-self: start; } .hero__claim-col { justify-self: end; text-align: right; max-width: min(680px, 52vw); padding-top: clamp(18px, 4.5vw, 56px); } /* --- Lockup als Bild: skaliert nur als Ganzes, Schrift kann nie verrutschen --- */ .lockup-img { display:block; width:clamp(270px, 36.5vw, 438px); max-width:100%; height:auto; margin-bottom:30px; } /* --- Lockup (Spec §2) --- */ .lockup { display:flex; align-items:center; gap:clamp(6px,1.1vw,12px); margin-bottom:30px; } .lockup .lmark { width:clamp(56px,7vw,92px); height:auto; filter:drop-shadow(0 8px 26px rgba(0,0,0,.42)); } .lname { font-family:var(--serif); font-weight:600; font-size:clamp(2.6rem,6.4vw,4.8rem); line-height:.92; letter-spacing:-.02em; color:var(--parchment); } .lname em { font-style:normal; color:var(--gold); } .ltag { display:flex; flex-direction:column; color:var(--gold); text-transform:uppercase; margin-top:-3px; } .ltag-row { display:flex; align-items:baseline; gap:22px; line-height:1; } .ltag-row span { font-size:11.5px; letter-spacing:.34em; white-space:nowrap; } .ltag-2 { font-size:11.5px; letter-spacing:.34em; text-align:center; margin-top:7px; line-height:1; transform:translateX(32px); } .ltag.en .ltag-row { gap:22px; margin-left:-12px; } .ltag.en .ltag-2 { transform:translateX(4px); } .hero__inner--v2 .hero__claim { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(1.6rem,3.4vw,2.5rem); line-height: 1.12; letter-spacing: 0; color: var(--parchment); max-width: none; margin: 0 0 16px; white-space: nowrap; } .hero__inner--v2 .hero__claim em { color: var(--gold); font-style: italic; } .hero__inner--v2 .hero__sub { text-align: right; margin-left: auto; margin-bottom: 0; max-width: 46ch; } @media (max-width: 760px) { .hero-field { height: 132%; } .hero__inner--v2 { grid-template-columns: 1fr; gap: 18px; } .hero__claim-col { justify-self: start; text-align: left; padding-top: 6px; max-width: none; } .hero__inner--v2 .hero__claim { text-align: left; white-space: normal; } .hero__inner--v2 .hero__sub { text-align: left; margin-left: 0; } } /* ============================================ */ /* Systemfeld als Hintergrund + Mark-Akzent */ /* ============================================ */ .has-sysbg { position: relative; overflow: hidden; } .has-sysbg > *:not(.sysfield) { position: relative; z-index: 1; } .sysfield { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; } .sysfield--light { opacity: .16; } .sysfield--gold { opacity: .26; } .markwm { position: absolute; pointer-events: none; z-index: 0; } .markwm--right { right: -50px; top: 16%; width: clamp(150px,20vw,280px); opacity: .07; } .hero--sub .hero__inner { position: relative; z-index: 1; } .trenner--skyline-c img { width: 100%; height: auto; display: block; } /* ============================================ */ /* Mobil-Fixes (Audit vor Livegang, Juli 2026) */ /* ============================================ */ /* Six-Conditions-Trapez + Diptychon: unter 600px nicht mehr rein proportional schrumpfen lassen (Labels sonst 3-5px), sondern feste Mindestbreite mit horizontalem Scroll im eigenen Wrapper. body overflow-x:hidden bleibt unberührt. */ @media (max-width: 600px) { .six__diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; } .six__diagram svg { min-width: 900px; } } /* Doppel-Padding .page (32px) + .container (32px) auf schmalen Phones reduzieren */ @media (max-width: 480px) { .page { padding-left: 20px; padding-right: 20px; } .page .page__inner { padding-left: 0; padding-right: 0; } } /* Blocksatz bleibt auch mobil (Stefans Wunsch) – die Wortlücken werden stattdessen über breitere Spalten (schmalere Ränder) entschärft. */ /* Hero-Lockup: auf sehr schmalen Screens gezielt verkleinern, damit Wortmarke + Tagline sicher in einer Zeile bleiben (nie umbrechen) */ @media (max-width: 400px) { .lockup .lmark { width: 46px; } .lname { font-size: 2.2rem; } .ltag-row { gap: 14px; } .ltag.en .ltag-row { gap: 14px; } .ltag-row span { font-size: 10px; letter-spacing: .26em; } .ltag-2 { font-size: 10px; letter-spacing: .26em; transform: translateX(24px); } .ltag.en .ltag-2 { transform: translateX(3px); } } /* 3D-Netz: vertikales Scrollen behält auf Touch Vorrang, horizontales Ziehen dreht weiterhin das Netz */ #netz-canvas { touch-action: pan-y; } /* ============================================ */ /* Mobil-Fixes Juli 2026 (Handy-Audit) */ /* ============================================ */ /* --- 1) Startseiten-Hero: Lockup größer, Claim/Sub enger + rechtsbündig, Sub-
auf Mobil ausblenden (bricht sonst hässlich um) --- */ @media (max-width: 760px) { .hero--band { padding-top: 72px; padding-bottom: 32px; } .hero__inner--v2 { gap: 10px; } .lockup-img { width: calc(100% + 26px); max-width: none; margin-left: -13px; margin-bottom: 12px; } .hero__claim-col { justify-self: stretch; text-align: right; padding-top: 0; padding-right: 14px; } .hero__inner--v2 .hero__claim { text-align: right; font-size: clamp(1.3rem, 6vw, 1.7rem); margin-bottom: 8px; } .hero__inner--v2 .hero__sub { text-align: right; margin-left: auto; font-size: 14px; } .hero__inner--v2 .hero__sub br { display: none; } } /* --- 2) Nav-Overflow auf den Konstrukt-Subseiten (impact-up-philosophie, systemische-wirkungsorientierung, systems-change): .markwm--right sitzt bewusst mit right:-50px im Hero und ragt heraus (Designabsicht); .hero--sub hat overflow:visible (z.B. für Bleed-Effekte), das lässt den Watermark aber die Seite horizontal aufreißen (document.documentElement.scrollWidth > 390, Touch-Drag nach rechts möglich). Fix: nur horizontal clippen, vertikal bleibt visible erhalten. Die SVG-Diagramme (.six__diagram, figure.lenses) haben bereits eigene overflow-x:auto-Wrapper und sind NICHT die Ursache. */ @media (max-width: 760px) { .hero--sub { overflow-x: clip; } } /* Anker-Ziele nicht unter der fixierten Nav verschwinden lassen */ [id] { scroll-margin-top: 72px; } /* --- 3) Konstrukt-Seiten: .sub-section (32px Padding) + .container (32px Padding) verdoppeln sich auf schmalen Phones und lassen nur ~230px Textbreite. Padding auf beiden Ebenen reduzieren, Pinnwand/Diagramme bleiben unberührt (die skalieren eigenständig über ihre eigenen Regeln). */ @media (max-width: 480px) { .sub-section { padding-left: 20px; padding-right: 20px; } .sub-section > .container { padding-left: 4px; padding-right: 4px; } } /* --- 4) Mobil kompakter: Texte näher an die Ränder, Karten breiter, kürzere Sektionsabstände gegen das lange Scrollen (Stefans Runde 2). Blocksatz bleibt erhalten; breitere Spalten glätten die Wortlücken. --- */ /* Schlagworte (Resonanz, Struktur, Kohärenz, Kooperation) in der Perspektiven-Einleitung hervorheben */ .weitergehen .lead strong { color: var(--gold); font-weight: 600; } /* Quellen-Karte: heller, deckender Zettel für Quellenlisten – einheitlich auf allen drei Konstrukt-Seiten (Lesbarkeit) */ .quellen-karte { background: #FFFBF0; border-top: 3px solid var(--gold); border-radius: 2px; box-shadow: 0 2px 10px rgba(31, 26, 20, 0.08); padding: 26px 24px 14px; position: relative; z-index: 1; } /* background:none neutralisiert die namensgleiche .quellen-Klasse der Wirkungsfelder-Sektion (dunkler Verlauf), die sonst die Listen einfärbt */ .quellen-karte ul.quellen { background: none; margin: 0; padding: 0; list-style: none; } .quellen-karte .quellen li { position: relative; padding-left: 24px; margin-bottom: 18px; font-size: 15px; line-height: 1.6; color: #3A332A; } .quellen-karte .quellen li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border: 1.5px solid var(--gold); border-radius: 50%; } .quellen-karte .quellen cite { font-style: normal; font-weight: 600; color: var(--ink); } .quellen-karte .quellen a { color: #A9843D; font-size: 13px; text-decoration: none; border-bottom: 1px solid rgba(201, 169, 97, 0.35); word-break: break-word; } .quellen-karte .quellen a:hover { border-bottom-color: #A9843D; } .quellen-karte .quellen .q-note { display: block; color: #6b5d4d; font-size: 13.5px; margin-top: 3px; } .quellen-karte .quellen-note { margin: 4px 0 10px; font-size: 13.5px; line-height: 1.55; color: #6b5d4d; } @media (max-width: 760px) { .container { padding-left: 18px; padding-right: 18px; } .intro { padding: 44px 0 40px; } .weitergehen { padding: 48px 18px; } .weitergehen__notiz { margin-bottom: 22px; } .angebote { padding: 48px 18px 44px; } .angebote .lead { margin-bottom: 32px; } .card { padding: 26px 20px; } .about { padding: 48px 18px 36px; } .stimmen { padding: 24px 0 48px; } .zettel { padding: 24px 20px; } }