/* ==================================================================
   LUSTVIERTEL — ULM / INHALTSBLOECKE
   Laedt NACH ulm.css. Was dort die Grundhaltung ist — Raster,
   Haarlinie, Flucht links, eine Grotesk, Farbe als Flaeche — wird
   hier auf die einzelnen Bauteile durchgezogen.

   ulm.css hat aufgeraeumt, aber nicht neu gebaut: die Bloecke sind
   dort noch Karten mit Rahmen ringsum, weil das der schnellste Weg
   war, den warmen Zeitschriftenlook stillzulegen. Eine Karte mit
   Rahmen auf allen vier Seiten ist aber schon wieder ein Objekt,
   das im Raum schwebt. Ulm kennt kein Objekt: es kennt Spalten,
   und zwischen den Spalten steht eine Linie.

   Deshalb hier durchgehend dasselbe Prinzip:

     Kein Rahmen ringsum. Nur die eine Linie, die zwei Dinge
     wirklich trennt. Oben 2 px schwarz als Anfang des Blocks,
     dazwischen 1 px Haarlinie.

     Kein Kasten-Innenabstand links. Die erste Spalte flieht mit
     dem Satzspiegel, sonst haengt der Text 22 px neben dem Raster
     und die ganze Flucht ist futsch.

     Zahlen und Etiketten tragen die Struktur, nicht Rahmen.

     Gold und Schwarz liegen als Flaeche unter oder hinter dem
     Text. Nie als Rand, nie als Schimmer.

   Spezifitaet: die Vorgaengerdateien (casa.css, dia.css,
   editorial.css, franja.css) schreiben fast alles mit !important
   und mit langen Selektoren wie `.cl-edit p.cl-ed-p em`. Gegen
   0,2,3 hilft spaeteres Laden allein nicht — nur gleiche oder
   hoehere Spezifitaet. Darum stehen hier bewusst die langen
   Selektoren; das ist kein Zufall und keine Schlamperei.
   ================================================================== */


/* ==================================================================
   1 — FEAT: die drei aus der kurzen Liste
   Drei Karten nebeneinander sind drei Objekte. Drei Spalten mit
   einer Haarlinie dazwischen sind EINE Tabelle. Das Zweite ist die
   Ulmer Lesart: der Vergleich entsteht durch das Raster, nicht
   durch drei gleich grosse Kaesten.
   ================================================================== */
.feat-sec .feat-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.feat-sec .feat-head .feat-sub{margin-bottom:0}

.grid.feat-grid{
  gap:0 !important;                       /* die Rinne macht die Linie, nicht der Abstand */
  border-top:2px solid var(--sw);         /* Anfang der Tabelle */
  border-bottom:1px solid var(--hair-2);  /* Ende, leichter — es folgt Text */
}

/* Rahmen weg, Grundflaeche weg. Was bleibt, ist die Spalte. */
.grid.feat-grid > .feat-card,
.grid.feat-grid > .feat-card:hover{
  background:none !important;
  border:0 !important;
  padding:clamp(20px,2.2vw,28px) 0 clamp(24px,2.6vw,32px) !important;
  display:flex;flex-direction:column;gap:14px;
  min-width:0;
}

@media(min-width:760px){
  /* Nur senkrechte Haarlinien, und nur ZWISCHEN den Spalten.
     Die aeussersten Kanten bleiben offen, damit die erste Spalte
     mit dem Satzspiegel fluchtet und die letzte nicht wie
     abgeschnitten wirkt. */
  .grid.feat-grid > .feat-card + .feat-card{
    border-left:1px solid var(--hair-2) !important;
    padding-left:clamp(16px,1.8vw,26px) !important;
    padding-right:clamp(16px,1.8vw,26px) !important;
  }
  .grid.feat-grid > .feat-card:last-child{padding-right:0 !important}
}
@media(max-width:759px){
  /* Einspaltig kippt die senkrechte Linie in die Waagerechte.
     Dieselbe Trennung, nur um 90 Grad gedreht. */
  .grid.feat-grid > .feat-card + .feat-card{
    border-top:1px solid var(--hair-2) !important;
  }
}

