/* ═══════════════════════════════════════════════════════════════════════════
   AUSWAHLSEITEN — gemeinsame Huelle fuer alle Entwurfs-Uebersichten
   (Master-Index + eine Seite je Branche)

   Haltung: Diese Huelle ist bewusst NEUTRAL. Sie ist der Rahmen um ein Bild,
   nicht das Bild. Jeder Entwurf darin darf laut sein, hell, bunt, seriös — der
   Rahmen mischt sich nicht ein und faerbt nichts ein. Deshalb: ein Grund, eine
   Schrift, keine Deko. Farbe kommt ausschliesslich aus den Entwuerfen selbst
   (Palettenpunkte + Foto).

   Der Rahmen war frueher graphitdunkel. Das war als Museumswand gedacht, hat
   aber zwei Dinge kaputtgemacht: von den sechsunddreissig Entwuerfen sind
   dreiunddreissig hell, und die sprangen aus dem dunklen Grund heraus wie
   Leuchtkaesten — der Rahmen war lauter als die Bilder. Und der Weg von der
   Uebersicht in einen Entwurf war jedes Mal ein Helligkeitssprung. Papierhell
   ist die ruhigere Wand: die Entwuerfe liegen darauf wie Ausdrucke auf einem
   Tisch, und der Uebergang faellt nicht mehr auf.

   Verwendet von:  entwuerfe/index.html            (alle Branchen untereinander)
                   entwuerfe/<branche>/index.html  (drei Entwuerfe einer Branche)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Kontrakt ─────────────────────────────────────────────────────────────── */
/* Alle Kontrastwerte unten sind nachgerechnet, nicht geschaetzt, und zwar
   gegen den jeweils unguenstigsten der drei Gruende (Papier / Karte / Band). */
:root{
  --grund:       #F6F6F4;   /* Seitengrund — Papier, minimal warm              */
  --grund-hoch:  #ECECE8;   /* abgesetzte Baender                              */
  --karte:       #FFFFFF;   /* Kartenflaeche — hebt sich vom Papier ab         */
  --karte-hoch:  #FFFFFF;   /* Karte bei Hover: die Hebung macht der Schatten  */

  --stark:       #16181C;   /* Ueberschriften                    (min. 15,0:1) */
  --matt:        #45484E;   /* Fliesstext                        (min.  7,7:1) */
  --leise:       #62666D;   /* Beschriftungen, Meta              (min.  4,9:1) */
  --linie:       #E2E2DD;   /* Trennlinien — nie fuer Text                     */
  --rand:        #85878B;   /* Umriss bedienbarer Elemente       (min.  3,0:1) */

  --signal:      #16181C;   /* Knopf: dunkler Block auf hellem Grund           */
  --signal-auf:  #F7F7F5;   /* Schrift darauf                        (16,6:1)  */

  /* Auf dunklem Grund entsteht Hoehe durch eine hellere Flaeche. Auf hellem
     Grund geht das nicht — weisser als Weiss gibt es nicht. Hoehe kommt hier
     deshalb ueber den Schatten. */
  --schatten:      0 1px 2px rgba(16,18,22,.05), 0 1px 1px rgba(16,18,22,.04);
  --schatten-hoch: 0 14px 28px rgba(16,18,22,.10), 0 4px 8px rgba(16,18,22,.06);

  --display:'Cabinet Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --schrift:'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --zahl:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --spalte:1240px;
  --tempo:.42s cubic-bezier(.22,.68,.36,1);
}

/* ── Grundlagen ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  font-family:var(--schrift); font-size:17px; line-height:1.62;
  color:var(--matt); background:var(--grund);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display); color:var(--stark); font-weight:700; line-height:1.06}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px; border-radius:2px}

.wrap{width:min(100% - 40px, var(--spalte)); margin-inline:auto}
.nur-vorleser{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* Marke der Beschriftungen: gesperrte Versalien in Monospace. Taucht als
   Rubrik, Entwurfsnummer und Fusszeile wieder auf — ein Motiv, drei Orte. */
