/*! cr-gemeinschaft | Quelle: 06f-gemeinschaft.css */
@layer pages {
.lgvision { display: grid; gap: 0.8rem; justify-items: center; text-align: center; max-inline-size: 52rem; margin-inline: auto; position: relative; }
.lgvision__vers {
margin: 0; font-family: var(--font-display); font-weight: var(--display-wght); font-stretch: calc(var(--display-wdth) * 1%);
font-size: clamp(2.3rem, 1.2rem + 5vw, 5.4rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance;
background: linear-gradient(100deg, var(--accent-ink), color-mix(in oklab, var(--accent) 60%, var(--aura-b, var(--accent))));
-webkit-background-clip: text; background-clip: text; color: transparent;
}
.lgvision figcaption { color: var(--ink-2); font-weight: 700; }
.lgvision__satz { font-size: var(--step-2); line-height: 1.3; color: var(--ink); text-wrap: balance; max-inline-size: 34ch; font-style: italic; }
.lgwhy__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); counter-reset: why; }
.lgwhy__list li {
margin: 0; position: relative; display: grid; gap: 0.5rem; align-content: start; padding: var(--space-m); border-radius: var(--r-l);
background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: clip; isolation: isolate;
}
.lgwhy__list li::after {
counter-increment: why; content: counter(why); position: absolute; z-index: -1; right: -0.05em; bottom: -0.32em;
font-family: var(--font-display); font-weight: 800; font-size: 8rem; line-height: 1; color: color-mix(in oklab, var(--accent) 12%, transparent);
}
.lgwhy__icon { inline-size: 3rem; block-size: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); }
.lgwhy__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.lgwhy__list h3 { font-size: var(--step-1); }
.lgwhy__list p { color: var(--ink-2); }
.lgwhy__werte { max-inline-size: 48rem; margin-inline: auto; text-align: center; color: var(--ink-2); }
.lgpeople { display: grid; gap: var(--space-xl); }
@media (width >= 56rem) { .lgpeople { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.lgfaces { display: grid; gap: 0.8rem; padding: var(--space-m); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.lgfaces h3 { font-size: var(--step-1); display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; align-items: baseline; }
.lgfaces h3 small { font-size: 0.85rem; font-family: var(--font-text); font-weight: 600; color: var(--ink-2); }
.lgfaces ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.8rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.lgface { margin: 0; display: flex; gap: 0.8rem; align-items: center; }
.lgjoin__facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.lgjoin__facts li { margin: 0; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.8rem; align-items: baseline; padding-block-end: 0.7rem; border-block-end: 1px solid var(--line); }
.lgjoin__facts b { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent-ink); }
.lgface__img { flex: none; inline-size: 3.6rem; aspect-ratio: 1; border-radius: 50%; overflow: clip; background: var(--img-color); display: grid; place-items: center; outline: 3px solid color-mix(in oklab, var(--accent) 35%, transparent); outline-offset: 2px; }
.lgface__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.lgface__sym { inline-size: 55%; color: var(--accent-ink); }
.lgface b { display: block; line-height: 1.25; }
.lgface small { color: var(--ink-2); font-size: 0.88rem; }
.lgnews__grid { display: grid; gap: var(--space-m); }
@media (width >= 60rem) { .lgnews__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.lgnews__list { display: grid; gap: 0.6rem; }
.lgnews__list--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.lgpost { --c: var(--accent); }
.lgpost__link {
display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.6rem; padding-inline-end: 1rem;
border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
transition: translate var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2);
}
.lgpost__link:hover { translate: 0 -3px; box-shadow: var(--shadow-2); border-color: color-mix(in oklab, var(--c) 45%, var(--line)); }
.lgpost__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lgpost__img { position: relative; aspect-ratio: 1; min-block-size: 0; border-radius: var(--r-m); overflow: hidden; background: var(--img-color); }
.lgpost__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 900ms var(--ease-out); }
.lgpost__link:hover img { scale: 1.06; }
.lgpost__body { display: grid; gap: 0.3rem; position: relative; padding-inline-end: 2rem; }
.lgpost__date { font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); }
.lgpost__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); line-height: 1.15; text-wrap: balance; }
.lgpost__teaser { color: var(--ink-2); }
.lgpost__more { position: absolute; right: 0; bottom: 0.1rem; inline-size: 1.9rem; block-size: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); transition: translate var(--dur-2) var(--ease-spring); }
.lgpost__more svg { inline-size: 1rem; block-size: 1rem; }
.lgpost__link:hover .lgpost__more { translate: 3px 0; }
.lgpost--big .lgpost__link { grid-template-columns: 1fr; padding: 0; overflow: clip; align-items: stretch; }
.lgpost--big .lgpost__img { aspect-ratio: 16 / 10; border-radius: 0; }
.lgpost--big .lgpost__body { padding: var(--space-m); padding-inline-end: calc(var(--space-m) + 2.5rem); gap: 0.5rem; }
.lgpost--big .lgpost__title { font-size: var(--step-3); }
.lgpost--big .lgpost__more { right: var(--space-m); bottom: var(--space-m); inline-size: 2.6rem; block-size: 2.6rem; }
.lgletters { display: grid; gap: var(--space-s); padding: var(--space-m); border-radius: var(--r-l); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); border: 1px solid color-mix(in oklab, var(--accent) 20%, transparent); }
.lgletters__head { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline; justify-content: space-between; }
.lgletters__head h3 { font-size: var(--step-1); display: inline-flex; gap: 0.5rem; align-items: center; }
.lgletters__head h3 svg { inline-size: 1.3rem; color: var(--accent-ink); }
.lgletters__head p { color: var(--ink-2); max-inline-size: 42rem; }
.lgletters__list { list-style: none; padding: 0.4rem 0 0.8rem; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.2rem, 1fr); gap: 0.7rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.lgletters__list li { margin: 0; scroll-snap-align: start; }
.lgletters__list a {
display: grid; justify-items: center; gap: 0.15rem; padding: 0.8rem 0.4rem 0.7rem; border-radius: var(--r-m); text-decoration: none; color: var(--ink);
background: var(--surface); border: 1px solid var(--line); transition: translate var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.lgletters__list a:hover { translate: 0 -4px; rotate: calc((var(--i) - 3.5) * 0.4deg); box-shadow: var(--shadow-2); }
.lgletters__env { position: relative; inline-size: 3.4rem; aspect-ratio: 1.45; border-radius: 0.3rem; background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border: 1.5px solid color-mix(in oklab, var(--accent) 45%, transparent); display: grid; place-items: center; overflow: clip; margin-block-end: 0.3rem; }
.lgletters__env::before { content: ""; position: absolute; inset: -40% 8% auto; aspect-ratio: 1; rotate: 45deg; border: 1.5px solid color-mix(in oklab, var(--accent) 45%, transparent); background: color-mix(in oklab, var(--accent) 9%, var(--surface)); }
.lgletters__sym { position: relative; inline-size: 1.1rem; color: var(--accent-ink); margin-block-start: 0.55rem; }
.lgletters__list b { font-family: var(--font-display); font-size: var(--step-1); line-height: 1; }
.lgletters__list small { font-size: 0.75rem; color: var(--ink-2); font-weight: 700; }
.lgway { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); position: relative; }
.lgway li { margin: 0; position: relative; display: grid; gap: 0.5rem; align-content: start; padding: var(--space-m); padding-block-start: calc(var(--space-m) + 0.4rem); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.lgway li::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 5px; border-radius: var(--r-l) var(--r-l) 0 0; background: color-mix(in oklab, var(--accent) calc(35% + var(--i) * 20%), var(--surface)); }
.lgway__n { inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: var(--step-1); background: var(--accent); color: var(--on-accent); }
.lgway h3 { font-size: var(--step-1); }
.lgway p { color: var(--ink-2); }
@media (width >= 60rem) {
.lgway li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; right: calc(-1 * var(--space-s) / 2 - 0.55rem); inline-size: 1.1rem; aspect-ratio: 1; rotate: 45deg; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); background: transparent; }
}
}