| :root { |
| --bg: #07111d; |
| --bg-soft: #0d1827; |
| --panel: rgba(12, 23, 38, 0.84); |
| --panel-strong: rgba(17, 31, 49, 0.94); |
| --line: rgba(151, 184, 214, 0.17); |
| --text: #edf3fb; |
| --muted: #97aac0; |
| --gold: #f0cf8e; |
| --teal: #77dfd0; |
| --green: #91e5a5; |
| --amber: #f4c16e; |
| --red: #f08f88; |
| --shadow: 0 24px 60px rgba(0, 0, 0, 0.34); |
| --radius: 24px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| margin: 0; |
| color: var(--text); |
| background: |
| radial-gradient(circle at top left, rgba(47, 120, 173, 0.2), transparent 32%), |
| radial-gradient(circle at top right, rgba(240, 207, 142, 0.12), transparent 28%), |
| linear-gradient(180deg, #08111d 0%, #07111d 44%, #0a1522 100%); |
| font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif; |
| } |
|
|
| body::before { |
| content: ""; |
| position: fixed; |
| inset: 0; |
| pointer-events: none; |
| background-image: |
| linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); |
| background-size: 48px 48px; |
| mask-image: linear-gradient(180deg, black 35%, transparent 100%); |
| z-index: 0; |
| } |
|
|
| .page-shell { |
| width: min(1200px, calc(100vw - 32px)); |
| margin: 0 auto; |
| padding: 36px 0 80px; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| |
|
|
| .hero { |
| display: grid; |
| grid-template-columns: 1.5fr 0.9fr; |
| gap: 24px; |
| align-items: stretch; |
| margin-bottom: 40px; |
| } |
|
|
| .hero-copy, |
| .hero-panel, |
| .panel, |
| .card, |
| .cluster-card, |
| .evidence-card, |
| .harness-card, |
| .law-card, |
| .antipattern-card, |
| .diagram-card { |
| border: 1px solid var(--line); |
| background: var(--panel); |
| box-shadow: var(--shadow); |
| backdrop-filter: blur(18px); |
| } |
|
|
| .hero-copy { |
| border-radius: 28px; |
| padding: 36px; |
| min-height: 320px; |
| } |
|
|
| .hero-panel, |
| .panel { |
| border-radius: var(--radius); |
| padding: 24px; |
| } |
|
|
| .eyebrow, |
| .kicker { |
| margin: 0 0 10px; |
| color: var(--teal); |
| font-size: 0.82rem; |
| text-transform: uppercase; |
| letter-spacing: 0.18em; |
| } |
|
|
| h1, |
| h2, |
| h3 { |
| font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; |
| font-weight: 600; |
| letter-spacing: -0.03em; |
| } |
|
|
| h1 { |
| font-size: clamp(2.6rem, 6vw, 5rem); |
| line-height: 0.95; |
| margin: 0 0 18px; |
| max-width: 14ch; |
| } |
|
|
| h2 { |
| margin: 0; |
| font-size: clamp(1.8rem, 3vw, 2.7rem); |
| } |
|
|
| h3 { |
| margin-top: 0; |
| font-size: 1.25rem; |
| } |
|
|
| .lede { |
| color: var(--muted); |
| font-size: 1.08rem; |
| line-height: 1.7; |
| max-width: 58ch; |
| margin: 0; |
| } |
|
|
| .summary-stat { |
| display: flex; |
| align-items: baseline; |
| justify-content: space-between; |
| padding: 16px 0; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .summary-stat:last-child { |
| border-bottom: 0; |
| padding-bottom: 0; |
| } |
|
|
| .summary-stat strong { |
| font-size: 1.8rem; |
| font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| } |
|
|
| .summary-stat span { |
| color: var(--muted); |
| } |
|
|
| |
|
|
| .section { |
| margin-top: 48px; |
| } |
|
|
| .section-heading { |
| display: flex; |
| justify-content: space-between; |
| gap: 20px; |
| align-items: end; |
| margin-bottom: 18px; |
| } |
|
|
| |
|
|
| .cards { |
| display: grid; |
| gap: 18px; |
| } |
|
|
| .cards.two { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .cards.three { |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| } |
|
|
| .cards.four { |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| } |
|
|
| .card, |
| .cluster-card, |
| .evidence-card, |
| .harness-card, |
| .law-card, |
| .antipattern-card, |
| .diagram-card { |
| border-radius: 22px; |
| padding: 22px; |
| } |
|
|
| .card .label, |
| .cluster-card .label, |
| .harness-card .label { |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.14em; |
| font-size: 0.74rem; |
| margin-bottom: 12px; |
| } |
|
|
| .metric { |
| font-size: 2.4rem; |
| font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| margin: 0 0 8px; |
| } |
|
|
| .supporting { |
| color: var(--muted); |
| line-height: 1.65; |
| margin: 0; |
| } |
|
|
| .split { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 18px; |
| margin-top: 18px; |
| } |
|
|
| |
|
|
| .matrix-wrap { |
| overflow-x: auto; |
| border-radius: var(--radius); |
| border: 1px solid var(--line); |
| background: var(--panel); |
| backdrop-filter: blur(18px); |
| box-shadow: var(--shadow); |
| } |
|
|
| .matrix-table { |
| width: 100%; |
| border-collapse: collapse; |
| min-width: 540px; |
| } |
|
|
| .matrix-table th, |
| .matrix-table td { |
| padding: 14px 16px; |
| border-bottom: 1px solid var(--line); |
| font-size: 0.9rem; |
| vertical-align: middle; |
| } |
|
|
| .matrix-table th { |
| font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| font-size: 1rem; |
| font-weight: 600; |
| letter-spacing: -0.01em; |
| color: var(--text); |
| border-bottom: 2px solid var(--line); |
| } |
|
|
| .matrix-table th:first-child, |
| .matrix-table td:first-child { |
| color: var(--text); |
| font-weight: 500; |
| text-align: left; |
| } |
|
|
| .matrix-table td:not(:first-child) { |
| text-align: center; |
| } |
|
|
| .matrix-table tr:last-child td { |
| border-bottom: 0; |
| } |
|
|
| .fit-badge { |
| display: inline-block; |
| padding: 4px 10px; |
| border-radius: 999px; |
| font-size: 0.76rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| } |
|
|
| .fit-PERFEKT { background: rgba(145, 229, 165, 0.15); color: var(--green); border: 1px solid rgba(145, 229, 165, 0.3); } |
| .fit-GUT { background: rgba(119, 223, 208, 0.12); color: var(--teal); border: 1px solid rgba(119, 223, 208, 0.25); } |
| .fit-OKAY { background: rgba(240, 207, 142, 0.12); color: var(--amber); border: 1px solid rgba(240, 207, 142, 0.25); } |
| .fit-MITTEL { background: rgba(151, 170, 192, 0.08); color: var(--muted); border: 1px solid rgba(151, 170, 192, 0.18); } |
| .fit-SCHLECHT { background: rgba(240, 143, 136, 0.10); color: var(--red); border: 1px solid rgba(240, 143, 136, 0.22); } |
|
|
| .fit-GEFAEHRLICH { |
| background: rgba(240, 80, 70, 0.15); |
| color: #ff6b62; |
| border: 1px solid rgba(240, 80, 70, 0.35); |
| animation: pulse-red 2s ease-in-out infinite; |
| } |
|
|
| @keyframes pulse-red { |
| 0%, 100% { box-shadow: none; } |
| 50% { box-shadow: 0 0 8px rgba(240, 80, 70, 0.5); } |
| } |
|
|
| |
|
|
| .harness-card { |
| cursor: pointer; |
| transition: transform 0.2s ease, box-shadow 0.2s ease; |
| } |
|
|
| .harness-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 32px 80px rgba(0, 0, 0, 0.44); |
| } |
|
|
| .harness-header { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| margin-bottom: 14px; |
| } |
|
|
| .harness-status { |
| display: inline-block; |
| padding: 4px 10px; |
| border-radius: 999px; |
| font-size: 0.74rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| white-space: nowrap; |
| flex-shrink: 0; |
| } |
|
|
| .status-aktiv { |
| background: rgba(119, 223, 208, 0.12); |
| color: var(--teal); |
| border: 1px solid rgba(119, 223, 208, 0.28); |
| } |
|
|
| .status-pending { |
| background: rgba(151, 170, 192, 0.08); |
| color: var(--muted); |
| border: 1px solid rgba(151, 170, 192, 0.18); |
| } |
|
|
| .harness-color-bar { |
| width: 4px; |
| border-radius: 999px; |
| flex-shrink: 0; |
| align-self: stretch; |
| } |
|
|
| .color-teal { background: var(--teal); } |
| .color-gold { background: var(--gold); } |
| .color-green { background: var(--green); } |
| .color-amber { background: var(--amber); } |
| .color-red { background: var(--red); } |
| .color-muted { background: var(--muted); } |
|
|
| .harness-body { |
| display: flex; |
| gap: 14px; |
| } |
|
|
| .harness-content { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .harness-details { |
| max-height: 0; |
| overflow: hidden; |
| transition: max-height 0.4s ease, opacity 0.4s ease; |
| opacity: 0; |
| } |
|
|
| .harness-card.expanded .harness-details { |
| max-height: 600px; |
| opacity: 1; |
| } |
|
|
| .harness-expand-hint { |
| margin-top: 14px; |
| font-size: 0.8rem; |
| color: var(--muted); |
| text-align: center; |
| letter-spacing: 0.06em; |
| } |
|
|
| .harness-card.expanded .harness-expand-hint { |
| display: none; |
| } |
|
|
| .harness-stats-row { |
| display: flex; |
| gap: 18px; |
| flex-wrap: wrap; |
| margin-top: 16px; |
| padding-top: 16px; |
| border-top: 1px solid var(--line); |
| } |
|
|
| .harness-stat { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .harness-stat .stat-label { |
| color: var(--muted); |
| font-size: 0.74rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| } |
|
|
| .harness-stat .stat-value { |
| font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| font-size: 1.2rem; |
| } |
|
|
| .harness-strengths, |
| .harness-weaknesses { |
| margin-top: 14px; |
| } |
|
|
| .harness-strengths h4, |
| .harness-weaknesses h4 { |
| font-size: 0.8rem; |
| text-transform: uppercase; |
| letter-spacing: 0.14em; |
| color: var(--muted); |
| margin: 0 0 8px; |
| font-weight: 500; |
| font-family: inherit; |
| } |
|
|
| .bullet-list { |
| margin: 0; |
| padding-left: 18px; |
| color: var(--muted); |
| line-height: 1.65; |
| } |
|
|
| .arch-link { |
| display: inline-block; |
| margin-top: 12px; |
| padding: 7px 14px; |
| border-radius: 999px; |
| border: 1px solid var(--line); |
| color: var(--teal); |
| font-size: 0.82rem; |
| text-decoration: none; |
| transition: background 0.2s ease, border-color 0.2s ease; |
| } |
|
|
| .arch-link:hover { |
| background: rgba(119, 223, 208, 0.08); |
| border-color: rgba(119, 223, 208, 0.3); |
| } |
|
|
| .placeholder-note { |
| color: var(--muted); |
| font-size: 0.92rem; |
| line-height: 1.6; |
| font-style: italic; |
| padding-top: 6px; |
| } |
|
|
| |
|
|
| .diagram-card { |
| border-radius: 22px; |
| padding: 22px; |
| text-decoration: none; |
| color: inherit; |
| display: block; |
| transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; |
| } |
|
|
| .diagram-card:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 32px 80px rgba(0, 0, 0, 0.44); |
| background: rgba(17, 31, 49, 0.94); |
| } |
|
|
| .diagram-card .label { |
| color: var(--muted); |
| text-transform: uppercase; |
| letter-spacing: 0.14em; |
| font-size: 0.74rem; |
| margin-bottom: 8px; |
| } |
|
|
| .diagram-card h3 { |
| margin: 0 0 8px; |
| font-size: 1.15rem; |
| } |
|
|
| .diagram-card .supporting { |
| font-size: 0.88rem; |
| } |
|
|
| |
|
|
| .law-card { |
| border-radius: 22px; |
| padding: 22px; |
| display: flex; |
| gap: 16px; |
| border-left-width: 3px; |
| border-left-style: solid; |
| } |
|
|
| .law-card.law-teal { border-left-color: var(--teal); } |
| .law-card.law-green { border-left-color: var(--green); } |
| .law-card.law-gold { border-left-color: var(--gold); } |
| .law-card.law-amber { border-left-color: var(--amber); } |
| .law-card.law-red { border-left-color: var(--red); } |
| .law-card.law-muted { border-left-color: var(--muted); } |
|
|
| .law-number { |
| font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| font-size: 2rem; |
| line-height: 1; |
| color: var(--muted); |
| opacity: 0.5; |
| flex-shrink: 0; |
| width: 2.4rem; |
| text-align: right; |
| } |
|
|
| .law-content { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .law-content h3 { |
| margin: 0 0 8px; |
| font-size: 1.1rem; |
| } |
|
|
| .law-beweis { |
| margin-top: 10px; |
| padding-top: 10px; |
| border-top: 1px solid var(--line); |
| color: var(--muted); |
| font-size: 0.84rem; |
| } |
|
|
| .law-beweis::before { |
| content: "Beweis: "; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| font-size: 0.74rem; |
| color: var(--muted); |
| opacity: 0.7; |
| } |
|
|
| |
|
|
| .antipattern-card { |
| border-radius: 22px; |
| padding: 22px; |
| background: rgba(240, 143, 136, 0.05); |
| border: 1px solid rgba(240, 143, 136, 0.15); |
| } |
|
|
| .antipattern-card .severity { |
| display: inline-block; |
| padding: 3px 8px; |
| border-radius: 999px; |
| font-size: 0.72rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| margin-bottom: 10px; |
| } |
|
|
| .severity-kritisch { |
| background: rgba(240, 80, 70, 0.2); |
| color: #ff6b62; |
| border: 1px solid rgba(240, 80, 70, 0.35); |
| } |
|
|
| .severity-hoch { |
| background: rgba(240, 143, 136, 0.15); |
| color: var(--red); |
| border: 1px solid rgba(240, 143, 136, 0.28); |
| } |
|
|
| .severity-mittel { |
| background: rgba(244, 193, 110, 0.1); |
| color: var(--amber); |
| border: 1px solid rgba(244, 193, 110, 0.22); |
| } |
|
|
| .antipattern-folge { |
| margin-top: 10px; |
| font-size: 0.84rem; |
| color: var(--muted); |
| padding-top: 10px; |
| border-top: 1px solid rgba(240, 143, 136, 0.12); |
| } |
|
|
| .antipattern-folge::before { |
| content: "Folge: "; |
| font-size: 0.72rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| font-weight: 600; |
| color: var(--red); |
| } |
|
|
| |
|
|
| .wave-phases { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 0; |
| margin-top: 18px; |
| border-radius: var(--radius); |
| overflow: hidden; |
| border: 1px solid var(--line); |
| box-shadow: var(--shadow); |
| } |
|
|
| .wave-phase { |
| padding: 28px; |
| background: var(--panel); |
| backdrop-filter: blur(18px); |
| position: relative; |
| } |
|
|
| .wave-phase:not(:last-child) { |
| border-right: 1px solid var(--line); |
| } |
|
|
| .wave-phase-header { |
| display: flex; |
| align-items: center; |
| gap: 14px; |
| margin-bottom: 16px; |
| } |
|
|
| .wave-phase-number { |
| width: 36px; |
| height: 36px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| font-size: 1.1rem; |
| font-weight: 600; |
| flex-shrink: 0; |
| } |
|
|
| .phase-teal { background: rgba(119, 223, 208, 0.15); color: var(--teal); border: 1px solid rgba(119, 223, 208, 0.3); } |
| .phase-gold { background: rgba(240, 207, 142, 0.15); color: var(--gold); border: 1px solid rgba(240, 207, 142, 0.3); } |
| .phase-green { background: rgba(145, 229, 165, 0.15); color: var(--green); border: 1px solid rgba(145, 229, 165, 0.3); } |
|
|
| .wave-phase h3 { |
| margin: 0; |
| font-size: 1.3rem; |
| } |
|
|
| .wave-phase .supporting { |
| margin-bottom: 16px; |
| } |
|
|
| .wave-steps { |
| display: grid; |
| gap: 8px; |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| .wave-steps li { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| font-size: 0.88rem; |
| color: var(--muted); |
| } |
|
|
| .wave-steps li::before { |
| content: ""; |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--line); |
| flex-shrink: 0; |
| } |
|
|
| .wave-arrow { |
| position: absolute; |
| right: -14px; |
| top: 50%; |
| transform: translateY(-50%); |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| background: var(--bg-soft); |
| border: 1px solid var(--line); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--muted); |
| font-size: 0.9rem; |
| z-index: 2; |
| } |
|
|
| .wave-checkpoints { |
| margin-top: 18px; |
| padding: 20px 24px; |
| border-radius: var(--radius); |
| border: 1px solid var(--line); |
| background: var(--panel); |
| backdrop-filter: blur(18px); |
| display: flex; |
| gap: 24px; |
| flex-wrap: wrap; |
| } |
|
|
| .wave-checkpoint { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| color: var(--muted); |
| font-size: 0.88rem; |
| } |
|
|
| .checkpoint-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| background: var(--teal); |
| flex-shrink: 0; |
| } |
|
|
| |
|
|
| .cost-table-wrap { |
| border-radius: var(--radius); |
| overflow: hidden; |
| border: 1px solid var(--line); |
| background: var(--panel); |
| backdrop-filter: blur(18px); |
| box-shadow: var(--shadow); |
| margin-bottom: 18px; |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| } |
|
|
| th, |
| td { |
| text-align: left; |
| padding: 14px 16px; |
| border-bottom: 1px solid var(--line); |
| vertical-align: top; |
| color: var(--muted); |
| line-height: 1.65; |
| } |
|
|
| th { |
| color: var(--text); |
| font-size: 0.84rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| font-weight: 600; |
| } |
|
|
| td:first-child { |
| color: var(--text); |
| font-weight: 500; |
| } |
|
|
| tr:last-child td { |
| border-bottom: 0; |
| } |
|
|
| .cost-bar-wrap { |
| height: 8px; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.06); |
| overflow: hidden; |
| margin-top: 6px; |
| } |
|
|
| .cost-bar { |
| height: 100%; |
| border-radius: 999px; |
| background: linear-gradient(90deg, var(--teal), var(--green)); |
| } |
|
|
| .cost-bar.low { |
| background: linear-gradient(90deg, var(--green), #6fde84); |
| } |
|
|
| .cost-bar.mid { |
| background: linear-gradient(90deg, var(--amber), var(--gold)); |
| } |
|
|
| .cost-bar.high { |
| background: linear-gradient(90deg, var(--red), #e05f58); |
| } |
|
|
| |
|
|
| .pill-row { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| margin-top: 12px; |
| } |
|
|
| .pill { |
| padding: 7px 10px; |
| border-radius: 999px; |
| background: rgba(255, 255, 255, 0.06); |
| color: var(--text); |
| font-size: 0.86rem; |
| } |
|
|
| |
|
|
| .tutorial-section { |
| margin-top: 18px; |
| padding-top: 18px; |
| border-top: 1px solid var(--line); |
| display: flex; |
| flex-direction: column; |
| gap: 18px; |
| } |
|
|
| .tutorial-block { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .tutorial-heading { |
| margin: 0; |
| font-size: 0.78rem; |
| text-transform: uppercase; |
| letter-spacing: 0.16em; |
| color: var(--teal); |
| font-weight: 600; |
| font-family: inherit; |
| } |
|
|
| .tutorial-steps { |
| margin: 0; |
| padding-left: 20px; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .tutorial-steps li { |
| font-size: 0.88rem; |
| color: var(--muted); |
| line-height: 1.5; |
| } |
|
|
| |
| .adhs-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 10px; |
| } |
|
|
| .adhs-card { |
| background: rgba(255, 255, 255, 0.03); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 12px; |
| padding: 12px; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .adhs-card-header { |
| display: flex; |
| align-items: center; |
| gap: 7px; |
| } |
|
|
| .adhs-emoji { |
| font-size: 1rem; |
| } |
|
|
| .adhs-label { |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--gold); |
| font-weight: 600; |
| } |
|
|
| .adhs-text { |
| font-size: 0.82rem; |
| color: var(--muted); |
| line-height: 1.55; |
| margin: 0; |
| } |
|
|
| |
| .wellenmodus-grid { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 12px; |
| align-items: start; |
| } |
|
|
| .wm-role { |
| background: rgba(119, 223, 208, 0.1); |
| border: 1px solid rgba(119, 223, 208, 0.2); |
| color: var(--teal); |
| border-radius: 999px; |
| padding: 6px 14px; |
| font-size: 0.82rem; |
| font-weight: 600; |
| white-space: nowrap; |
| } |
|
|
| .wm-meta { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .wm-entry, |
| .wm-exit { |
| font-size: 0.84rem; |
| color: var(--muted); |
| margin: 0; |
| line-height: 1.5; |
| } |
|
|
| |
| .handoff-grid { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .handoff-card { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 10px; |
| align-items: start; |
| padding: 10px 12px; |
| background: rgba(255, 255, 255, 0.02); |
| border: 1px solid rgba(255, 255, 255, 0.05); |
| border-radius: 10px; |
| } |
|
|
| .handoff-target { |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--green); |
| font-weight: 600; |
| white-space: nowrap; |
| } |
|
|
| .handoff-hint { |
| font-size: 0.82rem; |
| color: var(--muted); |
| margin: 0; |
| line-height: 1.5; |
| } |
|
|
| |
|
|
| .router-section { |
| margin-top: 40px; |
| } |
|
|
| .router-input-wrap { |
| display: flex; |
| flex-direction: column; |
| gap: 14px; |
| border-radius: var(--radius); |
| border: 1px solid var(--line); |
| background: var(--panel); |
| box-shadow: var(--shadow); |
| backdrop-filter: blur(18px); |
| padding: 24px; |
| } |
|
|
| #routerInput { |
| width: 100%; |
| min-height: 80px; |
| padding: 14px 16px; |
| border-radius: 14px; |
| border: 1px solid var(--line); |
| background: rgba(255, 255, 255, 0.04); |
| color: var(--text); |
| font-family: inherit; |
| font-size: 0.95rem; |
| line-height: 1.6; |
| resize: vertical; |
| outline: none; |
| transition: border-color 0.2s ease; |
| } |
|
|
| #routerInput:focus { |
| border-color: rgba(119, 223, 208, 0.4); |
| } |
|
|
| #routerInput::placeholder { |
| color: var(--muted); |
| opacity: 0.7; |
| } |
|
|
| .router-tags { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .router-tag { |
| padding: 6px 12px; |
| border-radius: 999px; |
| border: 1px solid var(--line); |
| background: rgba(255, 255, 255, 0.04); |
| color: var(--muted); |
| font-size: 0.82rem; |
| cursor: pointer; |
| transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; |
| } |
|
|
| .router-tag:hover { |
| background: rgba(119, 223, 208, 0.08); |
| border-color: rgba(119, 223, 208, 0.3); |
| color: var(--text); |
| } |
|
|
| .router-btn { |
| align-self: flex-start; |
| padding: 10px 20px; |
| border-radius: 999px; |
| border: none; |
| background: linear-gradient(135deg, var(--teal), #5bc4b6); |
| color: #07111d; |
| font-family: inherit; |
| font-size: 0.9rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: opacity 0.2s ease, transform 0.2s ease; |
| } |
|
|
| .router-btn:hover { |
| opacity: 0.88; |
| transform: translateY(-1px); |
| } |
|
|
| .router-result { |
| margin-top: 18px; |
| animation: fadeIn 0.3s ease; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(6px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .router-card { |
| border-radius: 20px; |
| padding: 22px 24px; |
| background: var(--panel); |
| backdrop-filter: blur(18px); |
| border: 1px solid var(--line); |
| box-shadow: var(--shadow); |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .router-wave-badge { |
| display: inline-block; |
| padding: 4px 10px; |
| border-radius: 999px; |
| font-size: 0.72rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| background: rgba(119, 223, 208, 0.1); |
| color: var(--teal); |
| border: 1px solid rgba(119, 223, 208, 0.2); |
| align-self: flex-start; |
| } |
|
|
| .router-harness-name { |
| margin: 0; |
| font-size: 1.4rem; |
| letter-spacing: -0.02em; |
| } |
|
|
| .router-reason { |
| color: var(--muted); |
| font-size: 0.92rem; |
| line-height: 1.65; |
| margin: 0; |
| } |
|
|
| .router-actions { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| margin-top: 4px; |
| } |
|
|
| .router-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| padding: 7px 14px; |
| border-radius: 999px; |
| border: 1px solid var(--line); |
| color: var(--teal); |
| font-size: 0.82rem; |
| text-decoration: none; |
| transition: background 0.2s ease, border-color 0.2s ease; |
| } |
|
|
| .router-link:hover { |
| background: rgba(119, 223, 208, 0.08); |
| border-color: rgba(119, 223, 208, 0.3); |
| } |
|
|
| .router-cost { |
| font-size: 0.82rem; |
| color: var(--muted); |
| } |
|
|
| .border-teal { border-left: 3px solid var(--teal); } |
| .border-gold { border-left: 3px solid var(--gold); } |
| .border-green { border-left: 3px solid var(--green); } |
| .border-amber { border-left: 3px solid var(--amber); } |
|
|
| .hidden { display: none; } |
|
|
| |
|
|
| .muted { |
| color: var(--muted); |
| } |
|
|
| .subnote { |
| color: var(--muted); |
| font-size: 0.86rem; |
| margin-top: 10px; |
| line-height: 1.65; |
| } |
|
|
| |
|
|
| @media (max-width: 980px) { |
| .hero, |
| .split, |
| .cards.two, |
| .cards.three, |
| .cards.four { |
| grid-template-columns: 1fr; |
| } |
|
|
| .wave-phases { |
| grid-template-columns: 1fr; |
| } |
|
|
| .wave-phase:not(:last-child) { |
| border-right: none; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .wave-arrow { |
| display: none; |
| } |
| } |
|
|
| @media (max-width: 640px) { |
| .page-shell { |
| width: min(100vw - 20px, 1200px); |
| padding-top: 18px; |
| } |
|
|
| .hero-copy, |
| .hero-panel, |
| .panel, |
| .card, |
| .cluster-card, |
| .harness-card, |
| .law-card, |
| .antipattern-card, |
| .diagram-card { |
| padding: 18px; |
| } |
|
|
| h1 { |
| font-size: clamp(2rem, 8vw, 3rem); |
| } |
| } |
|
|
| |
| |
| |
|
|
| .site-nav { |
| display: flex; |
| align-items: center; |
| gap: 24px; |
| padding: 16px 0; |
| margin-bottom: 24px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .nav-brand { |
| font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif; |
| font-size: 1.1rem; |
| font-weight: 600; |
| color: var(--text); |
| text-decoration: none; |
| letter-spacing: -0.02em; |
| } |
|
|
| .nav-links { |
| display: flex; |
| gap: 4px; |
| } |
|
|
| .nav-link { |
| padding: 7px 14px; |
| border-radius: 999px; |
| font-size: 0.84rem; |
| color: var(--muted); |
| text-decoration: none; |
| transition: background 0.2s ease, color 0.2s ease; |
| } |
|
|
| .nav-link:hover { |
| background: rgba(255, 255, 255, 0.05); |
| color: var(--text); |
| } |
|
|
| .nav-link.active { |
| background: rgba(119, 223, 208, 0.12); |
| color: var(--teal); |
| border: 1px solid rgba(119, 223, 208, 0.2); |
| } |
|
|
| |
| .tutorial-page { |
| max-width: 860px; |
| margin: 0 auto; |
| padding-bottom: 80px; |
| } |
|
|
| .tutorial-topbar { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 32px; |
| padding-bottom: 16px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .tutorial-back { |
| color: var(--muted); |
| font-size: 0.88rem; |
| text-decoration: none; |
| transition: color 0.2s ease; |
| } |
|
|
| .tutorial-back:hover { |
| color: var(--teal); |
| } |
|
|
| .tutorial-nav { |
| display: flex; |
| gap: 16px; |
| } |
|
|
| .tutorial-prev, |
| .tutorial-next { |
| font-size: 0.82rem; |
| color: var(--muted); |
| text-decoration: none; |
| transition: color 0.2s ease; |
| } |
|
|
| .tutorial-prev:hover, |
| .tutorial-next:hover { |
| color: var(--teal); |
| } |
|
|
| |
| .tutorial-hero { |
| margin-bottom: 40px; |
| } |
|
|
| .tutorial-hero-badge { |
| display: inline-block; |
| padding: 5px 12px; |
| border-radius: 999px; |
| font-size: 0.74rem; |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| margin-bottom: 14px; |
| } |
|
|
| .tutorial-hero-badge.color-teal { |
| background: rgba(119, 223, 208, 0.12); |
| color: var(--teal); |
| border: 1px solid rgba(119, 223, 208, 0.25); |
| } |
|
|
| .tutorial-hero-badge.color-gold { |
| background: rgba(240, 207, 142, 0.12); |
| color: var(--gold); |
| border: 1px solid rgba(240, 207, 142, 0.25); |
| } |
|
|
| .tutorial-hero-badge.color-green { |
| background: rgba(145, 229, 165, 0.12); |
| color: var(--green); |
| border: 1px solid rgba(145, 229, 165, 0.25); |
| } |
|
|
| .tutorial-hero-badge.color-amber { |
| background: rgba(244, 193, 110, 0.12); |
| color: var(--amber); |
| border: 1px solid rgba(244, 193, 110, 0.25); |
| } |
|
|
| .tutorial-title { |
| font-size: clamp(2.4rem, 5vw, 3.5rem); |
| margin: 0 0 12px; |
| letter-spacing: -0.03em; |
| } |
|
|
| .tutorial-tagline { |
| font-size: 1.1rem; |
| color: var(--muted); |
| margin: 0 0 18px; |
| max-width: 55ch; |
| } |
|
|
| .tutorial-stats { |
| display: flex; |
| gap: 24px; |
| flex-wrap: wrap; |
| } |
|
|
| .t-stat { |
| font-size: 0.88rem; |
| color: var(--muted); |
| } |
|
|
| .t-stat strong { |
| font-family: "Iowan Old Style", Georgia, serif; |
| font-size: 1.1rem; |
| color: var(--text); |
| margin-right: 4px; |
| } |
|
|
| |
| .tutorial-tabs { |
| display: flex; |
| gap: 4px; |
| border-bottom: 1px solid var(--line); |
| margin-bottom: 28px; |
| } |
|
|
| .t-tab { |
| padding: 10px 18px; |
| background: none; |
| border: none; |
| color: var(--muted); |
| font-size: 0.88rem; |
| cursor: pointer; |
| transition: color 0.2s ease; |
| border-bottom: 2px solid transparent; |
| margin-bottom: -1px; |
| } |
|
|
| .t-tab:hover { |
| color: var(--text); |
| } |
|
|
| .t-tab.active { |
| color: var(--teal); |
| border-bottom-color: var(--teal); |
| } |
|
|
| |
| .t-tabcontent { |
| display: none; |
| } |
|
|
| .t-tabcontent.active { |
| display: block; |
| animation: fadeIn 0.25s ease; |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(4px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| .t-section { |
| margin-bottom: 32px; |
| } |
|
|
| .t-section h2 { |
| font-size: 1.5rem; |
| margin: 0 0 16px; |
| } |
|
|
| .t-section h3 { |
| font-size: 1.1rem; |
| margin: 0 0 12px; |
| color: var(--muted); |
| } |
|
|
| |
| .t-steps { |
| list-style: none; |
| padding: 0; |
| margin: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
|
|
| .t-steps li { |
| display: flex; |
| align-items: flex-start; |
| gap: 14px; |
| padding: 14px 16px; |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| } |
|
|
| .t-step-num { |
| width: 28px; |
| height: 28px; |
| border-radius: 50%; |
| background: rgba(119, 223, 208, 0.12); |
| color: var(--teal); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-family: "Iowan Old Style", Georgia, serif; |
| font-size: 0.9rem; |
| font-weight: 600; |
| flex-shrink: 0; |
| } |
|
|
| .t-step-text { |
| font-size: 0.92rem; |
| color: var(--muted); |
| line-height: 1.55; |
| padding-top: 3px; |
| } |
|
|
| |
| .t-welleneinsatz { |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 16px; |
| padding: 18px; |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 16px; |
| align-items: start; |
| } |
|
|
| .t-welleneinsatz-badge { |
| padding: 8px 14px; |
| border-radius: 999px; |
| background: rgba(119, 223, 208, 0.1); |
| border: 1px solid rgba(119, 223, 208, 0.2); |
| color: var(--teal); |
| font-size: 0.82rem; |
| font-weight: 600; |
| white-space: nowrap; |
| } |
|
|
| .t-welleneinsatz-meta { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .t-welleneinsatz-meta p { |
| font-size: 0.88rem; |
| color: var(--muted); |
| margin: 0; |
| line-height: 1.5; |
| } |
|
|
| .t-welleneinsatz-meta strong { |
| color: var(--text); |
| } |
|
|
| |
| .t-handoff { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .t-handoff-card { |
| padding: 14px 16px; |
| background: rgba(145, 229, 165, 0.04); |
| border: 1px solid rgba(145, 229, 165, 0.12); |
| border-radius: 12px; |
| display: grid; |
| grid-template-columns: auto 1fr; |
| gap: 12px; |
| align-items: start; |
| } |
|
|
| .t-handoff-target { |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| color: var(--green); |
| font-weight: 600; |
| padding: 4px 10px; |
| background: rgba(145, 229, 165, 0.08); |
| border-radius: 999px; |
| white-space: nowrap; |
| } |
|
|
| .t-handoff-card p { |
| font-size: 0.88rem; |
| color: var(--muted); |
| margin: 0; |
| line-height: 1.5; |
| } |
|
|
| |
| .t-diagramm { |
| border-radius: 16px; |
| overflow: hidden; |
| border: 1px solid var(--line); |
| background: var(--panel); |
| } |
|
|
| .t-iframe { |
| width: 100%; |
| height: 500px; |
| border: none; |
| display: block; |
| } |
|
|
| |
| .t-annotations { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 12px; |
| } |
|
|
| .t-annotation { |
| padding: 14px; |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 12px; |
| } |
|
|
| .t-ann-badge { |
| display: inline-block; |
| font-size: 0.76rem; |
| font-weight: 600; |
| color: var(--gold); |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| margin-bottom: 8px; |
| } |
|
|
| .t-annotation p { |
| font-size: 0.84rem; |
| color: var(--muted); |
| margin: 0; |
| line-height: 1.5; |
| } |
|
|
| |
| .t-adhs-card { |
| background: rgba(240, 207, 142, 0.04); |
| border: 1px solid rgba(240, 207, 142, 0.12); |
| border-radius: 16px; |
| padding: 20px 22px; |
| } |
|
|
| .t-adhs-header { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 12px; |
| } |
|
|
| .t-adhs-icon { |
| font-size: 1.3rem; |
| } |
|
|
| .t-adhs-header h3 { |
| font-size: 1rem; |
| margin: 0; |
| color: var(--gold); |
| } |
|
|
| .t-adhs-card p { |
| font-size: 0.9rem; |
| color: var(--muted); |
| line-height: 1.65; |
| margin: 0; |
| } |
|
|
| |
| .t-configtable { |
| display: flex; |
| flex-direction: column; |
| gap: 1px; |
| border-radius: 12px; |
| overflow: hidden; |
| border: 1px solid var(--line); |
| } |
|
|
| .t-configrow { |
| display: grid; |
| grid-template-columns: auto auto 1fr auto; |
| gap: 12px; |
| padding: 12px 14px; |
| background: var(--panel); |
| align-items: center; |
| font-size: 0.85rem; |
| } |
|
|
| .t-configkey { |
| font-family: "Courier New", monospace; |
| color: var(--teal); |
| } |
|
|
| .t-configtype { |
| font-size: 0.72rem; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--muted); |
| padding: 2px 7px; |
| background: rgba(255, 255, 255, 0.04); |
| border-radius: 4px; |
| } |
|
|
| .t-configdesc { |
| color: var(--muted); |
| } |
|
|
| .t-configdefault { |
| font-size: 0.78rem; |
| color: var(--gold); |
| font-style: italic; |
| } |
|
|
| |
| .t-hooks { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .t-hook { |
| padding: 14px 16px; |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 12px; |
| } |
|
|
| .t-hook-header { |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| margin-bottom: 8px; |
| } |
|
|
| .t-hook-header code { |
| font-family: "Courier New", monospace; |
| color: var(--teal); |
| font-size: 0.88rem; |
| } |
|
|
| .t-hook-badge { |
| font-size: 0.68rem; |
| text-transform: uppercase; |
| letter-spacing: 0.1em; |
| padding: 2px 7px; |
| border-radius: 999px; |
| background: rgba(240, 143, 136, 0.12); |
| color: var(--red); |
| } |
|
|
| .t-hook p { |
| font-size: 0.84rem; |
| color: var(--muted); |
| margin: 0; |
| line-height: 1.5; |
| } |
|
|
| |
| .t-faq { |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .t-faq-item { |
| background: var(--panel); |
| border: 1px solid var(--line); |
| border-radius: 12px; |
| overflow: hidden; |
| } |
|
|
| .t-faq-item summary { |
| padding: 14px 16px; |
| font-size: 0.92rem; |
| font-weight: 500; |
| cursor: pointer; |
| list-style: none; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
|
|
| .t-faq-item summary::-webkit-details-marker { display: none; } |
|
|
| .t-faq-item summary::after { |
| content: "+"; |
| font-size: 1.2rem; |
| color: var(--muted); |
| transition: transform 0.2s ease; |
| } |
|
|
| .t-faq-item[open] summary::after { |
| transform: rotate(45deg); |
| } |
|
|
| .t-faq-item p { |
| padding: 0 16px 14px; |
| font-size: 0.88rem; |
| color: var(--muted); |
| line-height: 1.6; |
| margin: 0; |
| } |
|
|
| .t-muted { |
| color: var(--muted); |
| font-size: 0.9rem; |
| font-style: italic; |
| } |
|
|
| |
| .t-level-badge { |
| display: inline-block; |
| font-size: 0.7rem; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| padding: 3px 10px; |
| border-radius: 4px; |
| background: rgba(119, 223, 208, 0.12); |
| color: var(--teal); |
| border: 1px solid rgba(119, 223, 208, 0.3); |
| margin-bottom: 8px; |
| } |
| .t-level-badge.level3 { |
| background: rgba(240, 207, 142, 0.12); |
| color: var(--gold); |
| border-color: rgba(240, 207, 142, 0.3); |
| } |
| .t-level-badge.level4 { |
| background: rgba(145, 229, 165, 0.12); |
| color: var(--green); |
| border-color: rgba(145, 229, 165, 0.3); |
| } |
|
|
| |
| @media (max-width: 640px) { |
| .nav-links { display: none; } |
| .t-annotations { grid-template-columns: 1fr; } |
| .t-configrow { grid-template-columns: 1fr 1fr; } |
| .t-configdesc { display: none; } |
| .t-iframe { height: 300px; } |
| } |
|
|
