@font-face{
  font-family:"Seravek Web";
  src:url("../assets/Seravek-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --firefly:#071117; --nile:#163347; --tarawera:#0a4269;
  --bright:#f7fafc; --sea:#eaeff5; --merino:#f6e7d4; --white:#fff;
  --nile15:rgba(22,51,71,.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:"Seravek Web",Seravek,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--white); color:var(--nile);
  padding:80px 48px 120px; max-width:1740px; margin:0 auto;
}
.head{max-width:786px; margin-bottom:80px;}
.kicker{font-size:16px; color:var(--tarawera); margin-bottom:12px;}
.kicker a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor;}
.kicker a:hover{color:var(--nile);}
h1{font-size:48px; line-height:1.1; font-weight:400; margin-bottom:24px;}
.lead{font-size:20px; line-height:1.5; color:rgba(22,51,71,.75);}

.dir{margin-bottom:96px;}
.dir__head{max-width:786px; margin-bottom:32px;}
h2{font-size:28px; line-height:1.4; font-weight:400; margin-bottom:8px;}
.dir__head p{font-size:16px; line-height:1.5; color:rgba(22,51,71,.7);}

/* Nicht umbrechen: vier Karten brauchen 1612px und sollen als Reihe
   lesbar bleiben — wie im echten Insights-Modul, das ebenfalls seitlich
   laeuft. Bei schmalem Fenster seitlich scrollen. */
.row{display:flex; gap:16px; flex-wrap:nowrap; overflow-x:auto;
     padding-bottom:8px; scrollbar-width:thin;}
.acard{
  position:relative; width:391px; height:535px; flex:0 0 auto;
  background:var(--sea); overflow:hidden;
  display:flex; align-items:flex-end;
}
.acard img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.acard img.miss{display:none;}
.grad{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(22,51,71,0) 41.85%,
             rgba(22,51,71,.5) 65.11%, #163347 100%);
}
/* Ohne Bild bleibt der Verlauf unsichtbar, damit der Platzhalter lesbar ist. */
.acard:has(img.miss) .grad{opacity:0;}
.body{position:relative; padding:24px; width:100%;}
.t{font-size:28px; line-height:1.4; color:var(--white); margin-bottom:24px;}
.acard:has(img.miss) .t{color:var(--tarawera);}
.meta{
  display:flex; justify-content:space-between; font-size:16px;
  color:var(--merino); border-top:1px solid rgba(255,255,255,.25);
  border-bottom:1px solid rgba(255,255,255,.25); padding:16px 0;
}
.acard:has(img.miss) .meta{color:rgba(22,51,71,.7); border-color:var(--nile15);}
.slot{
  position:absolute; left:24px; top:24px;
  font-size:13px; color:rgba(22,51,71,.45); letter-spacing:.04em;
}
.acard:has(img:not(.miss)) .slot{display:none;}

.prompts{max-width:900px; margin-top:24px;}
.prompts h3{font-size:20px; font-weight:400; margin:32px 0 12px; color:var(--tarawera);}
.hint{font-size:16px; line-height:1.5; color:rgba(22,51,71,.7); margin:12px 0 24px;}
pre{
  background:var(--bright); border-left:2px solid var(--tarawera);
  padding:20px 24px; font-size:13px; line-height:1.6;
  white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--nile);
}
.foot{margin-top:80px; font-size:16px; color:rgba(22,51,71,.6);}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px;}

/* --- D: Karten ohne Bild, nur Farbe --- */
.flat--tarawera{background:var(--tarawera);}
.flat--nile{background:var(--nile);}
.flat--firefly{background:var(--firefly);}
.flat--merino{background:var(--merino);}
/* Auf hellem Ton dreht die Schrift auf dunkel. */
.flat--merino .t{color:var(--nile);}
.flat--merino .meta{color:rgba(22,51,71,.7); border-color:var(--nile15);}

/* Farbflaechen sind kein Kategorie-Kapitel — leicht abgesetzt. */
.dir--extra{border-top:1px solid var(--nile15); padding-top:56px;}
.dir__head--sub{margin-top:48px;}
.dir__head--sub h3{font-size:20px; font-weight:400; color:var(--tarawera); margin-bottom:8px;}
.prompts h4{font-size:16px; font-weight:400; color:rgba(22,51,71,.7); margin:24px 0 10px;}