.rubrik{
  display:block; font-family:var(--zahl); font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--leise);
}

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
.kopf{border-bottom:1px solid var(--linie); background:var(--grund-hoch)}
.kopf .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:64px; flex-wrap:wrap;
}
.kopf b{font-family:var(--display); font-size:1.05rem; color:var(--stark); letter-spacing:-.01em}
.kopf .zurueck{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.88rem; color:var(--matt); text-decoration:none;
  padding:7px 0; transition:color var(--tempo);
}
.kopf .zurueck:hover{color:var(--stark)}
.kopf .zurueck .pf{transition:translate var(--tempo)}
.kopf .zurueck:hover .pf{translate:-4px 0}

/* ── Einleitung ───────────────────────────────────────────────────────────── */
.intro{padding:clamp(52px, 8vw, 104px) 0 clamp(30px, 4vw, 46px)}
.intro h1{
  font-size:clamp(2.2rem, 5.6vw, 3.9rem); letter-spacing:-.025em;
  max-width:19ch; margin-top:18px;
}
.intro p{margin-top:22px; max-width:64ch; font-size:clamp(1rem, 1.3vw, 1.12rem)}

/* ── Sprungleiste (nur auf dem Master-Index) ──────────────────────────────── */
/* Zwoelf Branchen untereinander sind rund ein Dutzend Bildschirmhoehen. Ohne
   eine Abkuerzung muesste man an allem vorbeiscrollen, was man gerade nicht
   sucht. Die Leiste ist mit Absicht KEIN Menue und nichts Klebriges: sie steht
   einmal unter der Einleitung und ist danach aus dem Weg. Ein klebender Balken
   mit zwoelf Eintraegen wuerde am Handy vier Zeilen hoch werden und den halben
   Bildschirm fressen — genau das, was er verhindern soll.
   Der Umriss ist --rand (3,1:1) und nicht --linie: das sind bedienbare
   Elemente, und deren Umriss muss sich vom Grund abheben. */
.sprung{padding:clamp(18px, 2.4vw, 30px) 0 clamp(10px, 1.6vw, 18px)}
.sprung ul{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;
}
.sprung a{
  display:inline-block; text-decoration:none; font-size:.88rem; line-height:1.3;
  color:var(--matt); background:transparent;
  border:1px solid var(--rand); padding:7px 14px;
  transition:color var(--tempo), background var(--tempo), border-color var(--tempo);
}
.sprung a:hover{color:var(--signal-auf); background:var(--signal); border-color:var(--signal)}

/* ── Branchen-Abschnitt (nur auf dem Master-Index) ────────────────────────── */
/* scroll-margin-top haelt den Abschnitt nach einem Sprung ein paar Pixel vom
   oberen Fensterrand weg — sonst klebt die Ueberschrift bündig an der Kante. */
.branche{padding:clamp(40px, 5vw, 66px) 0; border-top:1px solid var(--linie); scroll-margin-top:14px}
.branche-kopf{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px 32px; flex-wrap:wrap; margin-bottom:clamp(24px, 3vw, 36px);
}
.branche-kopf h2{font-size:clamp(1.6rem, 3vw, 2.3rem); letter-spacing:-.02em; margin-top:12px}
.branche-kopf p{margin-top:10px; max-width:56ch; font-size:.98rem}
.branche-kopf .alle{
  flex:none; display:inline-flex; align-items:center; gap:9px;
  font-size:.9rem; color:var(--stark); text-decoration:none;
  border:1px solid var(--rand); padding:10px 18px;
  transition:background var(--tempo), border-color var(--tempo);
}
.branche-kopf .alle:hover{background:var(--karte-hoch); border-color:var(--signal)}
.branche-kopf .alle .pf{transition:translate var(--tempo)}
.branche-kopf .alle:hover .pf{translate:4px 0}

