.fejlodes-page { background: var(--color-ice-white); }
.fejlodes-page .section { padding-block: var(--space-9); }
.fejlodes-page .section--compact { padding-block: var(--space-8); }
.fejlodes-page .eyebrow { margin-bottom: var(--space-3); }
.fejlodes-page .badge { border-radius: var(--radius-sm); }
.fejlodes-page .badge--mechanic { color: #08737a; background: #e2f7f8; }
.fejlodes-page .badge--strategy { color: var(--color-royal-purple); background: var(--color-soft-lavender); }
.fejlodes-breadcrumb { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); font-size: var(--text-xs); }
.fejlodes-breadcrumb span { color: var(--color-text-muted); }
.fejlodes-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: center; }
.fejlodes-hero__copy, .fejlodes-hero__visual { min-width: 0; width: 100%; }
.fejlodes-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.fejlodes-hero__copy > * { margin: 0; }
.fejlodes-hero h1 { max-width: 24ch; font-size: clamp(3rem, 5vw, 4rem); }
.fejlodes-hero__lead { max-width: 60ch; font-size: var(--text-lead); line-height: 1.4; }
.fejlodes-hero__copy > p:not(.fejlodes-hero__lead) { max-width: 64ch; }
.fejlodes-hero__button { margin-top: var(--space-2); }
.fejlodes-hero__proofs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: 100%; margin-top: var(--space-2); }
.fejlodes-proof { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); background: var(--color-paper-white); }
.fejlodes-proof > * { margin: 0; }
.fejlodes-proof h2 { font-size: 1.5rem; }
.fejlodes-proof p { font-size: var(--text-sm); line-height: 1.45; }
.fejlodes-proof--strategy { background: var(--color-soft-lavender); border-color: rgba(85, 37, 138, .35); }
.fejlodes-hero__visual { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-paper-white); padding: var(--space-3); box-shadow: var(--shadow-panel); }
.fejlodes-hero__visual::after { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, transparent 45%, rgba(8, 174, 184, .04), rgba(240, 90, 40, .04)); content: ""; }
.fejlodes-hero__visual img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fejlodes-hero__visual figcaption { padding: var(--space-3) var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-xs); }
.fejlodes-section-head { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fejlodes-section-head > * { margin: 0; }
.fejlodes-section-head p { line-height: var(--leading-body); }
.fejlodes-roadmap__head { width: min(100%, 39rem); margin-bottom: var(--space-6); }
.fejlodes-roadmap__head p { max-width: 62ch; }
.fejlodes-roadmap__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.fejlodes-roadcard { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; border: 1px solid var(--color-border); border-top: 4px solid var(--color-electric-turquoise); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-4); transition: transform var(--transition-base), border-color var(--transition-fast); }
.fejlodes-roadcard > * { min-width: 0; }
.fejlodes-roadcard:hover { transform: translateY(-4px); border-color: var(--color-electric-turquoise); }
.fejlodes-roadcard--orange { border-top-color: var(--color-flame-orange); }
.fejlodes-roadcard--purple { border-top-color: var(--color-royal-purple); }
.fejlodes-roadcard--graphite { border-top-color: var(--color-graphite); }
.fejlodes-roadcard__number, .fejlodes-priority-item > span, .fejlodes-resource-card > span, .fejlodes-beginner__path > article > span { color: var(--color-royal-purple); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; line-height: 1; }
.fejlodes-roadcard div { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fejlodes-roadcard div > * { margin: 0; }
.fejlodes-roadcard h3 { font-size: 1.65rem; }
.fejlodes-roadcard p { font-size: var(--text-sm); line-height: 1.5; }
.fejlodes-roadcard a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.fejlodes-definitions__head { width: min(100%, 45rem); margin-bottom: var(--space-6); }
.fejlodes-definitions__head p { max-width: 66ch; }
.fejlodes-definitions__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.fejlodes-definition { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); }
.fejlodes-definition > * { margin: 0; }
.fejlodes-definition h3 { font-size: var(--text-card-title); }
.fejlodes-definition p { max-width: 45ch; }
.fejlodes-definition--lavender { background: var(--color-soft-lavender); }
.fejlodes-info-strip { width: 100%; border-inline-start: 3px solid var(--color-electric-turquoise); padding-inline-start: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.fejlodes-callout { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-5); border-inline-start: 4px solid var(--color-royal-purple); background: var(--color-soft-lavender); padding: var(--space-5); }
.fejlodes-callout > * { margin: 0; }
.fejlodes-callout p { max-width: 72ch; }
.fejlodes-priority__head { width: min(100%, 44rem); margin-bottom: var(--space-6); }
.fejlodes-priority__head p { max-width: 62ch; }
.fejlodes-priority__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; }
.fejlodes-priority__items { display: flex; min-width: 0; flex-direction: column; gap: var(--space-5); }
.fejlodes-priority-item { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-5); }
.fejlodes-priority-item > * { min-width: 0; }
.fejlodes-priority-item div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fejlodes-priority-item div > * { margin: 0; }
.fejlodes-priority-item p { max-width: 58ch; }
.fejlodes-priority-item a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.fejlodes-lens { position: sticky; top: var(--space-6); display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); overflow: hidden; border: 1px solid rgba(247, 249, 252, .55); border-radius: var(--radius-panel); background: var(--color-royal-purple); color: var(--color-ice-white); padding: var(--space-6); box-shadow: var(--shadow-panel); }
.fejlodes-lens::before { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(247,249,252,.18) 1px, transparent 1px); background-size: 8px 8px; content: ""; opacity: .22; }
.fejlodes-lens > * { position: relative; margin: 0; }
.fejlodes-lens h3 { color: var(--color-ice-white); font-size: 2rem; }
.fejlodes-lens p { max-width: 30ch; }
.fejlodes-lens ol { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding-left: 1.25rem; font-size: var(--text-lead); font-weight: 700; line-height: 1.35; }
.fejlodes-combat { position: relative; overflow: hidden; background: var(--color-royal-purple); color: var(--color-ice-white); }
.fejlodes-combat::before { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, transparent 30%, rgba(8,174,184,.1) 30.2%, transparent 31%), radial-gradient(circle at 80% 20%, rgba(240,90,40,.15), transparent 25%); content: ""; }
.fejlodes-combat__container { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.fejlodes-combat__head { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fejlodes-combat__head > * { margin: 0; }
.fejlodes-combat__head h2 { color: var(--color-ice-white); }
.fejlodes-combat__head p { max-width: 58ch; color: #eef0f7; }
.fejlodes-combat__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); width: 100%; }
.fejlodes-combat-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid rgba(247,249,252,.55); border-radius: var(--radius-card); background: rgba(255,255,255,.1); padding: var(--space-5); }
.fejlodes-combat-card > * { margin: 0; }
.fejlodes-combat-card h3 { color: var(--color-ice-white); font-size: var(--text-card-title); }
.fejlodes-combat-card p { color: #f3f4f9; }
.fejlodes-combat-card--orange { border-top: 3px solid var(--color-flame-orange); }
.fejlodes-combat__cta { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fejlodes-combat__cta > * { margin: 0; }
.fejlodes-combat__cta p { max-width: 52ch; }
.fejlodes-team__head { width: min(100%, 47rem); margin-bottom: var(--space-6); }
.fejlodes-team__head p { max-width: 64ch; }
.fejlodes-team__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-6); align-items: start; }
.fejlodes-team__cards { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.fejlodes-team-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-border); border-top: 3px solid var(--color-electric-turquoise); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); }
.fejlodes-team-card > * { margin: 0; }
.fejlodes-team-card p { max-width: 64ch; }
.fejlodes-team-card--lavender { border-top-color: var(--color-royal-purple); background: var(--color-soft-lavender); }
.fejlodes-team__visual-panel { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid rgba(247,249,252,.55); border-radius: var(--radius-panel); background: var(--color-royal-purple); color: var(--color-ice-white); padding: var(--space-4); }
.fejlodes-team__visual-panel > * { margin: 0; }
.fejlodes-team__visual-panel figure { width: 100%; }
.fejlodes-team__visual-panel img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-card); }
.fejlodes-team__visual-panel h3 { color: var(--color-ice-white); }
.fejlodes-team__visual-panel p { max-width: 36ch; }
.fejlodes-modes__head { width: min(100%, 44rem); margin-bottom: var(--space-6); }
.fejlodes-modes__head p { max-width: 60ch; }
.fejlodes-modes__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.fejlodes-mode-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-5); color: var(--color-text); text-decoration: none; transition: transform var(--transition-base), border-color var(--transition-fast); }
.fejlodes-mode-card > * { margin: 0; }
.fejlodes-mode-card:hover { transform: translateY(-4px); border-color: var(--color-electric-turquoise); color: var(--color-text); text-decoration: none; }
.fejlodes-mode-card h3 { font-size: 1.65rem; }
.fejlodes-mode-card p { font-size: var(--text-sm); line-height: 1.5; }
.fejlodes-mode-card--orange { border-top: 3px solid var(--color-flame-orange); }
.fejlodes-modes__summary { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); background: var(--color-graphite); color: var(--color-ice-white); padding: var(--space-5); }
.fejlodes-modes__summary > * { margin: 0; }
.fejlodes-modes__summary h3 { color: var(--color-ice-white); }
.fejlodes-modes__summary p { flex: 1 1 32rem; min-width: 0; max-width: 72ch; }
.fejlodes-modes__summary a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.fejlodes-resources__head { width: min(100%, 48rem); margin-bottom: var(--space-6); }
.fejlodes-resources__head p { max-width: 64ch; }
.fejlodes-resources__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; }
.fejlodes-resources__cards { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); }
.fejlodes-resource-card { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); min-width: 0; border: 1px solid rgba(85,37,138,.2); border-radius: var(--radius-card); background: var(--color-soft-lavender); padding: var(--space-5); }
.fejlodes-resource-card > * { min-width: 0; }
.fejlodes-resource-card div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fejlodes-resource-card div > * { margin: 0; }
.fejlodes-resource-card p { max-width: 55ch; }
.fejlodes-checkpoint { position: sticky; top: var(--space-6); display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); border: 1px solid var(--color-border); border-top: 4px solid var(--color-flame-orange); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-6); box-shadow: var(--shadow-panel); }
.fejlodes-checkpoint > * { margin: 0; }
.fejlodes-checkpoint ul { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin: 0; padding-left: 1.25rem; font-weight: 600; }
.fejlodes-beginner__head { width: min(100%, 45rem); margin-inline: auto; align-items: center; text-align: center; margin-bottom: var(--space-6); }
.fejlodes-beginner__head p { max-width: 62ch; }
.fejlodes-beginner__path { display: flex; min-width: 0; flex-direction: column; gap: var(--space-4); width: min(100%, 52rem); margin-inline: auto; }
.fejlodes-beginner__path > article { display: grid; grid-template-columns: minmax(3rem, 1fr) minmax(0, 11fr); gap: var(--space-4); min-width: 0; border-left: 2px solid var(--color-line-silver); padding: 0 0 var(--space-4) var(--space-4); }
.fejlodes-beginner__path > article > * { min-width: 0; }
.fejlodes-beginner__path > article:last-child { border-left-color: var(--color-royal-purple); }
.fejlodes-beginner__path div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.fejlodes-beginner__path div > * { margin: 0; }
.fejlodes-beginner__path p { max-width: 52ch; }
.fejlodes-beginner__path a, .fejlodes-beginner__links a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.fejlodes-beginner__links { display: flex; min-width: 0; flex-wrap: wrap; gap: var(--space-5); width: min(100%, 52rem); margin: var(--space-5) auto 0; }
.fejlodes-closing__disclaimer { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: min(100%, 45rem); margin-bottom: var(--space-6); }
.fejlodes-closing__disclaimer > * { margin: 0; }
.fejlodes-closing__disclaimer p { max-width: 68ch; }
.fejlodes-closing__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.fejlodes-closing-card { display: flex; min-width: 0; min-height: 12rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-3); border: 1px solid var(--color-border); border-left: 4px solid var(--color-electric-turquoise); border-radius: var(--radius-card); background: var(--color-paper-white); padding: var(--space-6); color: var(--color-text); text-decoration: none; box-shadow: var(--shadow-panel); transition: transform var(--transition-base), border-color var(--transition-fast); }
.fejlodes-closing-card > * { margin: 0; }
.fejlodes-closing-card:hover { transform: translateY(-4px); color: var(--color-text); text-decoration: none; }
.fejlodes-closing-card h3 { font-size: 2rem; }
.fejlodes-closing-card p { max-width: 36ch; }
.fejlodes-closing-card--orange { border-color: var(--color-flame-orange); background: var(--color-flame-orange); }
.fejlodes-closing-card--orange .eyebrow { color: var(--color-graphite); }
@media (max-width: 67.49rem) { .fejlodes-priority__grid, .fejlodes-resources__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .fejlodes-lens, .fejlodes-checkpoint { position: static; width: 100%; } }
@media (max-width: 65rem) { .fejlodes-roadmap__grid, .fejlodes-modes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 61.24rem) { .fejlodes-hero__grid { grid-template-columns: minmax(0, 1fr); } .fejlodes-hero__visual { width: min(100%, 38.75rem); justify-self: center; } .fejlodes-team__grid { grid-template-columns: minmax(0, 1fr); } .fejlodes-team__visual-panel { width: 100%; } }
@media (max-width: 59.99rem) { .fejlodes-combat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fejlodes-combat__grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 53.74rem) { .fejlodes-definitions__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 51.24rem) { .fejlodes-beginner__path { width: 100%; } .fejlodes-beginner__path > article { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); border-left: 0; border-top: 2px solid var(--color-line-silver); padding: var(--space-4) 0 0; } }
@media (max-width: 44.99rem) { .fejlodes-closing__cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 43.74rem) { .fejlodes-roadmap__grid, .fejlodes-modes__grid, .fejlodes-combat__grid { grid-template-columns: minmax(0, 1fr); } .fejlodes-combat__grid > :last-child { grid-column: auto; } }
@media (max-width: 47.99rem) { .fejlodes-page .section { padding-block: 3.5rem; } .fejlodes-page .section--compact { padding-block: 3.5rem; } .fejlodes-hero__grid { gap: var(--space-5); } .fejlodes-hero h1 { font-size: 2.5rem; line-height: 1.05; } .fejlodes-hero__lead { max-width: 40ch; font-size: 1.125rem; line-height: 1.5; } .fejlodes-hero__proofs { grid-template-columns: minmax(0, 1fr); } .fejlodes-hero__button { width: 100%; } .fejlodes-section-head h2, .fejlodes-combat__head h2, .fejlodes-closing__disclaimer h2 { font-size: 2rem; line-height: 1.125; } .fejlodes-roadcard, .fejlodes-priority-item, .fejlodes-resource-card { grid-template-columns: 2rem minmax(0, 1fr); } .fejlodes-definition, .fejlodes-team-card, .fejlodes-mode-card, .fejlodes-resource-card, .fejlodes-checkpoint { padding: var(--space-5); } .fejlodes-combat__grid { gap: var(--space-4); } .fejlodes-combat-card { padding: var(--space-5); } .fejlodes-combat__cta { width: 100%; } .fejlodes-combat__cta .button { width: 100%; } .fejlodes-modes__summary { align-items: flex-start; } .fejlodes-beginner__links { flex-direction: column; gap: var(--space-2); width: 100%; } .fejlodes-beginner__links a { width: 100%; } .fejlodes-closing-card { min-height: 10rem; padding: var(--space-5); } }
@media (prefers-reduced-motion: reduce) { .fejlodes-roadcard, .fejlodes-mode-card, .fejlodes-closing-card { transition: none; } .fejlodes-roadcard:hover, .fejlodes-mode-card:hover, .fejlodes-closing-card:hover { transform: none; } }