/* --- Article.Overview: Raster statt Reihe --- */
.grid{display:flex; flex-wrap:wrap; gap:16px; width:1636px; max-width:100%;}
.filter{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:32px;}
.filter button{
  font:inherit; font-size:16px; line-height:1;
  padding:10px 16px; cursor:pointer;
  background:transparent; color:rgba(22,51,71,.7);
  border:1px solid var(--nile15);
  transition:color .3s ease, border-color .3s ease, background-color .3s ease;
}
.filter button:hover{color:var(--nile); border-color:var(--nile);}
.filter button.is-on{background:var(--nile); color:var(--white); border-color:var(--nile);}

/* Archiv: abgesetzt und zurueckgenommen — nicht mehr im Einsatz. */
.dir--archiv{border-top:1px solid var(--nile15); padding-top:56px; opacity:.72;}
.dir--archiv:hover{opacity:1; transition:opacity .4s ease;}

/* Archiv einklappbar — es soll die Seite nicht dominieren. */
.dir--archiv details{max-width:none;}
.dir--archiv summary{
  font-size:28px; line-height:1.4; font-weight:400; color:var(--nile);
  cursor:pointer; list-style:none; padding-bottom:8px;
}
.dir--archiv summary::-webkit-details-marker{display:none;}
.dir--archiv summary::before{content:'▸ '; color:var(--tarawera); font-size:20px;}
.dir--archiv details[open] summary::before{content:'▾ ';}
.archiv__text{font-size:16px; line-height:1.5; color:rgba(22,51,71,.7);
  max-width:786px; margin-bottom:32px;}
.dir--archiv details[open]{padding-bottom:16px;}

/* Prompt-Teil einklappbar — fuer die Praesentation zurueckgenommen. */
.prompts summary{
  font-size:28px; line-height:1.4; color:var(--nile);
  cursor:pointer; list-style:none; padding-bottom:8px;
}
.prompts summary::-webkit-details-marker{display:none;}
.prompts summary::before{content:'▸ '; color:var(--tarawera); font-size:20px;}
.prompts details[open] summary::before{content:'▾ ';}

/* ---- Fassungswechsel warm / kuehl ------------------------------------ */
/* Nur eine der beiden Varianten ist sichtbar. display:none statt zwei
   Seiten: so bleiben Scrollposition und Markup beim Wechsel stehen. */
.v{display:none;}
body.warm .v--warm{display:revert;}
body.kuehl .v--kuehl{display:revert;}
pre .v{display:none;}
body.warm pre .v--warm,
body.kuehl pre .v--kuehl{display:inline;}