/* ── Die Karten ───────────────────────────────────────────────────────────── */
.karten{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
}
.karte{
  display:flex; flex-direction:column; position:relative;
  background:var(--karte); border:1px solid var(--linie);
  text-decoration:none; overflow:clip;
  translate:0 0; box-shadow:var(--schatten);
  transition:translate var(--tempo), box-shadow var(--tempo), border-color var(--tempo);
}
.karte:hover,.karte:focus-visible{
  translate:0 -5px; box-shadow:var(--schatten-hoch); border-color:var(--rand);
}

/* Der Schaukasten zeigt genau das, worin sich die Entwuerfe unterscheiden:
   den echten Grundton, die echte Display-Schrift und ein Foto der Branche.
   Kein Bildschirmfoto — das waere nur eine Briefmarke und saehe nach nichts aus. */
/* Die Grundflaeche ist die echte Grundfarbe des Entwurfs (--ton, im HTML am
   .schau gesetzt), nicht die Seitenfarbe. Sichtbar wird sie nur, wenn ein Foto
   nicht laedt — dann steht dort aber die Farbe, um die es geht, und nicht ein
   fast weisses Loch. Nebenwirkung mit Absicht: der Kontrast-Pruefer laeuft die
   Elternkette hoch und findet hier endlich den Untergrund, auf dem der
   Entwurfsname wirklich steht. */
/* min-height:0 ist kein Schoenheitswert, sondern der Grund, warum das
   aspect-ratio daneben ueberhaupt gilt. .karte ist eine Spalten-Flexbox, also
   ist .schau ein Flex-Element, und dort bedeutet der Startwert min-height:auto
   "mindestens so hoch wie dein Inhalt". Der Inhalt ist das Foto, und das bringt
   sein eigenes Seitenverhaeltnis mit — dieser Mindestwert schlaegt das
   angeforderte 16/10, ohne dass der Browser etwas meldet. Gemessen bei 398px
   Breite (16/10 waeren 249px): Zahnarzt (Bild 640x427) wurde 266px hoch, und
   auf der Atrium-Uebersicht standen drei verschieden hohe Kaesten
   nebeneinander — 249, 398 und 530px, je nach Format des Fotos. Mit
   min-height:0 sind alle drei exakt 249px. Deshalb steht die Zeile hier in der
   gemeinsamen Huelle und nicht auf einer einzelnen Seite: sie richtet jede
   Auswahlseite gleichzeitig. */
