/* ============================================================ Unterseiten-Styles — page.css Wird auf allen Unterseiten zusätzlich zu styles.css geladen ============================================================ */ /* Header/Footer-Wrapper aus dem Layout nehmen, damit position:sticky des Headers relativ zum wirkt (sonst klebt er nur im Wrapper). */ #site-header { display: contents; } /* Überschriften ausgewogen umbrechen → nie ein einzelnes Wort allein in der letzten Zeile (verhindert "Waisenwörter" wie "uns"). */ h1, h2, h3, h4, .page-hero__inner h1, .head h2, .cta-box h2, .head__sub { text-wrap: balance; } /* Fließtexte/Sublines: "pretty" verhindert Waisenwörter (einzelnes Wort in der letzten Zeile) – wirkt auf Absätze in Cards, Heroes & Listen. Ein globaler Fix für die vielen Meldungen "ein Wort einzeln in einer Zeile". */ p, li, .topic-card p, .feature-card p, .method-card p, .solution__benefit, .info-card p, .cta-box > p, .cta-box__text p { text-wrap: pretty; } /* Kurze Sublines/Card-Texte zusätzlich "balance": verteilt die Wörter gleichmäßig auf die Zeilen → garantiert KEIN einzelnes Wort in der letzten Zeile (stärker als pretty, aber nur für kurze Texte sinnvoll). */ .page-hero__sub, .head__sub, .topic-card p, .feature-card p, .method-card p, .fact-card span, .solution__lead, .ws-mod h4, .ws-mod__goal { text-wrap: balance; } /* Anker-Ziele (TOC-Sprünge) NICHT unter die fixe Nav-Bar scrollen lassen. Nav-Unterkante liegt bei ~83px → 140px gibt klar sichtbaren Abstand über der Zielüberschrift (Test: vorher nur 7px Luft, jetzt ~55px). */ :target, h1[id], h2[id], h3[id], h4[id], .article__block[id], .head[id], section[id] { scroll-margin-top: 140px; } /* ---------- Page Hero ---------- */ .page-hero { padding: calc(150px + var(--nav-h)) 0 70px; margin-top: calc(var(--nav-h) * -1); position: relative; overflow: hidden; } .page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(148,237,133,.07) 0%, transparent 70%); pointer-events: none; } .page-hero__inner { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .page-hero__inner h1 { font-family: var(--ff-display); font-weight: 700; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.12; letter-spacing: -.02em; margin: 18px 0 22px; } .page-hero__sub { font-size: 1.05rem; color: var(--muted); line-height: 1.75; max-width: 680px; margin: 0 auto 36px; } .page-hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; } .page-hero__stats { display: flex; gap: clamp(22px, 4vw, 46px); justify-content: center; flex-wrap: wrap; padding-top: 42px; border-top: 1px solid var(--line); } .stat { text-align: center; max-width: 210px; } .stat strong { display: block; font-size: 1.9rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat span { font-size: .78rem; color: var(--muted-2); font-family: var(--ff-mono); text-transform: uppercase; letter-spacing: .1em; } /* badge-pill in zentrierten Heads sauber zentrieren */ .head .badge-pill, .page-hero__inner .badge-pill, .cta-box .badge-pill { margin: 0 auto 20px; } .head__sub { margin-top: 18px; color: var(--muted); line-height: 1.7; font-size: 1rem; } /* ---------- Foto-Band ---------- */ .photo-band { padding: 0 0 20px; } .photo-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .photo-band figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; border: 1px solid var(--line); } .photo-band img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .photo-band figure:hover img { transform: scale(1.04); } /* ---------- Prose (Fließtext) ---------- */ .prose { max-width: 760px; margin: 0 auto 36px; } .prose p { color: var(--muted); line-height: 1.8; margin-bottom: 14px; } /* ---------- Module (Akkordeon) ---------- */ .module { max-width: 920px; margin: 0 auto 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: rgba(255,255,255,.02); overflow: hidden; } .module[open] { border-color: rgba(148,237,133,.22); } .module > summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; align-items: center; gap: 18px; } .module > summary::-webkit-details-marker { display: none; } .module > summary::after { content: "+"; margin-left: auto; font-size: 1.5rem; line-height: 1; color: var(--lime); flex-shrink: 0; transition: transform .3s; } .module[open] > summary::after { transform: rotate(45deg); } .module__day { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #04130b; background: var(--grad); padding: 5px 11px; border-radius: 100px; flex-shrink: 0; font-weight: 700; } .module__title { font-weight: 700; font-size: 1.02rem; } .module__title em { font-style: normal; color: var(--muted-2); font-weight: 500; font-size: .9rem; } .module__time { font-family: var(--ff-mono); font-size: .76rem; color: var(--muted-2); flex-shrink: 0; } .module__body { padding: 0 26px 26px; } .module__body > p { color: var(--muted); line-height: 1.7; margin-bottom: 22px; max-width: 760px; } .module__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } .module__col h4 { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } /* ---------- Listen ---------- */ .dots { list-style: none; display: flex; flex-direction: column; gap: 11px; } .dots li { position: relative; padding-left: 20px; color: var(--muted); line-height: 1.6; font-size: .9rem; } .dots li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); } .dots li strong { color: var(--ink); font-weight: 600; } .dots--sm li { font-size: .84rem; gap: 8px; } .checks { list-style: none; display: flex; flex-direction: column; gap: 14px; } /* Icon absolut links, Textinhalt (egal ob …: + Folgetext oder reiner Text) fließt als EIN zusammenhängender Block daneben. Behebt den "verschobenen Text" auf den Karriere-Stellen (Flex hatte und den Folge-Textknoten als getrennte Items zerrissen). */ .checks li { position: relative; padding-left: 34px; color: var(--muted); line-height: 1.6; font-size: .9rem; } .checks .tick { position: absolute; left: 0; top: 1px; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(148,237,133,.12); display: flex; align-items: center; justify-content: center; } .checks .tick svg { width: 13px; height: 13px; stroke: var(--lime); } .checks li strong { color: var(--ink); font-weight: 600; } .checks--inline { flex-direction: row; flex-wrap: wrap; gap: 10px 22px; } .checks--inline li { font-size: .88rem; } /* ---------- Workshop-Blöcke (1 & 2) ---------- */ .ws { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--radius); padding: 40px; margin-bottom: 28px; } .ws__head { display: flex; justify-content: space-between; gap: 32px; margin-bottom: 32px; flex-wrap: wrap; } .ws__head > div:first-child { max-width: 640px; } .ws__badge { display: inline-flex; padding: 5px 13px; border-radius: 100px; font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; background: rgba(255,255,255,.06); border: 1px solid var(--line); color: var(--muted); margin-bottom: 14px; } .ws__badge--lime { background: rgba(148,237,133,.1); border-color: rgba(148,237,133,.28); color: var(--lime); } .ws__head h3 { font-size: 1.45rem; font-weight: 700; margin-bottom: 12px; } .ws__head p { color: var(--muted); line-height: 1.7; } .ws__meta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; text-align: right; } .ws__meta span:first-child { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); white-space: nowrap; } .ws__meta svg { width: 16px; height: 16px; stroke: var(--lime); } .ws__meta-note { font-size: .8rem; color: var(--muted-2); } .ws__modules { gap: 18px; margin-top: 0; } .ws-mod { background: rgba(148,237,133,.03); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px; } .ws-mod__num { font-family: var(--ff-display); font-weight: 800; font-size: 1.4rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; } .ws-mod h4 { font-size: .92rem; font-weight: 700; margin-bottom: 8px; line-height: 1.3; } .ws-mod__goal { font-size: .82rem; color: var(--muted-2); line-height: 1.5; margin-bottom: 14px; font-style: italic; } /* ---------- Feature Cards (Organisatorisches) ---------- */ .org-grid { margin-bottom: 32px; } .feature-card { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 30px; text-align: center; } .feature-card__icon { width: 54px; height: 54px; border-radius: 14px; margin: 0 auto 18px; background: linear-gradient(135deg, rgba(133,225,192,.15), rgba(148,237,133,.08)); border: 1px solid rgba(133,225,192,.2); display: flex; align-items: center; justify-content: center; } .feature-card__icon svg { width: 24px; height: 24px; stroke: var(--lime); } .feature-card h4 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; } .feature-card p { font-size: .88rem; color: var(--muted); line-height: 1.6; } .org-note { max-width: 920px; margin: 40px auto 0; background: rgba(148,237,133,.04); border: 1px solid rgba(148,237,133,.15); border-radius: var(--radius); padding: 32px 36px; } .org-note > p { color: var(--ink); line-height: 1.7; margin-bottom: 20px; } /* ---------- Team Grid ---------- */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1120px; margin: 0 auto; } .team-card { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; transition: transform .3s var(--ease), border-color .3s; } .team-card:hover { transform: translateY(-4px); border-color: var(--line-2); } .team-card__img-wrap { aspect-ratio: 1; overflow: hidden; background: rgba(148,237,133,.05); } .team-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* Freigestellte Fotos (Marcel/Domenik) auf denselben Mint-Hintergrund wie die Studio-Fotos */ .team-card__img-wrap--mint { background: #88c6b8; } .team-card__info { padding: 24px; display: flex; flex-direction: column; gap: 6px; align-items: center; } .team-card__info h4 { font-size: 1.05rem; font-weight: 700; } .team-card__info span { font-size: .82rem; color: var(--muted-2); margin-bottom: 10px; } /* Karte als Link (Mitglieder mit Profilseite) */ a.team-card { display: block; color: inherit; text-decoration: none; } /* Zwei gestapelte Bilder: Foto (Default) + Avatar (bei Hover eingeblendet) */ .team-card__photos { position: relative; } .team-card__photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .45s var(--ease), transform .6s var(--ease); } .team-card__avatar { opacity: 0; } .team-card:hover .team-card__avatar { opacity: 1; } /* Mitglieder ohne Avatar: sanfter Zoom beim Hover */ .team-card__photos--single:hover img { transform: scale(1.04); } /* Platzhalter-Karte „Du ins Team?" – scrollt zur Bewerbungs-Sektion */ .team-card__join { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 30% 25%, rgba(148,237,133,.18), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); } .team-card__join svg { width: 52px; height: 52px; stroke: var(--lime); transition: transform .3s var(--ease); } .team-card--join:hover .team-card__join svg { transform: scale(1.1); } .team-card--join .team-card__info span { color: var(--lime); } /* Einblick-Fotos (Team-Alltag) */ .team-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 900px; margin: 40px auto 0; } .team-shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); } @media (max-width: 640px) { .team-shots { grid-template-columns: 1fr; max-width: 340px; } } /* ---------- FAQ ---------- */ .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .faq { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,.02); } .faq summary { padding: 20px 26px; cursor: pointer; font-weight: 600; font-size: .98rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--lime); flex-shrink: 0; transition: transform .3s; } .faq[open] summary::after { transform: rotate(45deg); } .faq[open] summary { color: var(--lime); } .faq p { padding: 0 26px 22px; color: var(--muted); line-height: 1.75; font-size: .92rem; } /* ---------- CTA Section ---------- */ .cta-section { padding-bottom: 110px; } .cta-box { max-width: 980px; margin: 0 auto; text-align: center; background: rgba(148,237,133,.04); border: 1px solid rgba(148,237,133,.15); border-radius: var(--radius); padding: 56px 48px; } .cta-box h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin: 12px 0 16px; } .cta-box > p, .cta-box__text p { color: var(--muted); line-height: 1.7; margin-bottom: 28px; } .cta-box__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* CTA mit Person (Split) */ .cta-box--split { display: grid; grid-template-columns: 1.4fr .8fr; gap: 48px; align-items: center; text-align: left; } .cta-box--split .badge-pill { margin: 0 0 18px; } .cta-box__text .checks--inline { margin-bottom: 28px; } .cta-box--split .cta-box__btns { justify-content: flex-start; } .cta-box__person { display: flex; flex-direction: column; align-items: center; gap: 16px; } .cta-box__person img { width: 100%; max-width: 220px; aspect-ratio: 1; object-fit: cover; object-position: top center; border-radius: var(--radius); border: 1px solid var(--line-2); } .cta-box__person-info { text-align: center; } .cta-box__person-info strong { display: block; font-size: 1.05rem; font-weight: 700; } .cta-box__person-info span { font-size: .85rem; color: var(--muted-2); } /* ---------- Artikel-Layout (TOC + Body) ---------- */ .article__wrap { display: grid; grid-template-columns: 230px 1fr; gap: 56px; align-items: start; max-width: 1060px; margin: 0 auto; } .toc { position: sticky; top: 110px; } .toc__label { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); display: block; margin-bottom: 16px; padding-left: 14px; } .toc nav { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--line); } .toc nav a { padding: 8px 14px; font-size: .85rem; color: var(--muted); border-left: 2px solid transparent; margin-left: -1px; transition: color .2s, border-color .2s; } .toc nav a:hover, .toc nav a.active { color: var(--lime); border-left-color: var(--lime); } .article__body { min-width: 0; max-width: 720px; } /* Blog-Fließtext luftiger: größere Schrift, mehr Zeilen- und Absatzabstand, damit die langen Artikel nicht als "geballter Text" wirken. Greift auf die direkten

/

/