/* =========================================================================
   CASI -- Schriften und Gestaltung der Website
   -------------------------------------------------------------------------
   Schriften und Kaesten stammen aus Vorschlag 1, die Farben aus Vorschlag 2.
   Die Dateien liegen unter uploads/casi-fonts/.
   ========================================================================= */
@font-face{font-family:'Mori';src:url('../casi-fonts/PPMori-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Mori';src:url('../casi-fonts/PPMori-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Mori';src:url('../casi-fonts/PPMori-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Mori';src:url('../casi-fonts/PPMori-SemiBold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Serife';src:url('../casi-fonts/IBMPlexSerif-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Serife';src:url('../casi-fonts/IBMPlexSerif-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Serife';src:url('../casi-fonts/IBMPlexSerif-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
/* =========================================================================
   CASI  ·  Entwurf für die Präsentation
   Die Entscheidungen aus dem Papier vom 12. September, zusammengeführt:

   Schrift     Die Regel von anthropic.com: eine Textserife trägt, was
               gelesen wird — Fließtext, Einleitungen, Kartenbeschreibungen.
               PP Mori trägt, was benutzt wird — Überschriften aller Ebenen,
               Kartentitel, Namen, Navigation, Schaltflächen, Zahlen.
               Die Serife ist IBM Plex Serif: für Bildschirmtext gezeichnet,
               geringer Strichkontrast, offene Lizenz. Eine Displayserife wie
               PP Editorial New wäre hier falsch — die ist für 60 px gemacht,
               nicht für 17.
   Größen      sechs Stufen: 44 / 30 / 20 / 17 / 15 / 14
   Fläche      warmes Papier #FAF9F5, abgesetzte Blöcke #F2F1EA, kein Weiß
   Kästen      eine Liste bekommt eine Linie, eine Sammlung bekommt einen Kasten
   Kanten      weiche Ecken: 10 px am Kasten, 8 px an allem Kleineren
   ========================================================================= */

:root{
  --papier:#FFFFFF;      /* der Grund der ganzen Seite */
  --block:#EEF2F1;       /* abgesetzte Flächen: Kästen, Bänder */
  --tinte:#0E4D49;       /* die Hausfarbe, unverändert */
  --leise:#5F7471;       /* Meta, Sekundäres */
  --linie:#E1E7E5;       /* Haarlinie */
  --strich:#0E4D49;      /* die kräftige Linie über einem Listeneintrag */
  --akzent:#8B1538;      /* Burgunder, zweimal auf der Seite */
  --rad:10px;            /* Kasten */
  --rad-klein:8px;       /* Schaltfläche, Bild, Feld */

  /* Die Bahn: bis etwa 1600px wächst sie mit, darüber bleibt sie stehen und
     aus dem Zuwachs werden Ränder. Die Zahlen sind die von anthropic.com. */
  --rand:clamp(32px, 17.31px + 3.9184vw, 80px);
  --bahn:calc(min(1432px, 100vw) - clamp(32px, 17.31px + 3.9184vw, 80px) * 2);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
/* Die Seite ist mindestens so hoch wie das Fenster, und die Fussleiste
   sitzt am unteren Ende der Spalte. Auf einer kurzen Seite steht sie
   damit unten statt mitten im Bild. */
body{background:var(--papier);color:var(--tinte);
     font-family:'Serife',Georgia,serif;font-size:17px;line-height:1.6;
     min-height:100vh;display:flex;flex-direction:column;}
@supports (min-height:100dvh){ body{min-height:100dvh;} }
body > footer{margin-top:auto;}

.bahn{width:var(--bahn);margin:0 auto;}

/* ---- Schrift ------------------------------------------------------------
   Die Regel von anthropic.com, in einem Satz: die Serife traegt, was gelesen
   wird; die Grotesk traegt, was benutzt wird.

   Serife (IBM Plex Serif)  Fliesstext, Einleitungen, Kartenbeschreibungen --
                          alles, was man liest statt bedient. Eine Textserife,
                          fuer den Bildschirm gezeichnet, geringer
                          Strichkontrast, offene Lizenz.
   Grotesk (PP Mori)      Ueberschriften aller Ebenen, Kartentitel, Namen,
                          Navigation, Schaltflaechen, Jahreszahlen, Institute,
                          Zahlen und Formeln.

   Auf der Artikelseite von Anthropic stehen alle Ueberschriften in der
   Grotesk und nur die Prosa in der Serife. Das ist die Seite, die einer
   CASI-Inhaltsseite entspricht, und deshalb die Zuordnung hier. */
h1,h2,.kartentitel,.zwischen{font-family:'Mori',system-ui,sans-serif;font-weight:600;}
h1{font-size:44px;line-height:1.08;letter-spacing:-.005em;}
h2{font-size:30px;line-height:1.18;letter-spacing:-.004em;}
.zwischen,.kartentitel{font-size:20px;line-height:1.3;}
p{max-width:640px;}
p + p{margin-top:16px;}          /* 16 zwischen Absätzen  */
h2{margin-top:32px;}             /* 32 über einer Überschrift */
h2 + p,h2 + *{margin-top:8px;}   /*  8 darunter — sie klebt an ihrem Text */
em{font-style:italic;}
strong{font-weight:600;}     /* die Serife hat einen echten Halbfetten */

.mori,.meta,.kicker,nav a,.knopf,.jahr,.inst{font-family:'Mori',system-ui,sans-serif;}
.meta,.jahr,.inst{font-size:14px;line-height:1.45;color:var(--leise);}
.kicker{font-size:15px;font-weight:600;letter-spacing:.02em;}

a{color:inherit;text-decoration:none;}

/* ---- Kopf ---------------------------------------------------------------
   Der Kopf steht auf derselben Bahn wie alles andere; sein Inhalt fängt da
   an, wo der Text darunter anfängt. */
header.kopf{background:var(--papier);border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:20;}
.kopf .bahn{display:flex;align-items:center;gap:32px;height:76px;}
.kopf .logo{display:flex;align-items:center;}
.kopf .logo img{height:21px;width:auto;display:block;}
.kopf nav{margin-left:auto;margin-right:auto;display:flex;gap:34px;}
/* Menüpunkte: eine einzige Art, eine Linie zu ziehen. Ein border-bottom
   säße am unteren Rand der Polsterung, die Unterstreichung dagegen unter der
   Schrift -- beides nebeneinander, und die Linie springt beim Überfahren
   nach unten. Deshalb hier nur text-decoration, für beide Zustände mit
   demselben Abstand. */
.kopf nav a{font-family:'Mori',sans-serif;font-size:16px;padding:4px 0;
  text-decoration-thickness:1px;text-underline-offset:3px;}
.kopf nav a.hier{color:var(--akzent);text-decoration-line:underline;
  text-decoration-color:var(--akzent);}

.knopf{display:inline-flex;align-items:center;gap:10px;font-size:16px;
  padding:10px 19px;border-radius:var(--rad-klein);border:1px solid transparent;}
.knopf-voll{background:var(--akzent);color:var(--papier);border-color:var(--akzent);}
.knopf-linie{background:transparent;color:var(--tinte);border-color:var(--tinte);}

/* ---- Abschnitt ---------------------------------------------------------- */
section{padding:72px 0;}
section.eng{padding:44px 0;}

/* Ein abgesetzter Abschnitt ist kein Streifen über die ganze Fensterbreite,
   sondern ein Block in der Bahn: derselbe Rand wie alles andere auf der
   Seite, dieselben weichen Ecken wie die Kästen. Ein Streifen wäre das
   einzige Element, das sich nicht an die Bahn hielte -- auf einem breiten
   Schirm ein sehr langes Rechteck neben lauter 1272 px. */
section.band{background:transparent;padding:20px 0;}
section.band > .bahn{background:var(--block);border-radius:14px;padding:48px 40px;}
@media (max-width:700px){
  section.band > .bahn{padding:32px 24px;border-radius:12px;}
}

/* ---- Liste bekommt Linie -------------------------------------------------
   Publikationen, Nachrichten, Veranstaltungen: kein Kasten, keine Fläche.
   Eine kräftige Linie oben, viel Luft daneben. Das Weiß, das hier früher
   stand, war das lauteste Element der Seite. */
.liste{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:28px;}
.liste > a{display:block;border-top:1px solid var(--strich);padding-top:18px;}
.liste .jahr{margin-bottom:12px;}
.liste .kartentitel{margin-bottom:10px;}

/* ---- Sammlung bekommt Kasten --------------------------------------------
   Menschen und Kacheln: dort stehen Bilder und unterschiedlich lange Texte,
   und dort hält eine Fläche die Ordnung. #F2F1EA statt Weiß, 10 px Radius. */
.sammlung{display:grid;gap:20px;margin-top:28px;}
.sammlung.vier{grid-template-columns:repeat(4,1fr);}
.sammlung.drei{grid-template-columns:repeat(3,1fr);}
.kasten{background:var(--block);border-radius:var(--rad);padding:24px;}
/* Auf einem abgesetzten Band kehrt sich das Verhaeltnis um: dort ist der
   Kasten der hellere Ton, sonst waere er nicht zu sehen. */
.band .kasten,.band .mensch{background:var(--papier);}
.kasten .zwischen{margin-bottom:8px;}
.kasten p{font-size:17px;}

/* Menschen */
.leute{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;}
.mensch{background:var(--block);border-radius:var(--rad);padding:18px;
  display:flex;gap:18px;align-items:center;}
.mensch img{width:96px;height:126px;object-fit:cover;object-position:50% 18%;
  border-radius:var(--rad-klein);display:block;flex:0 0 auto;}
.mensch .name{font-family:'Mori',sans-serif;font-weight:600;font-size:19px;line-height:1.25;}
.mensch .inst{margin-top:6px;}

/* ---- Aufzaehlung im Hero -------------------------------------------------
   Die Marke ist ein kleines Quadrat in der Akzentfarbe, kein Punkt: ein
   Punkt gehoert zu einer Serife, ein Quadrat zu einer Bilanz. */
.punkte p{position:relative;padding-left:20px;}
.punkte p::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;background:var(--akzent);}

/* ---- Laufband der Marken ------------------------------------------------
   Von der laufenden Seite abgelesen, Wert für Wert: Zelle 200 px breit,
   Band 96 px hoch, 50 s für einen Durchlauf, Graustufe, Deckkraft 0,72.

   Der Kniff gegen das Ruckeln steckt in den zwei Zeilen unten: das Gleis
   enthält die Marken genau zweimal und fährt um -50 % seiner eigenen
   Breite. Damit steht am Ende exakt dasselbe Bild wie am Anfang, egal wie
   viele Marken es sind. Ein fester Pixelwert stimmt dagegen nur so lange,
   bis jemand eine Marke hinzufügt -- dann springt es bei jedem Durchlauf.

   Keine Reaktion auf den Zeiger, kein Rahmen, kein Verlauf an den Rändern. */
.laufband{overflow:hidden;height:96px;}
.laufband .gleis{display:flex;gap:0;width:max-content;
  animation:lauf 50s linear infinite;}
.laufband .zelle{flex:0 0 200px;height:96px;padding:16px 22px;
  display:flex;align-items:center;justify-content:center;}
.laufband img{filter:grayscale(1);opacity:.72;object-fit:contain;transition:none;
  max-width:100%;max-height:100%;}
@keyframes lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .laufband .gleis{animation:none;} }

/* ---- Reiter -------------------------------------------------------------- */
/* ---- Der Wechsler: eine Segmentgruppe -----------------------------------
   Drei bis vier Felder in einer vertieften Schiene; das offene ist eine
   helle Fläche, die beim Wechsel hinüberfährt. Was wie ein Schalter
   aussieht, fasst man an.

   Der Läufer hält an allen vier Seiten denselben Abstand: senkrecht über
   dieselbe Größe wie die Polsterung der Schiene, waagerecht über die
   gemessene Lage des offenen Feldes. --pad ist die eine Zahl dafür. */
.reiterleiste{--pad:5px;position:relative;display:inline-flex;max-width:100%;
  background:var(--block);border-radius:var(--rad);padding:var(--pad);margin-top:24px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;scrollbar-color:var(--linie) transparent;}
.laeufer{position:absolute;top:var(--pad);bottom:var(--pad);left:0;border-radius:7px;
  background:var(--papier);
  transition:transform .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);}
.reiter{position:relative;z-index:1;flex:0 0 auto;white-space:nowrap;
  font-family:'Mori',sans-serif;font-size:16px;padding:9px 22px;
  cursor:pointer;color:var(--leise);transition:color .2s;}
.reiter:hover{color:var(--tinte);}
.reiter.an{color:var(--tinte);}
@media (prefers-reduced-motion:reduce){ .laeufer{transition:none;} }
/* Die Tafeln einer Gruppe liegen uebereinander in derselben Rasterzelle.
   Damit ist der Kasten immer so hoch wie die laengste von ihnen, und was
   darunter steht, rutscht beim Wechseln nicht mehr. Verborgen wird mit
   visibility -- anders als display:none bleibt die Tafel dabei im Satz
   stehen und traegt weiter zur Hoehe bei. */
.tafeln{display:grid;}
.tafel{grid-area:1 / 1;padding-top:30px;visibility:hidden;}
.tafel.an{visibility:visible;}

.tafelzeile{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
/* Ein Rasterfeld darf von sich aus nicht schmaler werden als sein Inhalt.
   Eine breite Zeichnung schoebe damit die ganze Seite auf, statt in ihrem
   eigenen Kasten zu schieben. min-width:0 hebt das auf -- die Regel gilt
   fuer jedes Feld, in dem etwas Breites stehen kann. */
.tafelzeile > *,.liste > a,.sammlung > *,.leute > *{min-width:0;}

/* ---- Grafiken -----------------------------------------------------------
   Die Beschriftung in einer Grafik ist so groß wie der Text daneben:
   10,8 Zeichnungseinheiten sind eine Zeile Fließtext. */
/* Die Untergrenze gilt erst dort, wo das Schrumpfen wirklich weh täte.
   Darüber passt sich die Zeichnung stillschweigend an: ein Rollbalken für
   zwanzig Pixel nützt niemandem und stört jeden. */
@media (max-width:1100px){
}

/* ---- Fuß ---------------------------------------------------------------- */
footer{border-top:1px solid var(--linie);padding:26px 0;margin-top:40px;}
footer .bahn{display:flex;justify-content:space-between;}
footer a,footer span{font-family:'Mori',sans-serif;font-size:14px;color:var(--leise);}
footer a:hover{color:var(--tinte);}


/* ---- Was passiert, wenn man auf etwas zeigt -----------------------------
   Unveraendert von der laufenden Seite uebernommen. Die ganze Sprache besteht
   aus zwei Bewegungen: eine Unterstreichung, die erscheint, und eine
   Flaeche, die kippt. Keine Verschiebung, kein Schatten, keine Skalierung,
   kein Farbwechsel im Text. */

/* Navigation: die Unterstreichung erscheint, die Farbe bleibt. Ohne Uebergang.
   Dicke und Abstand stehen oben und gelten fuer beide Zustaende, damit die
   Linie an derselben Stelle liegt, egal ob offen oder ueberfahren. */
.kopf nav a:hover{text-decoration-line:underline;}

/* Schaltflaechen kippen: aus der Fuellung wird die Kontur und umgekehrt.
   0,2 s fuer Flaeche, Schrift und Rand -- wie auf der Seite. */
.knopf{transition:background-color .2s, color .2s, border-color .2s;}
.knopf-voll:hover{background:transparent;color:var(--akzent);}
.knopf-linie:hover{background:var(--tinte);color:var(--papier);}

/* Eine Karte reagiert an ihrem Titel, nicht an ihrer Flaeche: man faehrt
   ueber den ganzen Eintrag, unterstrichen wird nur die Zeile, die zaehlt. */
.liste > a:hover .kartentitel,
.mensch:hover .name{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;}

/* Ein Link im Satz ist schon unterstrichen und wird beim Zeigen blasser. */
.textlink{text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;transition:opacity .15s;}
.textlink:hover{opacity:.5;}

/* ---- Schmaler Schirm ----------------------------------------------------- */
/* Listen und Personen gehen in zwei Schritten herunter: drei Spalten, zwei,
   eine. Ein Sprung von drei auf eins laesst dazwischen zu viel Luft. */
@media (max-width:1040px){ .liste,.leute{grid-template-columns:repeat(2,1fr);} }
@media (max-width:900px){
  .sammlung.vier,.sammlung.drei{grid-template-columns:1fr;}
  h1{font-size:34px;} h2{font-size:25px;}
}
@media (max-width:640px){ .liste,.leute{grid-template-columns:1fr;} }
/* ---- Die Lade -----------------------------------------------------------
   Auf breiten Schirmen ist .lade nur eine Klammer (display:contents): die
   Navigation und die Schaltflaeche bleiben Kinder der Kopfzeile. Unter
   820 px wird daraus ein Fach unter dem Kopf -- Bewegung, Zeiten und Kurve
   von der laufenden Seite abgelesen: 0,32 s fuer die Lade, die drei Striche
   in zwei Schritten zum Kreuz. */
.lade{display:contents;}
.burger{display:none;}
@media (max-width:820px){
  .kopf .bahn{height:60px;gap:16px;}

  .burger{display:block;position:relative;width:17px;height:16px;margin-left:auto;
    padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .burger span{position:absolute;left:0;width:17px;height:2px;background:var(--tinte);
    transition:top .16s cubic-bezier(.4,0,.2,1) .2s,
               transform .2s cubic-bezier(.4,0,.2,1),
               width .2s cubic-bezier(.4,0,.2,1),
               opacity .1s linear .2s;}
  .burger span:nth-child(1){top:0;}
  .burger span:nth-child(2){top:7px;}
  .burger span:nth-child(3){top:14px;}
  .burger.auf span{transition:top .16s cubic-bezier(.4,0,.2,1),
               transform .2s cubic-bezier(.4,0,.2,1) .16s,
               width .2s cubic-bezier(.4,0,.2,1) .16s,
               opacity .1s linear;}
  .burger.auf span:nth-child(1){top:7px;width:14px;transform:rotate(45deg);}
  .burger.auf span:nth-child(2){opacity:0;}
  .burger.auf span:nth-child(3){top:7px;width:14px;transform:rotate(-45deg);}

  .lade{display:block;position:absolute;top:100%;left:0;right:0;z-index:19;
    background:var(--papier);border-bottom:1px solid var(--linie);
    max-height:0;overflow:hidden;
    transition:max-height .32s cubic-bezier(.4,0,.2,1);}
  .lade.auf{max-height:340px;}
  .lade nav{display:flex;flex-direction:column;gap:16px;margin:0;
    padding:19px var(--rand) 0;}
  .lade > .knopf{display:inline-flex;margin:20px var(--rand) 24px;}
  body.lade-auf{overflow:clip;}
}

/* Bilanz-Zeichen auf den Kacheln
   Immer dasselbe Grundzeichen, das T-Konto; was sich aendert, ist, was darin
   gebucht ist. Zwei Stellschrauben: --sym die Groesse, color die Farbe. */
.sym{display:block;width:var(--sym,48px);height:var(--sym,48px);
  margin-bottom:18px;color:var(--tinte);}
.sym svg{display:block;width:100%;height:100%;overflow:visible;}
/* Die Abbildungen der Seite zeichnen eine Haarlinie von 1,53 px. Damit die
   Zeichen dieselbe Linie ziehen, egal wie gross sie gestellt werden, wird
   der Strich nicht mitskaliert. */
.sym svg *{vector-effect:non-scaling-stroke;stroke-width:1.53;}
@media (max-width:900px){ .sym{--sym:40px;} }

/* =======================================================================
   Abbildungen
   Die sieben Zeichnungen der ICCA-Seite sind Satz, kein Bild: sie nehmen
   die Schrift der Seite an, brechen um und richten sich nach der Breite.
   Eine Groesse fuer alle sieben, eine Linienstaerke, eine Tinte.
   ======================================================================= */
.abb{
  --x1:#B060E0; --x2:#3060C0; --x3:#2080B0; --x4:#50B0D0; --x5:#20C090;
  --x6:#30A060; --x7:#E08820; --x8:#D06020; --x9:#E04040; --x10:#C04080;
  --kette-direct:#29363D; --kette-iron:#8C5A3C; --kette-steel:#5B7C99;
  --kette-body:#0E8388;   --kette-car:#3F6B3F; --kette-leben:#6B4C6E;
  --icca:#13917C;
  --strich:var(--tinte);
  --fein:1px;
  margin:0;line-height:1.42;color:var(--tinte);
  /* Die Abbildungen sprechen Grotesk, wie in der Vorlage: ihre
     Beschriftungen werden benutzt, nicht gelesen. Mori setzt breiter als
     die Serife, deshalb eine Stufe kleiner als der Flie\00DFtext. */
  font-family:'Mori',system-ui,sans-serif;font-size:16px;
}
@container (max-width:560px){ .abb{font-size:15px;} }
@container (max-width:380px){ .abb{font-size:14px;} }

.abb b,.abb .g{font-weight:600;}
.abb-titel{font-family:'Mori',system-ui,sans-serif;font-weight:600;
  text-align:center;margin:0 0 18px;}
.abb-fuss{font-size:.8em;color:var(--leise);text-align:right;margin-top:12px;}

/* Die Buchungsmarken -- die einzigen Farben in den Abbildungen */
.m{display:inline-block;min-width:2.2em;padding:2px 7px;border-radius:2px;
  font-family:'Mori',system-ui,sans-serif;font-weight:600;font-size:.8em;
  line-height:1.35;color:#fff;text-align:center;white-space:nowrap;}
.m sub{font-size:.76em;vertical-align:-.18em;}
.m1{background:var(--x1)} .m2{background:var(--x2)} .m3{background:var(--x3)}
.m4{background:var(--x4)} .m5{background:var(--x5)} .m6{background:var(--x6)}
.m7{background:var(--x7)} .m8{background:var(--x8)} .m9{background:var(--x9)}
.m10{background:var(--x10)}
.op{padding:0 .3em;color:var(--tinte);}

/* ---- Rechnung: Zeile aus Zeichen, Text und ein oder zwei Wertspalten -- */
.rechnung{display:grid;align-items:baseline;row-gap:0;}
.rechnung .z{display:contents;}
.rechnung .vor{grid-column:1;text-align:center;padding:5px 0;}
.rechnung .txt{grid-column:2;padding:5px 10px 5px 0;overflow-wrap:break-word;}
.rechnung .w{padding:5px 0;text-align:center;}
.rechnung .strich > *{border-top:var(--fein) solid var(--strich);}
.rechnung .kopf > *{padding-bottom:6px;text-align:center;align-self:stretch;}

/* ---- Journal ---------------------------------------------------------- */
.abb-journal table{width:100%;border-collapse:collapse;}
.abb-journal th{font-family:'Mori',system-ui,sans-serif;font-weight:600;
  text-align:left;vertical-align:bottom;padding:0 16px 8px 0;
  border-bottom:var(--fein) solid var(--strich);white-space:nowrap;}
.abb-journal td{padding:5px 16px 5px 0;vertical-align:top;}
.abb-journal th:last-child,.abb-journal td:last-child{padding-right:0;}
.abb-journal .zeit{font-family:'Mori',system-ui,sans-serif;font-weight:600;
  white-space:nowrap;text-align:center;}
.abb-journal th.zeit,.abb-journal th.marke{text-align:center;}
.abb-journal .marke{text-align:center;white-space:nowrap;}
.abb-journal .sk{white-space:nowrap;}

/* ---- Bilanz ----------------------------------------------------------- */
.abb-bilanz .seiten{display:grid;grid-template-columns:1fr 1fr;}
.abb-bilanz .seite{padding:0 26px;}
.abb-bilanz .seite:first-child{padding-left:0;}
.abb-bilanz .seite:last-child{padding-right:0;
  border-left:var(--fein) solid var(--strich);}
.abb-bilanz .seitenkopf{font-family:'Mori',system-ui,sans-serif;text-align:center;
  padding-bottom:9px;border-bottom:var(--fein) solid var(--strich);}
.abb-bilanz .konto{margin-top:18px;}
.abb-bilanz .kontokopf{display:flex;align-items:baseline;gap:12px;
  padding-bottom:5px;border-bottom:var(--fein) solid var(--strich);}
.abb-bilanz .kontokopf span{flex:1;text-align:center;}
.abb-bilanz .buch{display:grid;grid-template-columns:1fr 1fr;}
.abb-bilanz .buch > div{padding:7px 6px;text-align:center;}
.abb-bilanz .buch > div:first-child{border-right:var(--fein) solid var(--strich);}
.abb-bilanz .m{margin:2px 0;}
.abb-bilanz .konto:last-child .buch > div{padding-bottom:2px;}

/* ---- Kette (Wertschoepfungskette) ------------------------------------- */
.kette{display:grid;
  grid-template-columns:max-content 1fr 1.7em 1fr 1.7em 1.3fr;
  align-items:center;column-gap:0;}
.kette > *{min-width:0;}
.kette .schritt{grid-row:var(--rbox);grid-column:1;padding-right:22px;}
.kette .feldk{margin:0 0;padding:9px 8px;text-align:center;color:#fff;
  font-family:'Mori',system-ui,sans-serif;font-size:.94em;line-height:1.2;}
.kette .zeichen{text-align:center;}
.kette .k-direct{background:var(--kette-direct)} .kette .k-iron{background:var(--kette-iron)}
.kette .k-steel{background:var(--kette-steel)}   .kette .k-body{background:var(--kette-body)}
.kette .k-car{background:var(--kette-car)}       .kette .k-leben{background:var(--kette-leben)}
.kette .br{display:contents;}
.kette .br-a{border-right:var(--fein) solid var(--strich);
  border-bottom:var(--fein) solid var(--strich);margin-right:50%;height:13px;}
.kette .br-b{border-bottom:var(--fein) solid var(--strich);height:13px;}
.kette .br-c{border-bottom:var(--fein) solid var(--strich);margin-left:50%;height:13px;}
.kette .br-d{border-left:var(--fein) solid var(--strich);margin-left:50%;height:13px;}

/* ---- Ein System -------------------------------------------------------- */
.system .normen{display:grid;grid-template-columns:repeat(10,1fr);align-items:stretch;}
.system .norm{border:var(--fein) solid var(--strich);padding:8px 4px;margin:0 7px;
  text-align:center;font-family:'Mori',system-ui,sans-serif;font-size:.94em;
  line-height:1.2;background:transparent;}
.system .ab{border-left:var(--fein) solid var(--strich);}
.system .quer{border-top:var(--fein) solid var(--strich);}
.system .block{background:var(--icca);padding:0 22px 28px;margin-top:0;}
.system .blocktitel{font-family:'Mori',system-ui,sans-serif;font-weight:600;
  color:#fff;text-align:center;margin-bottom:22px;}
.system .felder{display:grid;grid-template-columns:repeat(8,1fr);align-items:stretch;}
.system .feld{background:#fff;color:var(--tinte);padding:10px 6px;margin:0 7px;
  text-align:center;font-family:'Mori',system-ui,sans-serif;font-size:.94em;
  line-height:1.25;}
.system .ab-w{border-left:var(--fein) solid #fff;}
.system .quer-w{border-top:var(--fein) solid #fff;}
.system .stamm{border-left:var(--fein) solid var(--strich);}
.system .stamm-w{border-left:var(--fein) solid #fff;}

/* ---- Rechnungen: ein, zwei oder zwei gleiche Wertspalten -------------- */
.rechnung.r1{grid-template-columns:1.5em minmax(0,1fr) auto;}
.rechnung.r1 .w{text-align:right;white-space:nowrap;}
.rechnung.r2{grid-template-columns:1.5em minmax(0,1.45fr) 1fr 1fr;}
.rechnung.r2b{grid-template-columns:1.5em minmax(0,1fr) max-content max-content;}
.rechnung.r2b .w{padding-left:26px;}
.rechnung.r2b .kopf > *{border-bottom:var(--fein) solid var(--strich);}
.rechnung .strich-links > .vor,.rechnung .strich-links > .txt{
  border-top:var(--fein) solid var(--strich);}
.rechnung .w{align-self:stretch;}
.rechnung .w.re{border-left:var(--fein) solid var(--strich);}
.tkopf{grid-column:3/5;display:flex;align-items:baseline;gap:10px;
  padding-bottom:7px;border-bottom:var(--fein) solid var(--strich);}
.tkopf span{flex:1;text-align:center;}
.tkopf i,.abb-bilanz .kontokopf i{font-style:normal;}
.abb-bilanz .kontokopf i{flex:0 0 auto;}

/* ---- Ein System: Zeilenhoehen der beiden Raster ---------------------- */
.system .normen{grid-template-rows:auto 14px auto 22px 0 26px;}
.system .felder{grid-template-rows:auto 16px 0 18px auto;}
.system .stamm-oben{width:0;height:30px;margin:0 auto;
  border-left:var(--fein) solid #fff;}
@container (max-width:560px){ .system .stamm-oben{display:none;} }

/* ---- Strenge Teilung: links der Text, rechts die Abbildung -----------
   Die rechte Spalte ist ein eigener Messbereich. Die Abbildungen richten
   sich danach, wie breit *ihre Spalte* ist -- nicht danach, wie breit das
   Fenster ist. Deshalb verhalten sie sich in der halben Bahn genauso
   vernuenftig wie auf dem Telefon. */
.tafelzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:44px;align-items:start;}
.tafelzeile > *{min-width:0;}
.tafelzeile > :last-child,.abbvoll{container-type:inline-size;}
/* Das Journal ist die eine breite Tabelle: es steht unter seinem Text
   ueber die ganze Bahn, nicht in der halben Spalte. */
.abbvoll{margin-top:36px;}
@media (max-width:980px){ .tafelzeile{grid-template-columns:1fr;gap:28px;} }

/* ---- schmal ------------------------------------------------------------ */
/* Die Tabelle braucht mindestens 620 px. Darunter wird aus jeder Buchung
   eine eigene kleine Karte -- dieselben sechs Angaben, untereinander. */
@container (max-width:640px){
  .abb-journal .sk{white-space:normal;}
  .abb-journal thead{display:none;}
  .abb-journal table,.abb-journal tbody{display:block;}
  .abb-journal tr{display:grid;grid-template-columns:auto 1fr auto;
    column-gap:12px;row-gap:1px;padding:11px 0;
    border-top:var(--fein) solid var(--linie);}
  .abb-journal tr:first-child{border-top:var(--fein) solid var(--strich);}
  .abb-journal td{display:block;padding:0;}
  .abb-journal .zeit{grid-column:1;grid-row:1;}
  .abb-journal .tat{grid-column:2;grid-row:1;font-family:'Mori',system-ui,sans-serif;}
  .abb-journal .marke{grid-column:3;grid-row:1;}
  .abb-journal .sk{grid-column:2/4;grid-row:2;}
  .abb-journal .soll{grid-column:2/4;grid-row:3;}
  .abb-journal .haben{grid-column:2/4;grid-row:4;}
  .abb-journal td:empty{display:none;}
  .abb-journal td[data-k]{display:grid;grid-template-columns:4.4em 1fr;
    column-gap:8px;align-items:baseline;}
  .abb-journal td[data-k]::before{content:attr(data-k);
    font-size:.78em;letter-spacing:.05em;text-transform:uppercase;
    color:var(--leise);}
}
@container (max-width:820px){ .abb-bilanz .seite{padding:0 14px;} }
@container (max-width:560px){
  .abb-bilanz .seiten{grid-template-columns:1fr;}
  .abb-bilanz .seite{padding:0;}
  .abb-bilanz .seite:last-child{border-left:0;border-top:var(--fein) solid var(--strich);
    margin-top:26px;padding-top:20px;}
}
@container (max-width:520px){
  .kette{grid-template-columns:0 1fr 1.4em 1fr 1.4em 1.15fr;}
  .kette .schritt{grid-column:1/-1;grid-row:var(--rlab);padding:0 0 7px;
    font-family:'Mori',system-ui,sans-serif;font-size:.92em;color:var(--leise);}
  .kette .feldk{padding:8px 5px;font-size:.86em;}
}
@container (max-width:560px){
  .system .normen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}
  .system .norm{margin:0;padding:7px 12px;}
  .system .leitung,.system .ab,.system .quer{display:none;}
  .system .stamm-schmal{display:block;height:26px;margin:0 auto;width:0;
    border-left:var(--fein) solid var(--strich);}
  /* Flex statt Raster: damit fallen die festen Rasterplaetze der
     Zeichnung weg und die Felder ordnen sich selbst. */
  .system .felder{display:flex;flex-wrap:wrap;gap:10px;}
  .system .feld{flex:1 1 44%;margin:0;}
  .system .feld:last-child{flex:1 1 100%;}
  .system .leitung-w,.system .ab-w,.system .quer-w{display:none;}
  .system .stamm-schmal-w{display:block;height:22px;margin:0 auto;width:0;
    border-left:var(--fein) solid #fff;}
}
@container (min-width:561px){ .system .stamm-schmal,.system .stamm-schmal-w{display:none;} }

/* ---- Rechnungen in einer schmalen Spalte ------------------------------
   Die Wertspalten nehmen nur noch, was die Marken brauchen; der Text
   bekommt den Rest. Sonst steht links ein Wortband und rechts Leere. */
@container (max-width:520px){
  .rechnung.r2{grid-template-columns:1.3em minmax(0,1fr) auto auto;}
  .rechnung.r2b{grid-template-columns:1.3em minmax(0,1fr) auto auto;}
  .rechnung .w{padding-left:8px;padding-right:0;}
  .rechnung.r2 .w.re{padding-left:8px;}
  .tkopf{gap:6px;}
}

/* Der Produkt-Fussabdruck in einer schmalen Spalte: die beiden Wertspalten
   rutschen unter ihren Text und nehmen ihren Kopf als Etikett mit. */
@container (max-width:520px){
  .abb-pcf .rechnung{grid-template-columns:1.3em minmax(0,1fr);}
  .abb-pcf .kopf{display:none;}
  .abb-pcf .z > .w{grid-column:2;text-align:left;padding:0 0 4px;
    display:flex;align-items:baseline;gap:8px;}
  .abb-pcf .z > .w:empty{display:none;}
  .abb-pcf .z > .w::before{content:attr(data-k);flex:0 0 3.6em;
    font-size:.78em;letter-spacing:.05em;text-transform:uppercase;color:var(--leise);}
  .abb-pcf .z > .txt{padding-bottom:3px;}
  .abb-pcf .z:last-child > .w,.abb-pcf .z:nth-last-child(2) > .w{display:none;}
  .abb-pcf .strich > .w{border-top:0;}
}
@container (max-width:430px){
  .rechnung.r2{grid-template-columns:1.2em minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);}
  .rechnung.r2b{grid-template-columns:1.2em minmax(0,1fr);}
}

/* ---- Ecken: die Abbildungen folgen den Radien der Seite ---------------
   10 px am grossen Feld wie am Kasten, 8 px am beschrifteten Kaestchen wie
   an Schaltflaeche und Bild. Die Buchungsmarken sind halb so hoch wie eine
   Schaltflaeche und bekommen deshalb den halben Radius -- gleicher Bogen,
   nicht gleiche Zahl. */
.m{border-radius:4px;}
.kette .feldk{border-radius:var(--rad-klein);}
.system .norm,.system .feld{border-radius:var(--rad-klein);}
.system .block{border-radius:var(--rad);}

/* Die Rechenidentitaeten sind eine Abbildung wie die anderen: sie stehen
   rechts, in derselben Schrift und Groesse, im Kasten der Seite. */
.abb-formeln .kasten{padding:22px 26px;width:max-content;max-width:100%;}
.abb-formeln .kasten > * + *{margin-top:14px;}

/* ---- Marken auf der About-Seite --------------------------------------
   Dieselbe Behandlung wie im Laufband der Startseite: Graustufe, Deckkraft
   0,72, keine Reaktion auf den Zeiger -- nur steht hier jede Marke still. */
.marken{display:flex;flex-wrap:wrap;align-items:center;gap:28px 46px;margin-top:28px;}
.marken img{filter:grayscale(1);opacity:.72;height:auto;max-width:100%;}
@media (max-width:560px){ .marken{gap:24px 32px;} .marken img{max-width:44%;} }

/* ---- Formular ---------------------------------------------------------
   Ein Feld und eine Schaltflaeche, in denselben Massen wie ueberall:
   8 px Radius, 1 px Rand, Mori auf der Schaltflaeche, Serife im Feld. */
.formular{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px;max-width:560px;}
.formular input{flex:1 1 250px;min-width:0;font-family:'Serife',Georgia,serif;
  font-size:17px;line-height:1.4;padding:11px 15px;color:var(--tinte);
  background:var(--papier);border:1px solid var(--linie);
  border-radius:var(--rad-klein);transition:border-color .2s;}
.formular input::placeholder{color:var(--leise);}
.formular input:focus{outline:none;border-color:var(--tinte);}
.formular button{cursor:pointer;}
.feldmarke{display:block;font-family:'Mori',system-ui,sans-serif;font-size:14px;
  color:var(--leise);}
.kleingedruckt{font-size:14px;line-height:1.55;color:var(--leise);
  margin-top:16px;max-width:620px;}
.anschrift{font-family:'Mori',system-ui,sans-serif;font-size:15px;line-height:1.65;
  color:var(--leise);margin-top:26px;}

/* =========================================================================
   Aenderungsrunde 14. September
   ========================================================================= */

/* Navigation groesser -- sie stand zu klein neben dem uebrigen Satz. */
.kopf nav a{font-size:18px;}

/* Mehr Luft zwischen den Abschnitten. */
section{padding:104px 0;}
section.band{padding:30px 0;}

/* Einleitungen laufen ueber die ganze Bahn statt in einer schmalen Spalte. */
.voll{max-width:none;}

/* Haken statt Quadrat vor den drei Zeilen im Hero. */
.punkte p{padding-left:26px;}
.punkte p::before{content:"";position:absolute;left:0;top:.36em;
  width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M1.6 6.9 4.8 10 11.2 3.1' fill='none' stroke='%238B1538' stroke-width='1.9' stroke-linecap='square'/%3E%3C/svg%3E") no-repeat center/contain;}

/* Hero: der Name oben ist die Hauptsache, die Zeile darunter darf ruhiger sein. */
.kicker{font-size:18px;}
h1.hero-titel{font-size:38px;line-height:1.12;}

/* Der Wechsler steht mittig. */
.reiterleiste{display:flex;width:max-content;max-width:100%;
  margin-left:auto;margin-right:auto;}

/* Text und Abbildung stehen auf gleicher Hoehe. */
.tafelzeile{align-items:center;}
/* Der Produkt-Fussabdruck braucht mehr Platz fuer den Text als fuer die Zeichnung.
   Nur dort, wo es ueberhaupt zwei Spalten gibt -- sonst haelt die Regel die
   zweite Spalte auch auf dem Telefon fest und die Seite laeuft ueber. */
@media (min-width:981px){
  .tafelzeile.breit-text{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}
}

/* Die beiden Seiten der Bilanz sind Ueberschriften. */
.abb-bilanz .seitenkopf{font-weight:600;}

/* Die Marken im Laufband eine Spur groesser. */
.laufband{height:112px;}
.laufband .zelle{flex:0 0 230px;height:112px;}

/* Ein Link, der traegt: fett statt unterstrichen. */
.textlink.stark{font-weight:600;text-decoration:none;}

/* Der Schlussabsatz: viel Luft, Groesse einer Abschnittsueberschrift,
   keine Flaeche, keine Unterstreichung. */
section.eng{padding:130px 0;}
section.eng p{font-size:30px;line-height:1.3;max-width:900px;}
section.eng .textlink{font-weight:600;text-decoration:none;}

/* Die About-Seite endet ohne Schlussabsatz und braucht den Abstand selbst. */
section.letzte{padding-bottom:150px;}

/* =========================================================================
   Aenderungsrunde 14. September, zweite Folge
   ========================================================================= */

/* Die Partnerreihen bekommen Luft: groessere Luecke zwischen den Marken,
   mehr Abstand unter der Zwischenzeile. Vorher standen sechs Siegel fast
   auf Tuchfuehlung -- eine Marke braucht Weissraum, sonst liest sie sich
   als Muster statt als Zeichen. */
.marken{gap:40px 64px;margin-top:34px;}
@media (max-width:560px){ .marken{gap:28px 36px;} }

/* Get in touch: ausser der Ueberschrift eine Groesse. Die Anschrift stand
   auf 15 px in der Grotesk -- sie steht jetzt im Satz der Seite. */
.anschrift.gleich{font-family:inherit;font-size:17px;line-height:1.65;
  color:var(--tinte);margin-top:26px;}

/* Der Newsletter-Satz laeuft ueber die ganze Bahn wie der Kasten, in dem
   er steht. */
p.voll{max-width:none;}

/* Zwei Muenzstapel decken einander, wie in der Vorlage. Der vordere traegt
   dafuer die Flaeche der Seite -- unsichtbar, aber die Verdeckung stimmt. */
.sym svg .fl{fill:var(--papier);}

/* =========================================================================
   Reiter oder Karten
   -------------------------------------------------------------------------
   Ein Schalter neben der Reiterschiene. Links die Reiter wie bisher, rechts
   dieselben vier Inhalte als Karten nebeneinander: die Reiterbeschriftung
   wird zur Ueberschrift, darunter steht die Zeile unveraendert -- Text links,
   Abbildung rechts. Alle vier Karten sind gleich breit und gleich hoch (die
   Reihe streckt sie auf die Hoehe der laengsten). Rechts schaut die naechste
   Karte hervor, damit man sieht, dass es weitergeht.
   ========================================================================= */

.wechselzeile{display:grid;grid-template-columns:1fr minmax(0,auto) 1fr;
  align-items:center;column-gap:16px;}
.wechselzeile > .reiterleiste{grid-column:2;min-width:0;}
.wechselzeile > .schalter{grid-column:3;justify-self:end;margin-top:24px;}
@media (max-width:760px){
  .wechselzeile{grid-template-columns:minmax(0,1fr);justify-items:center;}
  .wechselzeile > .reiterleiste,.wechselzeile > .schalter{grid-column:1;}
  .wechselzeile > .schalter{margin-top:14px;}
}

/* Der Schalter: dieselbe Schiene wie der Wechsler, nur kleiner. */
.schalter{display:inline-flex;gap:2px;padding:4px;background:var(--block);
  border-radius:var(--rad);}
.schalter button{width:36px;height:30px;display:grid;place-items:center;cursor:pointer;
  border:0;background:transparent;color:var(--leise);border-radius:6px;
  transition:background .2s,color .2s;}
.schalter button:hover{color:var(--tinte);}
.schalter button.an{background:var(--papier);color:var(--tinte);}
.schalter svg{width:18px;height:18px;display:block;}
.schalter svg *{vector-effect:non-scaling-stroke;stroke-width:1.4;}

/* Die Reihe. Ohne Balken, aber mit Schnappen -- eine Karte rastet ein. */
.karten{margin-top:30px;--kb:88%;}
.kartenbahn{display:flex;align-items:stretch;gap:20px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.kartenbahn::-webkit-scrollbar{display:none;}
.karte{flex:0 0 var(--kb);scroll-snap-align:start;display:flex;flex-direction:column;}
/* Hinter der letzten Karte laeuft ein Platzhalter mit. Ohne ihn kann die
   letzte Karte gar nicht links einrasten -- die Reihe schnappt zurueck und
   die Karte steht angeschnitten am Rand. */
.kartenbahn::after{content:"";flex:0 0 auto;
  width:max(0px, calc(100% - var(--kb) - 20px));}
.karte > .kartenkopf{font-family:'Mori',system-ui,sans-serif;font-weight:600;
  font-size:20px;line-height:1.3;margin-bottom:24px;}
.karte .tafelzeile{flex:1;}
@media (max-width:820px){ .karten{--kb:92%;} }
@media (max-width:560px){ .karten{--kb:94%;} }

/* Die Reihe laeuft bis an den Fensterrand, solange die Bahn dort haengt: die
   Karten schieben sich links und rechts aus dem Bild. Ueber 1432 px steht die
   Bahn still und bekommt eigene Raender -- dort bleibt auch die Reihe in der
   Bahn, sonst liefe sie in leere Seitenraender hinein. */
@media (max-width:1432px){
  .karten{margin-left:calc(var(--rand) * -1);margin-right:calc(var(--rand) * -1);}
  .kartenbahn{padding-left:var(--rand);padding-right:var(--rand);
    scroll-padding-left:var(--rand);}
  .kartennav{margin-left:var(--rand);margin-right:var(--rand);}
}

/* Pfeil und Punkte, mittig darunter. */
.kartennav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:26px;}
.pfeil{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--tinte);border:1px solid var(--tinte);
  border-radius:var(--rad-klein);transition:background .2s,color .2s,opacity .2s;}
.pfeil:hover{background:var(--tinte);color:var(--papier);}
.pfeil svg{width:18px;height:18px;display:block;}
.pfeil[disabled]{opacity:.3;cursor:default;}
.pfeil[disabled]:hover{background:transparent;color:var(--tinte);}
.kartenpunkte{display:flex;gap:10px;}
.kartenpunkte button{width:8px;height:8px;padding:0;border:0;border-radius:999px;
  background:var(--linie);cursor:pointer;transition:background .2s;}
.kartenpunkte button.an{background:var(--tinte);}

/* [hidden] muss staerker sein als die Anzeigeregeln der drei Behaelter. */
.reiterleiste[hidden],.tafeln[hidden],.karten[hidden]{display:none;}

/* Die angeschnittene Karte ist anklickbar; die offene nicht. */
.karte:not(.an){cursor:pointer;}

/* Der Kicker im Hero steht in Versalien -- wie in Entwurf B. */
.kicker{text-transform:uppercase;}

/* =========================================================================
   Aenderungsrunde 15. September
   ========================================================================= */

/* ---- Mehr Luft, ueberall im selben Verhaeltnis ------------------------
   Nichts steht enger als vorher; alle Abstaende wachsen um etwa ein
   Sechstel, damit die Seiten gleichmaessig atmen. */
section{padding:120px 0;}
section.band{padding:34px 0;}
section.band > .bahn{padding:56px 48px;}
section.eng{padding:150px 0;}
section.letzte{padding-bottom:172px;}
.liste,.leute{gap:34px;}
.kasten{padding:28px;}
.mensch{padding:20px;}
.tafelzeile{gap:56px;}
.tafel{padding-top:34px;}
.reiterleiste{margin-top:30px;}
.wechselzeile > .schalter{margin-top:30px;}
.karten{margin-top:36px;}
.marken{margin-top:36px;}
.formular{margin-top:22px;}
@media (max-width:700px){ section.band > .bahn{padding:36px 24px;} }

/* ---- Eine Bewegung fuer alle Links -----------------------------------
   Zeigen heisst: es erscheint eine Unterstreichung. Die Farbe bleibt, wo
   sie ist -- genau wie im Kopfmenue. */
.textlink{text-decoration:none;}
/* a.textlink, damit die Regel auch section.eng .textlink schlaegt --
   das ist Typ plus zwei Klassen und waere sonst staerker. */
a.textlink:hover{opacity:1;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;}
footer a:hover{color:var(--leise);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:3px;}
.logo:hover{opacity:1;}

/* ---- Seitentitel und Schlussabsatz stehen mittig ---------------------
   wie das Menue oben und die Fussleiste unten. Der Hero bleibt links: er
   traegt Haken und Schaltflaechen, die an einer Kante haengen muessen. */
h1:not(.hero-titel){text-align:center;}
section.eng{text-align:center;}
section.eng p{margin-left:auto;margin-right:auto;}

/* ---- Hero: die Zeile darueber ist die Hauptsache ---------------------
   Groessen getauscht: der Name gross, der Satz darunter klein. Keine
   Versalien mehr. */
.kicker{text-transform:none;letter-spacing:.02em;}
.hero-kicker{font-size:38px;line-height:1.12;}
h1.hero-titel{font-size:18px;line-height:1.5;font-weight:400;letter-spacing:0;}

/* ---- Das T-Konto ----------------------------------------------------
   Der Stamm haengt jetzt an der Querlinie und faellt bei jedem Konto
   gleich weit -- vorher war er so hoch wie zufaellig gebucht wurde. */
.abb-bilanz .buch{position:relative;min-height:62px;}
.abb-bilanz .buch::before{content:"";position:absolute;left:50%;top:0;bottom:0;
  width:var(--fein);background:var(--strich);transform:translateX(-50%);}
.abb-bilanz .buch > div:first-child{border-right:0;}

/* ---- Text und Abbildung zur Haelfte ---------------------------------- */
@media (min-width:981px){
  .tafelzeile.halbe{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
}

/* ---- Die Rechenidentitaeten ------------------------------------------
   Auf das Gleichheitszeichen ausgerichtet, eine Haarlinie zwischen den
   Zeilen, die linke Seite im Halbfetten: drei Saetze, nicht drei Zeilen. */
.abb-formeln .kasten > * + *{margin-top:0;}
.abb-formeln .gl{display:grid;grid-template-columns:max-content auto max-content;
  column-gap:16px;align-items:baseline;}
.abb-formeln .gl > *{padding:13px 0;}
.abb-formeln .gl > .l{text-align:right;font-weight:600;}
.abb-formeln .gl > .z{color:var(--leise);text-align:center;}
.abb-formeln .gl > *:nth-child(n+4){border-top:var(--fein) solid var(--linie);}
@container (max-width:420px){
  .abb-formeln .gl{grid-template-columns:1fr;column-gap:0;}
  .abb-formeln .gl > *{padding:3px 0;}
  .abb-formeln .gl > .l{text-align:left;padding-top:13px;}
  .abb-formeln .gl > .z{text-align:left;}
  .abb-formeln .gl > .r{padding-bottom:13px;}
  .abb-formeln .gl > *:nth-child(n+4){border-top:0;}
  .abb-formeln .gl > .l:nth-child(n+4){border-top:var(--fein) solid var(--linie);}
}

/* ---- Ein System: der Titel traegt jetzt das Kuerzel ------------------- */
.system .blocktitel.stark{font-weight:700;}

/* ---- Partner auf der About-Seite -------------------------------------
   Dieselbe Groesse wie *Members* (das ist h2) und derselbe Abstand nach
   oben wie zwischen Steering Committee und Members. */
.partnerkopf{margin-top:210px;}
/* Mehr Luft zwischen der Ueberschrift und ihren Marken. Der Abstand
   zwischen den beiden Partnerbloecken haengt an .partnerkopf und bleibt
   davon unberuehrt -- er waechst nicht mit. */
.partnerkopf + .marken{margin-top:56px;}

/* ---- Der Newsletter-Kasten bekommt Luft nach unten -------------------- */
section.band.abo > .bahn{padding-bottom:84px;}
@media (max-width:700px){ section.band.abo > .bahn{padding-bottom:52px;} }

/* ---- Karten, die noch nicht da sind ---------------------------------- */
.liste > a.kommt{opacity:.62;}
.liste > a.kommt:hover{opacity:.62;}

/* Der Hero-Name nimmt die Zurichtung der Ueberschriften dieses Entwurfs. */
.hero-kicker{letter-spacing:-.005em;}

/* ---- Die vier Abschluesse sprechen eine Groesse -----------------------
   Die allgemeine Regel verkleinert eine Abbildung, sobald ihre Spalte
   unter 560 px faellt. Bei den vier Abschluessen darf das nicht passieren:
   sie stehen nebeneinander im selben Wechsler und muessen gleich gross
   sein. Erst auf dem Telefon geben sie nach. */
.tafel[data-g="a"] .abb{font-size:16px;}
@container (max-width:460px){ .tafel[data-g="a"] .abb{font-size:15px;} }
@container (max-width:380px){ .tafel[data-g="a"] .abb{font-size:14px;} }

/* Ohne die weisse Linie oben braucht der Block eigene Luft nach oben. */
.system .block{padding-top:24px;}
/* Die Haarlinien zwischen den Identitaeten laufen durch: die Luft steckt
   jetzt im Gleichheitszeichen, nicht in einer Rasterluecke. */
.abb-formeln .gl{column-gap:0;}
.abb-formeln .gl > .z{padding-left:16px;padding-right:16px;}

/* ---- Nachtrag 15. September ------------------------------------------ */

/* Die Schiene steht in beiden Ansichten. [hidden] gilt nur noch fuer die
   Tafeln und die Kartenreihe. */
.reiterleiste[hidden]{display:flex;}

/* News und Events: die Liste haengt an ihrer Einleitung, nicht an einem
   eigenen Abschnitt -- sonst klaffte dazwischen der doppelte
   Abschnittsabstand. */

/* =========================================================================
   Die Fussleiste traegt jetzt drei Zeilen
   -------------------------------------------------------------------------
   Oben der Ruf -- links der Satz in der Groesse einer Abschnittsueberschrift,
   rechts in derselben Zeile die bekannte Schaltflaeche. Darunter die
   Newsletter-Anmeldung, ohne getoente Flaeche. Ganz unten die Rechtszeile
   wie bisher. Damit steht der Schlussabsatz auf jeder Seite an derselben
   Stelle, statt einmal pro Seite eigens gesetzt zu werden.
   ========================================================================= */
footer{padding:0;margin-top:130px;}
footer > .bahn{display:block;}

.fuss-ruf{display:flex;align-items:center;justify-content:space-between;
  gap:40px;padding:60px 0;}
.fuss-ruf p{margin:0;max-width:none;font-family:'Mori',system-ui,sans-serif;
  font-weight:600;font-size:30px;line-height:1.18;color:var(--tinte);}
.fuss-ruf .knopf{flex:0 0 auto;font-size:16px;}

.fuss-abo{padding:48px 0;border-top:1px solid var(--linie);}
.fuss-abo > p:first-of-type{max-width:none;}
.fuss-abo .formular{margin-top:20px;}

.fuss-zeile{display:flex;justify-content:space-between;gap:20px;
  padding:26px 0;border-top:1px solid var(--linie);}

/* Eine Schaltflaeche unterstreicht nicht -- sie kippt ihre Flaeche. */
footer a.knopf:hover{text-decoration:none;}

@media (max-width:760px){
  .fuss-ruf{flex-direction:column;align-items:flex-start;gap:26px;padding:44px 0;}
  .fuss-ruf p{font-size:24px;}
  .fuss-abo{padding:36px 0;}
  .fuss-zeile{flex-direction:column;gap:8px;}
}
.fuss-ruf p{letter-spacing:-.004em;}

/* Der Satz unter dem Namen wird gesetzt wie der Kicker vorher: PP Mori,
   halbfett, 0,02 em Zurichtung -- nur ohne Versalien. */
h1.hero-titel{font-weight:600;letter-spacing:.02em;}

/* =========================================================================
   Das senkrechte Raster von anthropic.com
   -------------------------------------------------------------------------
   Nachgemessen am 15. September bei 1440 px Fensterbreite:

     Menue  ->  erster Inhalt          151 px
     Abschnitt -> Abschnitt             91 px   (Inhalt zu Inhalt)
     Ueberschrift -> ihr Inhalt         32 px
     Inhalt -> Schaltflaeche            32 px
     Rasterluecke zwischen Karten       31,5 px
     Schaltflaechen untereinander       16 px
     Kleine Zeilen in der Fussleiste     8 px
     Fussleiste, Polsterung             76 px

   Uebernommen sind nur diese Abstaende *zwischen* Elementen. Schriftgroessen,
   Zeilenabstaende, Satzbreiten und die Abstaende innerhalb eines Textes
   bleiben unberuehrt.
   ========================================================================= */

/* 46 + 46 = 92 zwischen zwei Abschnitten -- Anthropics 91. */
section{padding:46px 0;}
section.band{padding:46px 0;}
/* Der erste Abschnitt einer Seite steht so weit unter dem Menue wie dort. */
.kopf + section{padding-top:150px;}
/* Der letzte Abschnitt haelt 90 px zur Fussleiste, die selbst 76 px polstert. */
section.letzte{padding-bottom:90px;}

/* 32 -- Ueberschrift zu Inhalt, Inhalt zu Schaltflaeche, Karte zu Karte. */
.liste,.leute{gap:32px;margin-top:32px;}
.marken{margin-top:32px;}
.tafel{padding-top:32px;}
.reiterleiste{margin-top:32px;}
.wechselzeile > .schalter{margin-top:32px;}
.karten{margin-top:32px;}
.formular{margin-top:32px;}
@media (max-width:980px){ .tafelzeile{gap:32px;} }

/* Der Abstand zwischen den beiden Partnerbloecken bleibt so gross wie der
   zwischen Steering Committee und Members -- das ist jetzt 92 px. Die Luft
   unter der Partnerueberschrift bleibt bei 56 px, wie gewuenscht. */
.partnerkopf{margin-top:92px;}

/* Die Fussleiste: 76 px aussen, 46 px zwischen ihren Zeilen. */
.fuss-ruf{padding:76px 0 46px;}
.fuss-abo{padding:46px 0;}
.fuss-zeile{padding:32px 0 76px;}
@media (max-width:760px){
  .kopf + section{padding-top:84px;}
  .fuss-ruf{padding:52px 0 32px;}
  .fuss-abo{padding:32px 0;}
  .fuss-zeile{padding:24px 0 52px;}
}

/* Das Laufband steht frei zwischen zwei Abschnitten; es bekommt dieselbe
   Luft wie ein Abschnitt, damit oben und unten 92 px stehen. */
.laufband{margin:46px 0;}

/* Jede Seite haelt unten denselben Abstand zur Fussleiste. */
body > section:last-of-type{padding-bottom:90px;}

/* Der Abstand zwischen den Partnerbloecken bleibt so gross wie der zwischen
   Steering Committee und Members -- durch das getoente Feld sind das 148 px. */
.partnerkopf{margin-top:148px;}

/* ---- Die Fussleiste ohne Linien --------------------------------------
   Nach dem Vorbild von make.com: oben der Ruf, darunter in einer Zeile links
   die Anmeldung und rechts die Rechtszeile. Keine Trennlinien mehr -- die
   Gliederung traegt der Raum. */
footer{border-top:0;}
.fuss-ruf{padding:76px 0 56px;border-top:0;}
.fuss-unten{display:flex;justify-content:space-between;align-items:flex-end;
  gap:56px;padding-bottom:76px;}
.fuss-abo{padding:0;border-top:0;flex:1 1 auto;max-width:640px;}
.fuss-zeile{display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  padding:0;border-top:0;flex:0 0 auto;text-align:right;}

/* Nur der Hero haelt den grossen Abstand zum Menue. Jede Inhaltsseite
   beginnt so dicht darunter wie *What is ICCA*. */
.kopf + section{padding-top:46px;}
section.hero{padding-top:150px;}

@media (max-width:760px){
  .kopf + section{padding-top:46px;}
  section.hero{padding-top:84px;}
  .fuss-ruf{padding:52px 0 36px;}
  .fuss-unten{flex-direction:column;align-items:flex-start;gap:36px;padding-bottom:52px;}
  .fuss-abo{max-width:none;}
  .fuss-zeile{align-items:flex-start;text-align:left;}
}

/* Die Fussleiste bekommt ihre Trennlinie zurueck -- dieselbe Haarlinie, die
   auch den Kopf vom Inhalt trennt. Innerhalb der Fussleiste bleibt es
   linienlos. */
footer{border-top:1px solid var(--linie);}

/* Der Satz unter dem Namen steht in der Groesse eines Kartentitels --
   dieselbe Stufe wie die Ueberschrift einer Publikation. */
h1.hero-titel{font-size:20px;line-height:1.3;}

/* ---- Get in touch: rechts die Karte des Ansprechpartners --------------
   Zwei Spalten, Text links, Karte rechts oben. Unter 820 px steht die Karte
   unter dem Text. */
.kontaktzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:56px;align-items:start;}
.kontaktzeile > .mensch{align-self:start;margin-top:22px;}
@media (max-width:820px){
  .kontaktzeile{grid-template-columns:minmax(0,1fr);gap:32px;}
  .kontaktzeile > .mensch{max-width:400px;}
}

/* =========================================================================
   Was diese Seite von Vorschlag 1 unterscheidet
   -------------------------------------------------------------------------
   1. Der Listeneintrag ist kein Strich mehr, sondern ein Kasten -- so wie die
      Personenkarte. Publikationen, Nachrichten und Veranstaltungen sehen
      damit aus wie die Members.
   2. Jeder Kasten traegt eine Umrandung, die in Ruhe nichts zeigt und beim
      Zeigen zur Tinte wird. Das ist die Bewegung aus Vorschlag 2, hier auf
      die Kaesten von Vorschlag 1 gelegt.
   ========================================================================= */

.liste > a{background:var(--block);border-radius:var(--rad);padding:24px;
  border:1px solid transparent;border-top:1px solid transparent;
  transition:border-color .2s;}
.liste > a::before{content:none;}
.band .liste > a{background:var(--papier);}

.kasten,.mensch,.liste > a,.karte{border:1px solid transparent;
  transition:border-color .2s;}
.mensch:hover,.liste > a:hover,.kasten.klickbar:hover{border-color:var(--tinte);}

/* Der Titel unterstreicht weiterhin -- beides zusammen, nicht eines statt
   des anderen. */
.liste > a:hover .kartentitel,.mensch:hover .name{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}

/* Fusszeile: Impressum und Cookie-Einstellungen nebeneinander (13.10.2026). */
.fuss-zeile .fuss-links{display:flex;flex-wrap:wrap;gap:8px 24px;}