.schau{position:relative; aspect-ratio:16/10; min-height:0; overflow:clip; background:var(--ton, var(--grund))}
.schau img{
  width:100%; height:100%; object-fit:cover; scale:1;
  transition:scale var(--tempo), filter var(--tempo);
}
.karte:hover .schau img{scale:1.05}
.schau .ton{
  position:absolute; inset:0;
  /* wird je Entwurf per --ton gesetzt (die echte Grundfarbe des Entwurfs) */
  background:linear-gradient(to top, var(--ton, #0E0F12) 6%, rgba(0,0,0,0) 78%);
  opacity:.94;
}
.schau .wort{
  position:absolute; left:18px; right:18px; bottom:14px; z-index:2;
  font-size:clamp(1.7rem, 4.4vw, 2.5rem); line-height:1;
  color:var(--wort-farbe, #fff); letter-spacing:-.02em;
  /* Die Display-Schrift des jeweiligen Entwurfs, per --wort-schrift gesetzt. */
  font-family:var(--wort-schrift, var(--display));
  /* Manche Entwuerfe setzen ihren Namen in einer sehr leichten oder sehr fetten
     Schnittstaerke — das gehoert zur Handschrift und muss im Schaukasten
     mitkommen. Der Rueckfallwert 400 ist genau das, was hier vorher geerbt
     wurde, damit die aelteren Auswahlseiten unveraendert bleiben. */
  font-weight:var(--wort-fett, 400);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.punkte{position:absolute; right:14px; top:14px; z-index:2; display:flex; gap:6px}
/* Die drei Punkte zeigen die echten Farben des Entwurfs und liegen auf dem
   Foto — mal auf hellem Himmel, mal auf dunklem Holz. Ein einzelner weisser
   Ring verschwindet auf hellem Untergrund, ein dunkler auf dunklem. Deshalb
   zwei Ringe: innen hell, aussen dunkel. Einer von beiden hebt sich immer ab,
   und ein weisser Punkt auf weissem Grund bleibt trotzdem sichtbar. */
.punkte i{
  width:15px; height:15px; border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.9),
             0 0 0 2.5px rgba(16,18,22,.28);
}

.text{padding:22px 22px 26px; display:flex; flex-direction:column; flex:1}
.text h3{font-size:1.42rem; letter-spacing:-.015em; margin:9px 0 10px}
.text > p{font-size:.96rem; color:var(--matt)}
.merkmale{list-style:none; margin:16px 0 22px; font-size:.89rem; color:var(--leise)}
.merkmale li{
  padding:8px 0 8px 17px; position:relative; border-top:1px solid var(--linie);
}
/* Der Strich sitzt auf der Mitte der ERSTEN Zeile, auch wenn der Text
   umbricht. Deshalb wird die obere Polsterung (8px) explizit mitgerechnet
   und nicht mit einem geschaetzten em-Wert ueberbrueckt. */
.merkmale li::before{
  content:""; position:absolute; left:2px; top:calc(8px + .72em);
  width:6px; height:1px; background:var(--rand);
}
/* margin-top:auto haelt den Knopf am Kartenboden — sonst sitzt er bei der
   kuerzesten Karte hoeher als bei den beiden anderen. */
.oeffnen{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; background:var(--signal); color:var(--signal-auf);
  font-weight:700; font-size:.9rem;
}
.oeffnen .pf{transition:translate var(--tempo)}
.karte:hover .oeffnen .pf{translate:5px 0}

/* Auf dem Master-Index stehen sechsunddreissig Karten untereinander. Sie tragen
   dort keine Merkmalliste, sonst wird die Seite unlesbar lang — der Abstand zum
   Knopf muss dann von der Beschreibung kommen, sonst klebt er am Text.
   ".text" ist ein Flex-Behaelter, dort fallen Aussenabstaende nicht zusammen;
   die Regel bleibt deshalb bewusst auf .karte--knapp beschraenkt. */
.karte--knapp .text > p{margin-bottom:22px}

/* ── Hinweiskasten ────────────────────────────────────────────────────────── */
.hinweis{
  background:var(--grund-hoch); border:1px solid var(--linie);
  padding:clamp(24px, 3vw, 36px); margin:clamp(40px, 5vw, 64px) 0;
}
.hinweis h2{font-size:1.2rem; margin:10px 0 16px}
.hinweis ul{list-style:none; font-size:.96rem}
.hinweis li{position:relative; padding:9px 0 9px 20px}
.hinweis li + li{border-top:1px solid var(--linie)}
.hinweis li::before{
  content:""; position:absolute; left:2px; top:1.18em;
  width:8px; height:1px; background:var(--rand);
}
.hinweis b{color:var(--stark); font-weight:600}

/* ── Fuss ─────────────────────────────────────────────────────────────────── */
.fuss{
  border-top:1px solid var(--linie); background:var(--grund-hoch);
  padding:24px 0; font-size:.85rem; color:var(--leise);
}
.fuss .wrap{display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between}

/* ── Sanftes Einblenden ───────────────────────────────────────────────────── */
/* Ohne JavaScript bleibt alles sichtbar — die Regel greift nur, wenn das
   Skript die Klasse js gesetzt hat. */
html.js .zeig{opacity:0; translate:0 16px}
html.js .zeig[data-da="1"]{
  opacity:1; translate:0 0;
  transition:opacity .55s ease calc(var(--i, 0) * 70ms),
             translate .55s cubic-bezier(.22,.68,.36,1) calc(var(--i, 0) * 70ms);
}

/* ── Enger ────────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:16px}
  .karten{grid-template-columns:1fr}
  .branche-kopf .alle{width:100%; justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important}
  html{scroll-behavior:auto}
  html.js .zeig{opacity:1; translate:none}
}