/* Der Kopf der Spalte: Quadrat, Name, Etikett. Ein festes Raster,
   damit die drei Spalten auf derselben Grundlinie starten — bei
   Flexbox rutscht das Etikett je nach Namenlaenge weg. */
.feat-card .feat-top{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr);
  column-gap:14px;row-gap:10px;
  align-items:start;
}
/* Aus dem Verlaufskreis wird ein hartes schwarzes Quadrat mit dem
   Buchstaben in Anton. Der Kreis mit Farbverlauf war das letzte
   Stueck App-Sprache auf der Seite. */
.feat-card .avatar{
  grid-column:1;grid-row:1;
  width:54px;height:54px;
  background:var(--sw) !important;
  color:var(--pap) !important;
  font-family:var(--disp) !important;
  font-weight:400 !important;
  font-size:1.9rem !important;
  line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s linear;
}
.feat-card:hover .avatar{background:var(--rt) !important}

.feat-card .feat-id{grid-column:2;grid-row:1;min-width:0}
.feat-card .feat-id .rank-pill{display:block;margin:0 0 5px}
.feat-card .feat-id h3{
  margin:0;
  font-size:1.22rem !important;
  line-height:1.12;
  white-space:normal !important;
  overflow-wrap:anywhere;
}
/* Das Etikett bekommt eine eigene Zeile, links buendig unter dem
   Namen. Rechts angeschlagen waere es wieder Mittelachse durch die
   Hintertuer. */
.feat-card .badge{grid-column:2;grid-row:2;justify-self:start}

.feat-card .feat-blurb{max-width:40ch;font-size:.98rem !important}
.feat-card .go{margin-top:auto;align-self:flex-start}
.feat-card:hover .go{color:var(--rt) !important}


/* ==================================================================
   2 — CAT: die vier Strassen
   Foto und Beschriftung, sonst nichts. Kein Rahmen, kein Anheben
   beim Ueberfahren: eine Kachel, die sich beim Zeigen bewegt, tut
   so, als waere sie ein Knopf. Sie ist ein Schild.
   ================================================================== */
#categorias .grid{gap:var(--sp) !important}

.cat-card,
.cat-card:hover{
  background:none !important;
  border:0 !important;
  padding:0 !important;
  display:block;
  transition:none !important;
}

.cat-thumb{
  height:auto !important;
  aspect-ratio:1/1;               /* Quadrat. Die Kachel ist ein Schild, kein Banner. */
  transition:none !important;
  transform:none !important;
}
.cat-card:hover .cat-thumb{transform:none !important}
/* Der Verlauf ueber dem Foto war da, um weisse Schrift lesbar zu
   machen. Die Schrift steht jetzt im Balken darunter — der Schleier
   hat keine Funktion mehr und faellt weg. */
.cat-thumb::after{display:none !important}

/* Der schwarze Beschriftungsbalken. Flaeche, kein Rand. */
.cat-card .cat-body{
  background:var(--sw) !important;
  padding:15px 18px 19px !important;
  transition:background .12s linear;
}
.cat-card .cat-body h3{
  margin:0 0 .45rem !important;
  font-family:var(--grot) !important;
  font-weight:700 !important;
  font-size:1.02rem !important;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--pap) !important;
}
.cat-card .cat-body p{
  margin:0 !important;
  font-size:.9rem !important;
  line-height:1.5;
  max-width:44ch;
  color:#b6b2a9 !important;   /* Papierton auf Schwarz, nicht Weiss: sonst flimmert es */
}
/* Beim Ueberfahren kippt der Balken auf Gold. Flaeche gegen Flaeche,
   keine Bewegung. */
.cat-card:hover .cat-body{background:var(--gd) !important}
.cat-card:hover .cat-body h3{color:var(--sw) !important}
.cat-card:hover .cat-body p{color:var(--sw-2) !important}


/* ==================================================================
   3 — EDIT: der redaktionelle Block
   Vorher: cremefarbene Karte mit Fahnenstreifen oben, Schatten
   drunter, mittig im Bild. Das ist eine Seite in einer Zeitschrift.
   Jetzt: zwei ungleiche Spalten auf einer schwarzen Linie, ohne
   Flaeche dahinter. Der Block gehoert zur Seite, er liegt nicht
   darauf.
   ================================================================== */
