:root { font-family: Arial, sans-serif; color: #252339; background: #f8f6fa; --purple: #684890; --muted: #605e6e; --line: #e6ddec; }
* { box-sizing: border-box; }
body { margin: 0; }
.site-header, .home-main, .article-main, footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 1.12rem; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: #e8daf5; color: var(--purple); font-size: 1.5rem; }
.all-projects, .back-link { color: var(--purple); font-weight: 700; text-decoration: none; }
.all-projects:hover, .back-link:hover { text-decoration: underline; }
.brand:focus-visible, .all-projects:focus-visible, .back-link:focus-visible, .topic-card:focus-visible { outline: 3px solid #d38857; outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .topic-card strong { letter-spacing: -.035em; }
.hero { margin-top: 22px; padding: clamp(38px, 7vw, 76px); border-radius: 28px; background: #e9def3; }
.eyebrow, .kicker { margin: 0 0 15px; color: var(--purple); font-size: .77rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { max-width: 790px; margin-bottom: 18px; font-size: clamp(2.35rem, 5vw, 4.15rem); line-height: 1.1; }
.hero p:last-child { max-width: 650px; margin: 0; color: #514762; font-size: 1.1rem; line-height: 1.65; }
.topics { padding: 55px 0 90px; }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 22px; color: var(--muted); }
.section-heading h2 { margin: 0; color: #252339; font-size: 1.7rem; }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.topic-card { display: flex; gap: 25px; min-height: 250px; padding: 29px; border: 1px solid var(--line); border-radius: 24px; background: white; color: inherit; text-decoration: none; box-shadow: 0 10px 25px #3622470b; transition: transform .2s, box-shadow .2s; }
.topic-card:hover { transform: translateY(-4px); box-shadow: 0 15px 29px #3622471d; }
.icon-tile { display: grid; place-items: center; flex: 0 0 100px; width: 100px; height: 100px; border-radius: 21px; background: #f3eafd; }
.icon-tile img { width: 82px; height: 82px; }
.card-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; color: var(--muted); line-height: 1.55; }
.card-copy strong { color: #252339; font-size: 1.55rem; line-height: 1.2; }
.card-copy .kicker { margin: 0; }
.card-link { margin-top: auto; padding-top: 15px; color: var(--purple); font-weight: 800; }
footer { padding-bottom: 30px; color: #85808e; font-size: .86rem; }
.article-main { max-width: 850px; padding: 12px 0 90px; }
.back-link { display: inline-block; margin-bottom: 27px; }
.article-hero { padding: 40px; border-radius: 26px; background: #e9def3; }
.article-hero h1 { max-width: 700px; margin-bottom: 13px; font-size: clamp(2.2rem, 5vw, 3.25rem); line-height: 1.12; }
.article-hero p:last-child { max-width: 650px; margin-bottom: 0; color: #514762; line-height: 1.65; }
.intro { margin: 35px 0 27px; color: #484655; font-size: 1.08rem; line-height: 1.7; }
.example { margin: 0 0 36px; padding: 22px 25px; border-left: 4px solid #a177ca; border-radius: 0 15px 15px 0; background: #f0e9f6; line-height: 1.65; }
.example p { margin-bottom: 0; }
.diagram-section { margin-top: 39px; }
.diagram-section h2 { margin-bottom: 8px; font-size: 1.65rem; }
.diagram-section > p { color: var(--muted); line-height: 1.68; }
.diagram-card { margin: 19px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 19px; background: white; }
.diagram-card img { display: block; width: 100%; height: auto; }
.diagram-card figcaption { padding: 0 8px 5px; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.takeaway { margin-top: 38px; padding: 25px 28px; border-radius: 18px; background: #e9def3; line-height: 1.65; }
.takeaway h2 { margin-bottom: 10px; font-size: 1.35rem; }
.takeaway p { margin: 0; }
@media (max-width: 850px) { .topic-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .site-header, .home-main, .article-main, footer { width: calc(100% - 28px); } .all-projects { font-size: .85rem; } .topic-card { gap: 17px; padding: 20px; } .icon-tile { flex-basis: 72px; width: 72px; height: 72px; } .icon-tile img { width: 60px; height: 60px; } .article-hero { padding: 27px; } .diagram-card { padding: 6px; } }

/* Interaktive Ausgleichsgerade */
.fit-card { -webkit-perspective: 1200px; perspective: 1200px; }
.fit-card-inner { display: grid; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .7s ease; }
.fit-card.is-flipped .fit-card-inner { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.fit-face { grid-area: 1 / 1; min-width: 0; padding: clamp(12px, 3vw, 24px); border: 1px solid var(--line); border-radius: 19px; background: white; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 9px 22px #3622470b; transition: visibility 0s linear .35s; }
.fit-front { visibility: visible; }
.fit-card.is-flipped .fit-front { visibility: hidden; }
.fit-back { visibility: hidden; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
.fit-card.is-flipped .fit-back { visibility: visible; }
.fit-face h2 { margin-bottom: 15px; font-size: 1.4rem; }
.fit-back > p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.fit-plot-frame { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.fit-plot { display: block; width: 100%; height: auto; font-family: Arial, sans-serif; }
.fit-interactive { cursor: crosshair; touch-action: none; }
.fit-grid { stroke: #e8e4ed; stroke-width: 1; }
.fit-tick { stroke: #302d3a; stroke-width: 2; }
.fit-axis { fill: none; stroke: #302d3a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.fit-tick-label { fill: #302d3a; font-size: 19px; }
.fit-axis-label { fill: #302d3a; font-size: 24px; font-weight: 700; }
.fit-measurement { fill: #302d3a; stroke: white; stroke-width: 1.6; }
.fit-own-line { fill: none; stroke: #286d91; stroke-width: 4; stroke-linecap: round; }
.fit-source-line { fill: none; stroke: #b65b2d; stroke-width: 4; stroke-dasharray: 11 7; stroke-linecap: round; }
.fit-handle { fill: white; stroke: #286d91; stroke-width: 3.5; }
.fit-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: .91rem; }
.fit-key { display: inline-block; width: 16px; height: 12px; margin-left: 8px; }
.fit-key:first-child { margin-left: 0; }
.fit-key--data { width: 12px; height: 12px; border-radius: 50%; background: #302d3a; }
.fit-key--own { border-top: 4px solid #286d91; }
.fit-key--original { border-top: 4px dashed #b65b2d; }
.fit-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.fit-controls button { padding: 12px 16px; border: 1px solid var(--purple); border-radius: 10px; background: var(--purple); color: white; font: inherit; font-weight: 700; cursor: pointer; }
.fit-controls button#clear-button, .fit-controls button#new-button { background: white; color: var(--purple); }
.fit-controls button:disabled { opacity: .48; cursor: not-allowed; }
.fit-controls button[hidden] { display: none; }
.fit-controls button:focus-visible { outline: 3px solid #d38857; outline-offset: 3px; }
.fit-status { margin-top: 12px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .fit-card-inner, .fit-face { transition: none; } }