.panel{
  position:fixed; top:32px; right:32px; z-index:20;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--nile15); padding:16px 20px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-start;
}
.panel__label{
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(22,51,71,.45); margin-bottom:2px;
}
.panel__opt{
  position:relative; font:inherit; font-size:16px; line-height:1.3;
  background:none; border:0; padding:0; cursor:pointer;
  color:rgba(22,51,71,.55); white-space:nowrap; transition:color .3s ease;
}
.panel__opt::after{
  content:''; position:absolute; left:0; right:0; bottom:-.1em; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.panel__opt:hover{color:var(--nile);}
.panel__opt:hover::after{transform:scaleX(1);}
.panel__opt.is-on{color:var(--nile);}
.panel__opt.is-on::after{transform:scaleX(1);}

/* Der Wechsel selbst: die Karten blenden kurz um, statt hart zu springen. */
.acard img[data-img]{transition:opacity .35s ease;}

@media (max-width:900px){
  .panel{top:auto; bottom:16px; right:16px; left:16px;
    flex-direction:row; align-items:baseline; gap:16px;}
  .panel__label{margin-bottom:0;}
}

/* ---- Echtes Modul im iframe ------------------------------------------ */
/* Der iframe ist noetig, weil modul.html das Stylesheet der Startseite laedt
   und dort .acard etwas anderes bedeutet als hier. */
.dir--modul{margin-top:24px;}
.modul{
  width:100vw; position:relative;
  left:50%; right:50%; margin-left:-50vw; margin-right:-50vw;
}
.modul__frame{
  display:block; width:100%; min-width:1500px; height:900px; border:0;
}
.modul__note{
  font-size:16px; color:rgba(22,51,71,.55); margin-top:24px;
}
.modul__note a{color:var(--tarawera); border-bottom:1px solid currentColor;
  text-decoration:none;}
.modul__note a:hover{color:var(--nile);}

/* Die Startseite ist ein Large-Prototyp und mindestens 1500px breit. Auf
   schmalen Fenstern wird das Modul deshalb seitlich scrollbar statt
   abgeschnitten — genau wie die Startseite selbst. */
.modul{overflow-x:auto;}

/* ---- Zuordnung im Kategoriekopf --------------------------------------
   Dieselben zwei Angaben wie in der Tabelle oben, hier bei der Reihe selbst —
   damit im Gespraech ueber eine Kategorie nicht zurueckgescrollt werden muss. */
.zuo{
  /* Steht jetzt direkt unter der Zeile — ohne Beschreibungstext dazwischen
     braucht es keine Trennlinie mehr. */
  margin-top:12px;
  display:flex; flex-direction:column; gap:6px;
}
.zuo__row{display:flex; gap:16px; align-items:baseline;}
.zuo dt{
  flex:0 0 152px;
  font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(22,51,71,.45);
}
.zuo dd{margin:0; font-size:16px; line-height:1.5; color:rgba(22,51,71,.7);}

@media (max-width:700px){
  .zuo__row{flex-direction:column; gap:2px;}
  .zuo dt{flex:none;}
}

/* ---- Bestand neben neu ----------------------------------------------- */
.dir--fotos{border-top:1px solid var(--nile15); padding-top:56px;}

/* ---- Moodboard --------------------------------------------------------
   Bestand und neue Kartenbilder in einem Raster, nicht in getrennten Reihen.
   14 Kacheln in einem 12x10-Feld, lueckenlos gekachelt (jede Kachel ist ein
   Rechteck im Raster, keine Automatik). Die Bilder sind beschnitten statt
   eingepasst — ein Moodboard zeigt Stimmung, nicht Format.
   aspect-ratio 1.202 haelt die Rasterzellen bei 12px Abstand nahezu quadratisch. */
.moodboard{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:repeat(10,1fr);
  gap:12px; max-width:1240px; aspect-ratio:1.202;
}
.mb{position:relative; margin:0; overflow:hidden; background:var(--sea);}
.mb img{width:100%; height:100%; object-fit:cover; display:block;}
/* Verlauf am unteren Rand: ohne ihn verschwindet die Beschriftung auf den
   hellen Motiven (Grossraumbuero, Schnee). Kein Rahmen um die neuen Kacheln —
   ein Moodboard soll als Flaeche wirken, "Bestand" und "Neu" stehen im Text. */
.mb::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:72px;
  background:linear-gradient(180deg, rgba(7,17,23,0), rgba(7,17,23,.6));
  pointer-events:none;
}
.mb figcaption{
  position:absolute; left:12px; right:12px; bottom:10px;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.7);
  pointer-events:none;
}
.mb--neu figcaption{color:var(--white);}

/* Zuschnitt einzelner Kacheln nachjustiert. Mittig beschnitten trifft der
   Ausschnitt nicht immer das Motiv: bei "Gespraech im Gang" (quadratischer
   Slot aus 3:2) faellt der Mann links halb heraus, bei "Sitzung" (2:1 aus 3:2)
   steht der Stehende mit dem Kopf auf der Oberkante. */
.mb--c img{object-position:40% center;}
.mb--j img{object-position:center 25%;}

.mb--a{grid-area:1/1/4/6;}    .mb--b{grid-area:1/6/4/8;}
.mb--c{grid-area:1/8/4/11;}   .mb--d{grid-area:1/11/5/13;}
.mb--e{grid-area:4/1/7/4;}    .mb--f{grid-area:4/4/7/8;}
.mb--g{grid-area:4/8/7/11;}   .mb--h{grid-area:5/11/8/13;}
.mb--i{grid-area:7/1/11/3;}   .mb--j{grid-area:7/3/9/7;}
.mb--k{grid-area:7/7/11/9;}   .mb--l{grid-area:7/9/11/11;}
.mb--m{grid-area:8/11/11/13;} .mb--n{grid-area:9/3/11/7;}
.foto figcaption{
  margin-top:12px; font-size:13px; letter-spacing:.04em;
  text-transform:uppercase; color:rgba(22,51,71,.45);
}
.befund{
  max-width:786px; margin-top:32px;
  display:flex; flex-direction:column; gap:16px;
  font-size:16px; line-height:1.5; color:rgba(22,51,71,.7);
}
.befund b{color:var(--nile);}
/* Die Sektion endet mit einer Aussage, nicht mit Belegen — deshalb steht die
   Empfehlung gross und allein. Die Messwerte dazu stehen im Projektlog. */
.claim{font-size:20px; line-height:1.5;}


/* Farbflaechen: die hellen Toene brauchen dunkle Schrift. Sea White ist der
   Ton, der im Figma-Layout tatsaechlich fuer die bildlose Karte steht. */
.flat--sea{background:var(--sea);}
.flat--sea .t{color:var(--tarawera);}
.flat--sea .meta{color:rgba(10,66,105,.75); border-color:var(--nile15);}