.cl-edit{
  border-top:0 !important;                /* die 2px-Linie im Inneren ist der Anfang */
  padding:0 var(--sp) !important;
  margin-block:clamp(2.6rem,6vw,5rem) !important;
}

.cl-edit .cl-ed-in{
  /* Genau auf dem Satzspiegel von .wrap: maxw minus zweimal Rinne.
     Sonst steht das Editorial 6-8 px neben allem anderen, und genau
     das sieht man bei einem sichtbaren Raster sofort. */
  max-width:calc(var(--maxw) - var(--sp)*2) !important;
  margin-inline:auto !important;
  background:none !important;
  border:0 !important;
  border-top:2px solid var(--sw) !important;
  padding:clamp(1.5rem,3vw,2.4rem) 0 0 !important;
  /* Asymmetrie: 7 zu 5. Zwei gleiche Haelften waeren wieder eine
     Mittelachse, nur mit anderen Mitteln. */
  grid-template-columns:minmax(0,7fr) minmax(0,5fr) !important;
  gap:clamp(1.4rem,3.4vw,3rem) !important;
  align-items:start !important;
}
/* Der Fahnenstreifen ueber der Karte gehoert zur Karte. Karte weg,
   Streifen weg. */
.cl-edit .cl-ed-in::before{display:none !important}
.cl-edit--volteo .cl-ed-in{
  grid-template-columns:minmax(0,5fr) minmax(0,7fr) !important;
}

.cl-edit p.cl-ed-ojo{
  margin:0 0 1rem !important;
  padding:0 0 .5rem !important;
  border-bottom:1px solid var(--hair-2);
  display:block;
  font-family:var(--grot) !important;
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:var(--sw) !important;
}

.cl-edit h2.cl-ed-h{
  margin:0 0 1.1rem !important;
  font-family:var(--disp) !important;
  font-size:clamp(1.9rem,3.3vw,3rem) !important;
  line-height:.94 !important;
  letter-spacing:-.012em;
  text-transform:uppercase;
  color:var(--sw) !important;
}
/* Das hervorgehobene Stueck war eine Kursivserife in Rot — zwei
   Fehler auf einmal. Jetzt liegt Gold als Flaeche HINTER den
   Woertern: Fahnenfarbe als Flaeche, Schrift bleibt schwarz. */
.cl-edit h2.cl-ed-h em{
  font-family:var(--disp) !important;
  font-style:normal !important;
  font-weight:400 !important;
  text-transform:uppercase;
  color:var(--sw) !important;
  background:var(--gd);
  padding:0 .1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

.cl-edit p.cl-ed-p{
  margin:0 0 .95rem !important;
  max-width:54ch !important;
  font-family:var(--grot) !important;
  font-size:1rem !important;
  line-height:1.6 !important;
  color:var(--sw-2) !important;
}
/* Kursivserife im Fliesstext: kommt aus editorial.css mit 0,2,3 und
   ueberlebt die Sammelregel in ulm.css. Hier explizit erledigt. */
.cl-edit p.cl-ed-p em{
  font-family:var(--grot) !important;
  font-style:normal !important;
  font-size:1em !important;
  font-weight:650 !important;
  color:var(--sw) !important;
}
.cl-edit p.cl-ed-p a{
  color:var(--sw) !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--rt);
}
.cl-edit p.cl-ed-p a:hover{color:var(--rt) !important}

/* Aus dem roten Knopf wird wieder eine Zeile mit rotem Unterstrich —
   dieselbe Form wie jeder andere Weiterverweis auf der Seite. */
