/* scalatutorial.de – Treppenhaus (dunkel), Klassen nach Scala-Schlüsselwörtern */
@font-face{font-family:"Hubot Sans";src:url(/assets/fonts/hubot-sans.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Atkinson Next";src:url(/assets/fonts/atkinson-next.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson Next";src:url(/assets/fonts/atkinson-next-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Mono";src:url(/assets/fonts/atkinson-mono.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --nacht:#121418;--flur:#191c22;--stufe:#20242c;--kante:#333946;--kante-hell:#454c5c;
  --text:#ebe7de;--grau:#aeaba2;--leise:#8b8f99;
  --rot:#ff6a5c;--rot-voll:#d8392a;--rot-tief:#7a1f17;
  --tuerkis:#6ccfbf;--messing:#e6bb62;--lila:#c7a3ff;
  --w:74rem;--r:6px;
  --kopf:"Hubot Sans",system-ui,sans-serif;
  --lauf:"Atkinson Next",system-ui,sans-serif;
  --mono:"Atkinson Mono",ui-monospace,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem}
body{margin:0;background:var(--nacht);color:var(--text);font:400 1.0625rem/1.7 var(--lauf);overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--rot);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:#ff9a8f}
a:focus-visible,summary:focus-visible{outline:2px solid var(--messing);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--kopf);line-height:1.18;margin:0 0 .6em;letter-spacing:-.01em;color:#fff}
h1{font-size:clamp(2rem,4.6vw,3.1rem);font-weight:800}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem);font-weight:750;margin-top:2.2em}
h3{font-size:1.2rem;font-weight:700;margin-top:1.7em}
p{margin:0 0 1.1em}
code,kbd,pre{font-family:var(--mono)}
:not(pre)>code{background:#262b35;border:1px solid var(--kante);border-radius:4px;padding:.05em .35em;font-size:.9em;color:#ffd7a3;overflow-wrap:anywhere}
.skip-link{position:absolute;left:-999px;top:0;background:var(--messing);color:#111;padding:.5rem 1rem;z-index:50}
.skip-link:focus{left:1rem}
.val-wrap{max-width:var(--w);margin:0 auto;padding:0 1rem}

/* Kopf */
.object-head{position:sticky;top:0;z-index:20;background:rgba(18,20,24,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--kante)}
.object-head::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--rot-voll) 0 16.6%,#e2503f 16.6% 33.2%,#ea6a55 33.2% 49.8%,#f08769 49.8% 66.4%,#f4a37f 66.4% 83%,#f7be98 83%)}
.object-head .val-wrap{display:flex;align-items:center;gap:1rem;min-height:4.1rem;flex-wrap:wrap;padding-top:.35rem;padding-bottom:.35rem}
.object-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:#fff;font:800 1.2rem var(--kopf);letter-spacing:-.02em;margin-right:auto}
.object-brand svg{width:34px;height:34px}
.object-brand b{color:var(--rot);font-weight:800}
.object-brand small{color:var(--leise);font-weight:500}
.package-nav{display:flex;flex-wrap:wrap;gap:.2rem .3rem;margin:0;padding:0;list-style:none;font:600 .9rem var(--kopf)}
.package-nav a{display:block;padding:.4rem .65rem;border-radius:var(--r);color:var(--grau);text-decoration:none}
.package-nav a:hover{background:var(--stufe);color:#fff}
.package-nav a[aria-current]{color:#fff;background:var(--stufe);box-shadow:inset 0 -2px 0 var(--rot)}

/* Startseite */
.import-hero{padding:3.2rem 0 2.4rem;border-bottom:1px solid var(--kante);background:radial-gradient(60rem 30rem at 85% 0%,rgba(216,57,42,.16),transparent 60%)}
.import-hero .val-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.import-kicker{font:600 .82rem var(--mono);color:var(--tuerkis);letter-spacing:.04em;margin-bottom:.9rem}
.import-hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem)}
.import-hero h1 span{color:var(--rot)}
.import-lead{font-size:1.18rem;color:#d8d4ca;max-width:36rem}
.import-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.new-btn{display:inline-block;padding:.75rem 1.2rem;border-radius:var(--r);font:700 .98rem var(--kopf);text-decoration:none;background:var(--rot-voll);color:#fff;border:1px solid var(--rot-voll)}
.new-btn:hover{background:#ec4a3a;color:#fff}
.new-btn.is-ghost{background:transparent;color:var(--text);border-color:var(--kante-hell)}
.new-btn.is-ghost:hover{border-color:var(--rot);color:#fff}
.import-steps svg{width:100%;max-width:34rem;margin-left:auto}
.import-steps a:hover rect{fill:#2b303b}
.import-facts{display:flex;flex-wrap:wrap;gap:1.4rem;margin:1.8rem 0 0;padding:0;list-style:none;font:500 .92rem var(--mono);color:var(--grau)}
.import-facts b{display:block;font:800 1.5rem var(--kopf);color:#fff}

.section-title{display:flex;align-items:baseline;gap:.8rem;margin-top:0}
.section-title::before{content:attr(data-nr);font:600 .85rem var(--mono);color:var(--rot);border:1px solid var(--rot-tief);padding:.05rem .4rem;border-radius:4px}
.def-section{padding:3.4rem 0;border-bottom:1px solid var(--kante)}
.def-section>.val-wrap>p.intro{max-width:44rem;color:#d6d2c8}

/* Lehrplan als Treppe */
.for-stairs{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1rem}
.for-step{--versatz:0;margin-left:calc(var(--versatz) * 4.5%);background:var(--flur);border:1px solid var(--kante);border-left:4px solid var(--rot-voll);border-radius:0 var(--r) var(--r) 0;padding:1.1rem 1.3rem 1.2rem;display:grid;grid-template-columns:5.2rem 1fr;gap:1rem}
.for-step-nr{font:800 2.6rem/1 var(--kopf);color:var(--rot)}
.for-step-nr small{display:block;font:600 .72rem var(--mono);color:var(--leise);margin-top:.35rem;letter-spacing:.05em}
.for-step h3{margin:0 0 .35rem;font-size:1.25rem}
.for-step h3 a{color:#fff;text-decoration:none}
.for-step h3 a:hover{color:var(--rot)}
.for-step p{margin:0 0 .6rem;color:var(--grau);font-size:.98rem}
.for-step ol{margin:0;padding:0;list-style:none;columns:2 15rem;column-gap:1.5rem;font-size:.96rem}
.for-step li{break-inside:avoid;padding:.12rem 0}
.for-step li a{color:var(--text);text-decoration:none}
.for-step li a:hover{color:var(--rot)}
.for-step li span{font:500 .78rem var(--mono);color:var(--leise);display:inline-block;min-width:2.1rem}

/* Codebeispiel mit Erklärungen */
.match-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:1.6rem;margin-top:1.6rem;align-items:start}
.match-notes{list-style:none;margin:0;padding:0;counter-reset:n}
.match-notes li{counter-increment:n;position:relative;padding:0 0 1rem 2.4rem;color:#d6d2c8;font-size:.98rem}
.match-notes li::before{content:counter(n);position:absolute;left:0;top:.1rem;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--rot-voll);color:#fff;font:700 .85rem/1.6rem var(--kopf);text-align:center}

/* Code */
.sealed-code{margin:1.5rem 0;border:1px solid var(--kante);border-radius:var(--r);background:#0c0e11;overflow:hidden}
.sealed-code figcaption{display:flex;justify-content:space-between;gap:1rem;padding:.4rem .9rem;background:var(--stufe);border-bottom:1px solid var(--kante);font:500 .78rem var(--mono);color:var(--leise)}
.sealed-code figcaption b{color:var(--tuerkis);font-weight:600}
.sealed-code pre{margin:0;padding:1rem 1.1rem;overflow-x:auto;font-size:.9rem;line-height:1.6;tab-size:2;color:#e3dfd6}
.tk-k{color:#ff7d6e;font-weight:600}.tk-t{color:#7fd8ca}.tk-s{color:#ebc57c}.tk-c{color:#7f8594;font-style:italic}.tk-n{color:var(--lila)}.tk-a{color:#f0a0d0}.tk-p{color:var(--leise);user-select:none}.tk-o{color:#9bc0ff}

/* Kästen */
.lazy-box{margin:1.6rem 0;padding:1rem 1.2rem;border-radius:var(--r);background:#17231f;border:1px solid #2c4a42;border-left:4px solid var(--tuerkis)}
.lazy-box>strong:first-child{display:block;font:700 .95rem var(--kopf);color:var(--tuerkis);margin-bottom:.3rem}
.lazy-box p:last-child,.lazy-box ul:last-child{margin-bottom:0}
.lazy-box.is-throw{background:#2a1a17;border-color:#5a2b24;border-left-color:var(--rot)}
.lazy-box.is-throw>strong:first-child{color:var(--rot)}
.yield-task{margin:2.2rem 0;border:1px dashed var(--kante-hell);border-radius:var(--r);padding:1.1rem 1.2rem;background:var(--flur)}
.yield-task>strong:first-child{display:block;font:700 1rem var(--kopf);color:var(--messing);margin-bottom:.4rem}
.yield-task details{margin-top:.8rem;border-top:1px solid var(--kante);padding-top:.7rem}
.yield-task summary{cursor:pointer;font:600 .95rem var(--kopf);color:var(--text)}
.yield-task summary::marker{color:var(--messing)}

/* Tabellen */
.case-table{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--kante);border-radius:var(--r)}
.case-table table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:30rem}
.case-table th,.case-table td{padding:.6rem .8rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--kante)}
.case-table th{font:700 .88rem var(--kopf);background:var(--stufe);color:#fff}
.case-table tr:last-child td{border-bottom:0}
.case-table td:first-child{color:#fff}

/* Bilder, Grafiken */
.view-figure{margin:1.8rem 0}
.view-figure img{border-radius:var(--r);border:1px solid var(--kante);width:100%}
.view-figure.is-svg{background:var(--flur);border:1px solid var(--kante);border-radius:var(--r);padding:1rem}
.view-figure figcaption{font-size:.85rem;color:var(--leise);margin-top:.55rem;line-height:1.5}
.view-figure figcaption a{color:var(--grau)}

/* Lektion */
.extends-layout{display:grid;grid-template-columns:16.5rem minmax(0,1fr);gap:3rem;padding:2rem 1rem 3.5rem;max-width:var(--w);margin:0 auto}
.extends-main{max-width:46rem;min-width:0;grid-column:2;grid-row:1}
.extends-crumbs{font:500 .85rem var(--mono);color:var(--leise);margin-bottom:1.3rem}
.extends-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.extends-crumbs li+li::before{content:"/";margin-right:.3rem;color:var(--kante-hell)}
.extends-crumbs a{color:var(--grau);text-decoration:none}
.extends-crumbs a:hover{color:var(--rot)}
.case-chip{display:inline-flex;gap:.5rem;align-items:center;font:600 .8rem var(--mono);color:var(--tuerkis);margin-bottom:.8rem}
.case-chip span{color:#fff;background:var(--rot-voll);border-radius:3px;padding:.05rem .4rem}
.val-meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font:500 .85rem var(--mono);color:var(--leise);margin:-.1rem 0 1.4rem;padding-bottom:1rem;border-bottom:1px solid var(--kante)}
.val-lead{font-size:1.2rem;line-height:1.6;color:#ddd9cf}
.extends-main ul,.extends-main ol{padding-left:1.3rem;margin:0 0 1.2rem}
.extends-main li{margin-bottom:.35rem}
.extends-main li::marker{color:var(--rot)}

.trait-rail{grid-column:1;grid-row:1;position:sticky;top:5.4rem;align-self:start;max-height:calc(100vh - 6.5rem);overflow:auto;font-size:.92rem;padding-right:.4rem;scrollbar-width:thin}
.trait-rail h2{font:700 .78rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin:0 0 .8rem}
.trait-rail ol{list-style:none;margin:0;padding:0}
.trait-stage{margin-bottom:.6rem}
.trait-stage>a{display:flex;gap:.55rem;align-items:baseline;font:700 .95rem var(--kopf);color:var(--text);text-decoration:none;padding:.25rem 0}
.trait-stage>a b{font:600 .75rem var(--mono);color:var(--rot);min-width:1.1rem}
.trait-stage ol{border-left:1px solid var(--kante);margin:.2rem 0 .4rem .45rem;padding-left:.9rem}
.trait-stage ol a{display:block;color:var(--grau);text-decoration:none;padding:.18rem 0;line-height:1.35}
.trait-stage ol a:hover{color:#fff}
.trait-stage ol a[aria-current]{color:#fff;font-weight:700;position:relative}
.trait-stage ol a[aria-current]::before{content:"";position:absolute;left:-1.25rem;top:.45em;width:.6rem;height:.6rem;background:var(--rot);border-radius:2px}

.override-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.8rem 0 0}
.override-pager a{display:block;padding:.9rem 1rem;background:var(--flur);border:1px solid var(--kante);border-radius:var(--r);text-decoration:none;color:#fff;font:700 1rem/1.35 var(--kopf)}
.override-pager a:hover{border-color:var(--rot)}
.override-pager small{display:block;font:500 .78rem var(--mono);color:var(--leise);margin-bottom:.25rem}
.override-pager .is-next{text-align:right;grid-column:2}

.case-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1rem;margin:1rem 0 0;padding:0;list-style:none}
.case-cards a{display:block;height:100%;padding:1rem;background:var(--flur);border:1px solid var(--kante);border-top:3px solid var(--tuerkis);border-radius:var(--r);text-decoration:none;color:var(--grau);font-size:.93rem;line-height:1.5}
.case-cards a:hover{border-color:var(--tuerkis)}
.case-cards b{display:block;font:700 1.02rem/1.3 var(--kopf);color:#fff;margin-bottom:.35rem}
.case-cards small{display:block;font:500 .74rem var(--mono);color:var(--tuerkis);margin-bottom:.35rem}

/* Hubs */
.object-list{list-style:none;margin:1.2rem 0 2rem;padding:0;border-top:1px solid var(--kante)}
.object-list li{border-bottom:1px solid var(--kante)}
.object-list a{display:grid;grid-template-columns:3.2rem 1fr;gap:.2rem 1rem;padding:.85rem 0;text-decoration:none;color:var(--grau)}
.object-list a:hover b{color:var(--rot)}
.object-list span{grid-row:span 2;font:700 1.05rem var(--mono);color:var(--rot)}
.object-list b{font:700 1.05rem var(--kopf);color:#fff}
.object-list em{font-style:normal;font-size:.93rem}

/* FAQ */
.given-faq details{border-bottom:1px solid var(--kante);padding:.9rem 0}
.given-faq summary{cursor:pointer;font:700 1.08rem var(--kopf);color:#fff;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.given-faq summary::-webkit-details-marker{display:none}
.given-faq summary::after{content:"+";font:500 1.3rem/1 var(--mono);color:var(--rot)}
.given-faq details[open] summary::after{content:"−"}
.given-faq details p{margin:.7rem 0 0;color:#d6d2c8;max-width:48rem}

.with-split{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:center}
.with-split .view-figure{margin:0}

/* Fuß */
.yield-foot{margin-top:0;background:var(--flur);border-top:1px solid var(--kante)}
.yield-foot-edge{display:block;width:100%;height:28px;background:var(--nacht)}
.yield-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding:2.2rem 1rem 1.6rem;max-width:var(--w);margin:0 auto;font-size:.93rem;color:var(--grau)}
.yield-foot h2{font:700 .8rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--leise);margin:0 0 .7rem}
.yield-foot ul{list-style:none;margin:0;padding:0}
.yield-foot li{margin-bottom:.35rem}
.yield-foot a{color:var(--text);text-decoration:none}
.yield-foot a:hover{color:var(--rot)}
.yield-foot-line{max-width:var(--w);margin:0 auto;padding:1rem 1rem 1.6rem;border-top:1px solid var(--kante);font:500 .8rem var(--mono);color:var(--leise);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between}

.legal-text{max-width:46rem;margin:0 auto;padding:2.5rem 1rem 4rem}
.legal-text h2{font-size:1.25rem;margin-top:1.8em}

@media (max-width:980px){
  .import-hero .val-wrap,.match-grid,.with-split{grid-template-columns:1fr}
  .import-steps svg{margin:0 auto}
  .extends-layout{grid-template-columns:1fr;gap:2rem}
  .extends-main{grid-column:1;grid-row:1}
  .trait-rail{grid-column:1;grid-row:2;position:static;max-height:none;border-top:1px solid var(--kante);padding-top:1.5rem}
  .for-step{margin-left:calc(var(--versatz) * 2%)}
  .yield-foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  body{font-size:1rem}
  .object-head{position:static}
  .package-nav{font-size:.84rem}
  .package-nav a{padding:.3rem .45rem}
  .for-step{margin-left:0;grid-template-columns:1fr;gap:.3rem}
  .for-step-nr{font-size:1.8rem}
  .for-step-nr small{display:inline;margin-left:.5rem}
  .override-pager{grid-template-columns:1fr}
  .override-pager .is-next{grid-column:1}
  .yield-foot-grid{grid-template-columns:1fr}
  .sealed-code pre{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}