.cl-edit a.cl-ed-link{
  display:inline-block;
  margin-top:1.5rem;
  background:none !important;
  color:var(--sw) !important;
  padding:0 0 2px !important;
  border-bottom:2px solid var(--rt) !important;
  font-family:var(--grot) !important;
  font-weight:700 !important;
  font-size:.8rem !important;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.cl-edit a.cl-ed-link:hover{
  background:none !important;
  color:var(--rt) !important;
  transform:none !important;
}
.cl-edit .cl-ed-flecha{margin-left:.5em}

/* Bild hart beschnitten, ohne Rand, ohne versetzte Farbschatten.
   Bewusst OHNE !important bei aspect-ratio: eine Abbildung traegt
   16/9 im style-Attribut, und das soll gelten. */
.cl-edit .cl-ed-fig{margin:0}
.cl-edit img.cl-ed-img{
  display:block;width:100%;height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
}
.cl-edit figcaption.cl-ed-pie{
  margin:0 !important;
  padding:9px 0 0 !important;
  border-left:0 !important;
  border-top:1px solid var(--sw);
  max-width:42ch;
  font-family:var(--grot) !important;
  font-size:.7rem !important;
  line-height:1.45;
  letter-spacing:.01em;
  color:var(--sw-2) !important;
}
.cl-edit figcaption.cl-ed-pie b{color:var(--sw) !important;font-weight:700}

@media(max-width:900px){
  /* Einspaltig: Bild zuerst, Text darunter (die Reihenfolge steht
     schon in editorial.css) — und das Verhaeltnis flacher, weil ein
     3/4-Bild ueber die volle Breite den Text vom Schirm schiebt. */
  .cl-edit .cl-ed-in,
  .cl-edit--volteo .cl-ed-in{grid-template-columns:minmax(0,1fr) !important}
  .cl-edit img.cl-ed-img{aspect-ratio:4/3;max-height:none}
  .cl-edit p.cl-ed-p{max-width:64ch !important}
  .cl-edit a.cl-ed-link{width:auto !important;justify-content:flex-start !important}
}


/* ==================================================================
   4 — FRANJA: die Vollbild-Baender
   Vollbild bleibt. Der Text nicht: der schwebte ueber dem Foto mit
   Schlagschatten und Verlaufsschleier, damit er lesbar wird. Ein
   Schleier ist ein Weichzeichner mit anderem Namen. Ulm loest das
   anders: der Text steht in einer gesetzten schwarzen Flaeche, die
   an der linken Kante ansetzt. Lesbarkeit durch Flaeche, nicht
   durch Weichzeichnen.
   ================================================================== */
.cl-franja{border-top:0 !important;align-items:flex-end !important}

/* Der Verlauf am unteren Rand hat keine Aufgabe mehr. */
.cl-franja[data-txt="1"] .cl-fr-foto::after{display:none !important}
/* Fahnenkante nur oben. Unten liefe sie quer durch die schwarze
   Textflaeche. */
.cl-franja::after{display:none !important}
.cl-franja::before{height:6px}

.cl-franja .cl-fr-txt{
  /* Bewusst an der Bildkante angeschlagen, nicht am Satzspiegel:
     ein Plakat setzt den Titel an die Kante des Bogens. Der Abstand
     zur Schrift entsteht innen, im Kasten. */
  width:auto !important;
  max-width:min(760px,90vw) !important;
  margin:0 auto 0 0 !important;
  background:var(--sw);
  padding:clamp(20px,2.6vw,30px) clamp(26px,3.6vw,46px)
          clamp(24px,3vw,34px) clamp(22px,4vw,54px) !important;
}
.cl-franja .cl-fr-txt p.cl-fr-ojo{
  margin:0 0 .9rem !important;
  padding:0 0 .55rem !important;
  border-bottom:1px solid rgba(244,242,237,.28);
  display:block;max-width:26ch;
  font-family:var(--grot) !important;
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  color:var(--gd) !important;    /* Gold als Etikett auf Schwarz, nicht als Flaeche daneben */
}
/* franja.css setzt hier Cormorant kursiv, und ulm.css hat genau
   diesen Selektor in seiner Sammelliste NICHT — die Baender waren
   deshalb der letzte Ort mit Kursivserife auf der ganzen Seite. */
.cl-franja p.cl-fr-frase{
  margin:0 !important;
  font-family:var(--disp) !important;
  font-style:normal !important;
  font-weight:400 !important;
  text-transform:uppercase;
  font-size:clamp(1.7rem,4.2vw,3.3rem) !important;
  line-height:.94 !important;
  letter-spacing:-.012em;
  color:var(--pap) !important;
  max-width:18ch !important;
}
.cl-franja p.cl-fr-frase em{
  font-family:var(--disp) !important;
  font-style:normal !important;
  font-weight:400 !important;
  color:var(--gd) !important;
}

/* Die Plakette: kleines Goldschild mit schwarzer Schrift. Vorher
   rot mit Schatten — Rot ist Signal und wird hier nicht fuer eine
   Ortsangabe verbraucht. */
.cl-fr-placa{
  background:var(--gd) !important;
  color:var(--sw) !important;
  border:0 !important;
  font-family:var(--grot) !important;
  font-weight:700 !important;
  font-size:.62rem !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  padding:7px 13px !important;
}

@media(max-width:640px){
  .cl-franja .cl-fr-txt{max-width:100% !important}
  .cl-franja p.cl-fr-frase{max-width:15ch !important}
}


/* ==================================================================
   5 — ESC: die vier Naechte
   Der Block, der am wenigsten umgebaut werden muss, weil er schon
   Zeile statt Karte ist. Was fehlte: eine feste Ziffernspalte. Wenn
   die Ziffer mitwandert, ist sie Schmuck; wenn sie in einer Spalte
   steht, ist sie Struktur.

   Die Nummerierung 01-04 kommt aus einem CSS-Zaehler. Im HTML steht
   "1", "2" ... — das bleibt unangetastet, die Ziffer wird nur auf
   Schriftgroesse 0 gesetzt und im ::before neu gesetzt. Sie ist
   ohnehin aria-hidden, es geht also nichts fuer Screenreader
   verloren.
   ================================================================== */
.cl-esc{
  counter-reset:esc;
  border-top:0 !important;
  border-bottom:2px solid var(--sw);
  margin-top:clamp(1.6rem,3vw,2.4rem);
}
.cl-esc .cl-esc-row{
  counter-increment:esc;
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  column-gap:var(--sp);
  align-items:start;
  border-top:1px solid var(--hair-2) !important;
  border-bottom:0 !important;
  padding:clamp(24px,3vw,38px) 0 clamp(28px,3.4vw,44px) !important;
}
.cl-esc .cl-esc-row:first-child{border-top:2px solid var(--sw) !important}

.cl-esc .cl-esc-n{
  font-size:0 !important;
  line-height:0 !important;
  padding:0 !important;
}
.cl-esc .cl-esc-n::before{
  content:counter(esc,decimal-leading-zero);
  display:block;
  font-family:var(--disp);
  font-size:clamp(2.6rem,4.6vw,4.2rem);
  line-height:.8;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  color:var(--sw);
}

/* Schmales Mass: 64ch war Fliesstext einer Zeitschrift, hier zaehlt
   die Kolumne neben der Ziffer. */
.cl-esc .cl-esc-row > div{max-width:58ch}
.cl-esc .cl-esc-q{
  margin:0 0 .85rem !important;
  font-family:var(--disp) !important;
  font-size:clamp(1.35rem,2.4vw,2.1rem) !important;
  line-height:1 !important;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--sw) !important;
}
.cl-esc .cl-esc-row p{
  margin:0 0 .8rem !important;
  font-size:1rem !important;
  line-height:1.6;
  max-width:58ch;
}
/* .yesi war Schreibschrift. Die Frage bleibt die Frage — sie wird
   jetzt mit Gold unterlegt statt mit einer zweiten Schriftfamilie
   markiert. Eine Familie, das war die Abmachung. */
.cl-esc .cl-esc-row .yesi{
  font-family:var(--grot) !important;
  font-style:normal !important;
  font-size:1em !important;
  font-weight:700 !important;
  line-height:inherit !important;
  color:var(--sw) !important;
  background:var(--gd);
  padding:1px .18em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.cl-esc .cl-esc-go{margin-top:.35rem}

@media(max-width:640px){
  /* Unter 640 bleibt fuer Ziffernspalte plus Kolumne kein
     brauchbares Mass uebrig: die Ziffer stellt sich ueber die
     Zeile. Struktur bleibt lesbar, nur gestapelt. */
  .cl-esc .cl-esc-row{
    grid-template-columns:minmax(0,1fr);
    row-gap:8px;
    padding:24px 0 28px !important;
  }
  .cl-esc .cl-esc-n::before{font-size:2.4rem}
  .cl-esc .cl-esc-q{font-size:clamp(1.25rem,5.6vw,1.7rem) !important}
}


/* ==================================================================
   6 — CITA: das herausgestellte Zitat
   Vorher: Kursivserife in Creme ueber einem abgedunkelten Foto.
   Das ist ein Werbemotiv. Ein Zitat ist eine Aussage: gross,
   kondensiert, versal, auf Papier, mit einer Linie darueber und
   einer kleinen Zeile fuer den, der es gesagt hat. Das Foto bleibt
   erhalten, wandert aber neben den Satz statt darunter — es
   illustriert, es traegt nicht.
   ================================================================== */
.cl-cita{
  border-top:0 !important;
  padding:0 var(--sp) !important;
  margin-block:clamp(2.6rem,6vw,4.6rem) !important;
}
.cl-cita .cl-cita-in{
  max-width:calc(var(--maxw) - var(--sp)*2) !important;
  margin-inline:auto !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,30%);
  column-gap:clamp(1.4rem,3vw,2.8rem);
  align-items:stretch;
  overflow:visible !important;
  border-top:2px solid var(--sw);
  border-bottom:1px solid var(--hair-2);
  isolation:auto;
}
/* Der dunkle Schleier ueber dem Foto war nur da, damit die weisse
   Schrift darauf steht. Die Schrift steht jetzt daneben. */
.cl-cita .cl-cita-in::after{display:none !important}

.cl-cita img.cl-cita-img{
  order:2;
  width:100%;height:100%;
  min-height:clamp(200px,22vw,320px);
  aspect-ratio:auto;
  object-fit:cover;
  align-self:stretch;
}
.cl-cita .cl-cita-txt{
  order:1;
  position:static !important;
  inset:auto !important;
  max-width:none !important;
  justify-content:flex-start !important;
  padding:clamp(1.5rem,3vw,2.4rem) 0 clamp(1.8rem,3vw,2.8rem) !important;
}
.cl-cita blockquote.cl-cita-frase{
  margin:0 !important;padding:0 !important;border:0 !important;
  font-family:var(--disp) !important;
  font-style:normal !important;
  font-weight:400 !important;
  text-transform:uppercase;
  font-size:clamp(1.55rem,3.2vw,2.9rem) !important;
  line-height:.96 !important;
  letter-spacing:-.014em;
  color:var(--sw) !important;
  max-width:21ch;
}
.cl-cita blockquote.cl-cita-frase em,
.cl-cita blockquote.cl-cita-frase strong{
  font-family:var(--disp) !important;
  font-style:normal !important;
  font-weight:400 !important;
  color:var(--sw) !important;
  background:var(--gd);
  padding:0 .08em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* Die Zuschreibung ist klein und haengt an einer eigenen kurzen
   Linie — sie soll nicht mit dem Satz konkurrieren. */
.cl-cita p.cl-cita-quien{
  display:inline-block;
  margin:1.5rem 0 0 !important;
  padding:.55rem 0 0 !important;
  border-top:1px solid var(--sw);
  font-family:var(--grot) !important;
  font-size:.66rem !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  color:var(--sw) !important;
}

@media(max-width:820px){
  /* Einspaltig zuerst das Bild, dann der Satz: die Aussage soll den
     Abschnitt schliessen, nicht in der Mitte haengen. */
  .cl-cita .cl-cita-in{grid-template-columns:minmax(0,1fr);row-gap:0}
  .cl-cita img.cl-cita-img{
    order:1;height:auto;min-height:0;aspect-ratio:16/9;
  }
  .cl-cita .cl-cita-txt{order:2;padding-top:clamp(1.2rem,4vw,1.8rem) !important}
  .cl-cita blockquote.cl-cita-frase{max-width:24ch}
}


/* ==================================================================
   7 — FAQ
   Zwei Bauformen im Haus: auf der Startseite <details> mit
   .faq-item, auf den Testseiten schlichte <div> mit h3 und p. Beide
   bekommen dieselbe Struktur: Zeilen auf Haarlinien, 2 px oben und
   unten als Klammer.

   Das Pluszeichen war ein Kreis mit einem Zeichen darin, das sich
   beim Oeffnen um 45 Grad dreht. Ein Kreis ist hier nicht zulaessig,
   und ein gedrehtes Plus ist ein Kreuz, kein Minus. Also: echtes
   Plus, das beim Oeffnen zu einem echten Minus wird. Das Zeichen im
   HTML bleibt stehen und wird nur ausgeblendet.
   ================================================================== */
.faq{border-top:0 !important}
.faq h2{margin-bottom:clamp(1.4rem,3vw,2rem)}

.faq .faq-item,
.faq .faq-item:hover{
  background:none !important;
  border:0 !important;
  border-top:1px solid var(--hair-2) !important;
  padding:0 !important;
}
.faq .faq-item:first-of-type{border-top:2px solid var(--sw) !important}
.faq .faq-item:last-of-type{border-bottom:2px solid var(--sw) !important}

.faq .faq-item summary{
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:var(--sp) !important;
  padding:19px 0 !important;
  font-family:var(--grot) !important;
  font-weight:700 !important;
  font-size:1.02rem !important;
  letter-spacing:-.006em;
  line-height:1.35;
  color:var(--sw) !important;
  cursor:pointer;
  transition:color .12s linear !important;
}
.faq .faq-item summary:hover{color:var(--rt) !important}

.faq .faq-item .faq-ic{
  width:auto !important;height:auto !important;
  flex:0 0 auto;
  border:0 !important;
  background:none !important;
  transform:none !important;
  font-size:0 !important;
  color:var(--sw) !important;
}
.faq .faq-item .faq-ic::after{
  content:"+";
  display:block;
  font-family:var(--grot);
  font-size:1.45rem;font-weight:400;line-height:1;
}
.faq .faq-item[open] .faq-ic{transform:none !important;background:none !important}
.faq .faq-item[open] .faq-ic::after{content:"\2013"}  /* Halbgeviert, kein Bindestrich */

.faq .faq-item p{
  margin:0 0 22px !important;
  max-width:62ch;
  font-size:1rem !important;
  line-height:1.6;
  color:var(--sw-2) !important;
}

/* Testseiten: <div> statt <details>. Gleiche Klammer, gleiche
   Haarlinien, nur ohne Klappmechanik. */
.faq > div{
  border-top:1px solid var(--hair-2);
  padding:22px 0 24px;
}
.faq > div:first-of-type{border-top:2px solid var(--sw)}
.faq > div:last-of-type{border-bottom:2px solid var(--sw)}
.faq > div h3{
  margin:0 0 .55rem !important;
  font-size:1.02rem !important;
  color:var(--sw) !important;
}
.faq > div p{margin:0 !important;max-width:62ch}


/* ==================================================================
   8 — TABELLEN
   Der Ort, an dem Ulm am wenigsten erfunden werden muss: Zahlen
   untereinander, Haarlinien, gesperrte Versalien im Kopf. Was raus
   muss: der farbige Kopfbalken, die Zebrastreifen und der versetzte
   Rahmen um den Rahmen. Zebrastreifen sind eine Kruecke fuer zu
   enge Zeilen — die Loesung heisst Zeilenabstand, nicht Farbe.
   ================================================================== */
.cl-tabla-wrap{
  border:0 !important;
  margin:clamp(1.8rem,4vw,2.6rem) 0 1rem !important;
  overflow-x:auto;
}
.cl-tabla{
  border-collapse:collapse;
  font-family:var(--grot) !important;
  font-size:.95rem !important;
  font-variant-numeric:tabular-nums;   /* Ziffern stehen in Spalten, nicht in Woertern */
}
.cl-tabla th,.cl-tabla td{
  text-align:left;vertical-align:top;
  padding:14px 26px 14px 0 !important;
  border:0 !important;
  border-bottom:1px solid var(--hair) !important;
  line-height:1.5;
  color:var(--sw-2) !important;
}
.cl-tabla th:last-child,.cl-tabla td:last-child{padding-right:0 !important}

.cl-tabla thead th{
  background:none !important;
  color:var(--sw) !important;
  font-family:var(--grot) !important;
  font-weight:700 !important;
  font-size:.64rem !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  padding-bottom:10px !important;
  border-bottom:2px solid var(--sw) !important;
}
.cl-tabla tbody th{
  color:var(--sw) !important;
  font-family:var(--grot) !important;
  font-weight:700 !important;
  font-size:.95rem !important;
  text-transform:none;
  letter-spacing:-.006em;
}
.cl-tabla tbody tr:nth-child(even){background:none !important}
.cl-tabla tbody tr:hover{background:var(--pap-2) !important}
.cl-tabla .cl-plata{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:var(--sw) !important;
  white-space:nowrap;
}
.cl-tabla tfoot th,.cl-tabla tfoot td{
  background:none !important;
  border-top:2px solid var(--sw) !important;
  border-bottom:0 !important;
  color:var(--sw) !important;
  font-weight:700 !important;
}

@media(max-width:760px){
  /* Die Kartenansicht bleibt — sie ist die richtige Antwort auf ein
     Telefon. Nur wird aus jeder Karte eine Zeile mit Haarlinie statt
     einer Box mit dickem Rand und Schlagschatten. Das Roetel aus
     data-th bleibt, es traegt hier die Spaltenordnung. */
  .cl-tabla tbody tr,.cl-tabla tfoot tr{
    margin:0 !important;padding:20px 0 !important;
    border:0 !important;
    border-top:1px solid var(--hair-2) !important;
    background:none !important;
  }
  .cl-tabla tbody tr:first-child,
  .cl-tabla tfoot tr{border-top:2px solid var(--sw) !important}
  .cl-tabla tbody th,.cl-tabla tfoot th{
    background:none !important;
    color:var(--sw) !important;
    font-family:var(--grot) !important;
    font-weight:700 !important;
    font-size:1.05rem !important;
    line-height:1.3;
    letter-spacing:-.006em;
    text-transform:none !important;
    padding:0 0 12px !important;
    border:0 !important;
  }
  .cl-tabla tbody td,.cl-tabla tfoot td{
    padding:0 0 14px !important;
    border:0 !important;
  }
  .cl-tabla tbody tr td:last-child,
  .cl-tabla tfoot tr td:last-child{padding-bottom:0 !important}
  .cl-tabla tbody td::before,.cl-tabla tfoot td::before{
    content:attr(data-th);
    display:block;margin-bottom:4px;
    font-family:var(--grot) !important;
    font-size:.6rem !important;
    font-weight:700 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase;
    color:var(--sw) !important;
  }
  /* Zellen ohne data-th bekommen kein leeres Roetel mit Abstand. */
  .cl-tabla tbody td:not([data-th])::before,
  .cl-tabla tfoot td:not([data-th])::before{display:none !important}
  .cl-tabla .cl-plata{text-align:left !important}
}


/* ==================================================================
   9 — MARQUEE
   Das Goldband steht schon in ulm.css. Zwei Nachbesserungen: der
   Stern zwischen den Namen ist ein Zierzeichen aus dem alten
   Entwurf — er wird zum Schraegstrich, dem neutralsten Trenner, den
   es gibt. Und die Haarlinie, die der Abschnitt danach von
   `section + section` erbt, faellt weg: unter einer 2px-Kante
   braucht es keine zweite Linie.
   ================================================================== */
.marquee-sec{margin-top:0 !important}
.marquee-sec + section{border-top:0 !important}
.mq-dot{
  font-size:0 !important;
  margin:0 20px !important;
}
.mq-dot::after{
  content:"/";
  font-family:var(--grot);
  font-size:1rem;font-weight:700;
  color:var(--sw) !important;
}
/* Das zweite Band (.ls-band) liegt auf Papier, nicht auf Gold —
   dort schliessen dieselben Kanten den Abschnitt ab. */
.ls-band{
  border-top:2px solid var(--sw) !important;
  border-bottom:2px solid var(--sw) !important;
  padding-block:14px !important;
}