/* UNITECHNICS-Marke – abgeleitet aus der Präsentationsvorlage.
 *
 * Quelle: Z:\public\40_Marketing_1\Präsentationsvorlage_UT_SÜD_GmbH
 *         20260409_Beispiel Standardpräsentation.pptx
 * Stand:  03.08.2026 (Datei vom 21.04.2026)
 *
 * Aus dem Farbschema der Vorlage: dk1 und accent1 sind beide #007A45 – das ist
 * DIE Hausfarbe. Bestätigt durch die Mailsignaturen, dort steht rgb(0,122,69)
 * für Links und rgb(1,123,70) für Text. In den Folien kommt zusätzlich #007E4A
 * vor, praktisch derselbe Ton.
 *
 * Schrift der Vorlage: Arial für Überschriften UND Text.
 *
 * DIESE DATEI GEHÖRT ALS LETZTE IN DEN <head>. Die Seiten setzen ihre Farben
 * in einem eigenen <style>-Block; nur wenn diese Datei danach kommt, gewinnen
 * die Markenwerte. Ohne sie laufen die Seiten weiter – nur in Blau.
 */

:root {
  /* Hausfarbe und ihre Abstufungen */
  --ut-gruen: #007A45;
  --ut-gruen-hell: #00A05B;
  --ut-gruen-dunkel: #005C34;
  /* Aus dem Farbschema der Vorlage: accent2 und dk2 */
  --ut-orange: #ED7D31;
  --ut-graublau: #44546A;

  /* Die Seiten benutzen diese Namen – hier werden sie auf die Marke gezogen. */
  --akzent: var(--ut-gruen);
  --bf: var(--ut-gruen);

  /* Diagrammserien: Hausfarbe für „Ist", Orange für „Ziel", Graublau für das
     Vorjahr. Drei klar unterscheidbare Töne, alle aus der Vorlage. */
  --s-ist: var(--ut-gruen);
  --s-ziel: var(--ut-orange);
  --s-vorjahr: var(--ut-graublau);

  --good: var(--ut-gruen);
  --good-text: var(--ut-gruen-dunkel);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    /* Im Dunkelmodus etwas heller, sonst verschwindet das Grün im Hintergrund
       und rutscht unter den Kontrastwert. */
    --ut-gruen: #12A163;
    --ut-gruen-dunkel: #0B8850;
    --akzent: var(--ut-gruen);
    --bf: var(--ut-gruen);
    --s-ist: var(--ut-gruen);
    --s-ziel: #E8823C;
    --s-vorjahr: #7D91AC;
    --good: var(--ut-gruen);
    --good-text: #2FBE7D;
  }
}
:root[data-theme="dark"] {
  --ut-gruen: #12A163;
  --ut-gruen-dunkel: #0B8850;
  --akzent: var(--ut-gruen);
  --bf: var(--ut-gruen);
  --s-ist: var(--ut-gruen);
  --s-ziel: #E8823C;
  --s-vorjahr: #7D91AC;
  --good: var(--ut-gruen);
  --good-text: #2FBE7D;
}

/* Arial wie in der Vorlage. Helvetica und system-ui als Rückfall, damit auf
   einem Mac oder Linux nichts bricht. */
body {
  font-family: Arial, Helvetica, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- Logo in der Kopfzeile ---------------------------------------------- */
.ut-logo {
  display: block;
  /* 52px, damit der dreizeilige Claim lesbar bleibt – bei 34px war die
     untere Zeile Grafik, kein Text mehr. */
  height: 52px;
  width: auto;
  max-width: 100%;
  margin-bottom: 10px;
}
/* Das Logo ist grün auf transparent. Im Dunkelmodus säuft es ab, deshalb
   ein heller Sockel darunter – das Logo selbst wird nicht umgefärbt, das
   verbietet jedes Corporate Design. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .ut-logo {
    background: #fff; padding: 5px 9px; border-radius: 7px;
  }
}
:root[data-theme="dark"] .ut-logo {
  background: #fff; padding: 5px 9px; border-radius: 7px;
}

/* --- Grüner Balken über der Seite, wie der Kopf der Foliensätze --------- */
body::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--ut-gruen) 0%, var(--ut-gruen-hell) 100%);
}

/* Überschriften in der Hausfarbe – in der Vorlage sind Titel grün. */
h1 { color: var(--ut-gruen-dunkel); }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) h1 { color: var(--ut-gruen); }
}
:root[data-theme="dark"] h1 { color: var(--ut-gruen); }

/* Primärknöpfe tragen die Hausfarbe; die Seiten setzen sie über --akzent,
   hier nur der Hover, damit er nicht ins Blaue kippt. */
button.primary:hover { filter: brightness(1.1); }

/* --- Kopfbereich der Startseite ----------------------------------------- */
/* Hintergrund ist die Titelfolie der Präsentation: grüner Verlauf mit
   Gitterwelle. Das Bild liegt als <img> darunter statt als background-image,
   damit es mitskaliert und der Browser es normal cachen kann. */
.ut-buehne {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--ut-gruen-dunkel);
  min-height: 168px;
  display: flex;
  align-items: flex-end;
}
.ut-buehne-bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center right;
}
.ut-buehne-inhalt { position: relative; padding: 22px 24px; }
.ut-buehne h1 { color: #fff; margin: 0; font-size: 27px; }
/* Der Titel in der Bühne bleibt weiß – auch im Dunkelmodus. Die Regel weiter
   oben färbt jedes h1 dort in die Hausfarbe, und Grün auf dem grünen Verlauf
   war nicht lesbar. Die beiden Selektoren müssen spezifischer sein als
   `:root[data-theme="dark"] h1`, sonst gewinnt die allgemeine Regel. */
:root[data-theme="dark"] .ut-buehne h1 { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .ut-buehne h1 { color: #fff; }
}
.ut-buehne-sub { color: rgba(255, 255, 255, 0.86); font-size: 13.5px; margin: 4px 0 0; }
/* Auf den Unterseiten wandern die vorhandenen Unterzeilen mit in die Bühne
   (siehe kopf.js). Sie tragen dort ihre eigenen Klassen – dunkelgrau auf Grün
   wäre nicht lesbar, deshalb hier mit umgestellt. */
.ut-buehne .sub, .ut-buehne .claim, .ut-buehne p {
  color: rgba(255, 255, 255, 0.86);
}
.ut-buehne .claim { display: block; font-size: 13.5px; margin-top: 4px; }
/* Die Überschriften der Unterseiten sind kleiner als der Titel der Startseite;
   in der Bühne bekommen sie denselben Auftritt. */
.ut-buehne h1 { letter-spacing: -0.01em; }
/* Die Wortmarke ist grün und würde auf dem Verlauf untergehen. Weiß gefiltert
   statt neu eingefärbt – die Form bleibt, nur die Helligkeit ändert sich. */
.ut-logo-hell {
  filter: brightness(0) invert(1);
  background: none !important; padding: 0 !important;
  height: 46px; margin-bottom: 12px;
}
@media (max-width: 620px) {
  .ut-buehne { min-height: 130px; }
  .ut-buehne h1 { font-size: 21px; }
  .ut-logo-hell { height: 34px; }
}

/* --- Das Anmeldefenster blitzt nicht mehr auf --------------------------- */
/* Es steht in jeder Seite fest im HTML und wurde erst weggeräumt, wenn der
   erste API-Aufruf durch war. Wer angemeldet ist, sah es deshalb kurz
   aufblitzen – ein Fenster, das nach einem Schlüssel fragt, den er längst nicht
   mehr braucht.
   Gelöst mit einer verzögerten Sichtbarkeit statt mit einer Klasse aus dem
   Skript: nach 600 ms erscheint das Fenster von selbst. Damit bleibt es auch
   dann sichtbar, wenn das Skript gar nicht durchläuft – eine leere Seite wäre
   der schlechtere Fehlerfall. Ist die Anmeldung vorher fertig, trägt das Fenster
   längst `.hidden` und bleibt weg. */
#gate { animation: ut-tor-zeigen 1ms 600ms both; }
@keyframes ut-tor-zeigen {
  from { visibility: hidden; }
  to { visibility: visible; }
}

/* --- Microsoft-Tür der Unterseiten (siehe static/sitzung.js) ------------- */
/* Der Knopf entsteht im Skript und muss auf jeder Unterseite gleich aussehen.
   Die Seiten setzen `button.primary` unterschiedlich (das Handbuch gar nicht),
   deshalb steht der Auftritt hier – bei der Marke. */
.ut-ms-tuer button {
  width: 100%;
  background: var(--ut-gruen); border-color: transparent; color: #fff;
  font-weight: 600;
}
.ut-ms-tuer button:hover { background: var(--ut-gruen); filter: brightness(1.1); }

/* --- Abwassertalk oben rechts in der Bühne (siehe static/podcast.js) ----- */
/* Eine helle Glasfläche auf dem Verlauf: eine weiße Karte würde den Kopf
   zerschneiden, blanker Text darauf wäre über den hellen Stellen des Kopfbilds
   nicht lesbar. Die Fläche liegt absolut in der Bühne – die Begrüßung links
   behält damit ihre Breite, egal wie viele Folgen daneben stehen.

   Dieselben Klassen tragen die Startseite (.db-buehne) und die Unterseiten
   (.ut-buehne); beide sind position:relative, deshalb genügt eine Regel. */
.ut-podcast {
  position: absolute;
  /* Über dem Abdunkler der Startseiten-Bühne (.db-buehne::after) und neben dem
     Inhalt (z-index 1) – aber weit unter Fenstern und dem HOME-Knopf. */
  z-index: 2;
  /* Oben UND unten derselbe Abstand: der Kasten spannt sich über die Höhe der
     Bühne, statt eine feste Höhe zu haben. Die Startseite ist höher als die
     Unterseiten (Begrüßung, Status, Suche) – mit einer festen Höhe blieb dort
     unten Luft übrig, und der Kasten hing im Kopf. */
  top: 14px; bottom: 14px; right: 16px;
  /* 400 px, damit die Folgentitel ganz hineinpassen: „#143 – Gewässerökologie –
     Zwischen Kanal und Gewässer" braucht rund 330 px. Bei 306 px endete fast
     jeder Titel in „…". Den Platz gibt die Suche links ab (siehe unten). */
  width: 400px; max-width: calc(100% - 32px);
  padding: 10px 11px;
  border-radius: 12px;
  background: rgba(0, 48, 27, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px; line-height: 1.35;
  display: flex; flex-direction: column;
}
/* Der Kasten liegt ÜBER der Bühne – also muss der Inhalt darunter Platz lassen.
   Ohne das verschwanden auf schmaleren Fenstern der letzte Statusknopf und das
   rechte Ende der Suche unter dem Kasten. Gesetzt wird die Klasse vom Skript,
   damit eine Bühne ohne Kasten ihre ganze Breite behält. */
.ut-hat-podcast .db-anrede,
.ut-hat-podcast .db-status,
.ut-hat-podcast .db-suchbereich,
.ut-hat-podcast .ut-buehne-inhalt { max-width: calc(100% - 416px); }

.ut-podcast a { color: #fff; text-decoration: none; }
.ut-podcast a:focus-visible { outline: 2px solid #fff; outline-offset: 2px;
  border-radius: 6px; }

/* Die Marke nimmt den freien Platz: was die Folgenliste unten nicht braucht,
   bekommt das Titelbild. */
.ut-podcast-marke { display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
  min-height: 0; }
/* Das Titelbild ist quadratisch (so liefert es der Feed) und wird nicht
   umgefärbt – es ist das Logo eines Podcasts, den UNITECHNICS nicht allein
   betreibt. Es wächst mit der Höhe der Bühne: `stretch` gibt ihm die Höhe der
   Zeile, das Seitenverhältnis die Breite.

   Die Grenzen sind beide nötig: ohne `max-height` würde es in einer hohen Bühne
   die halbe Breite des Kastens fressen, ohne `min-height` in einer flachen zur
   Briefmarke. */
.ut-podcast-bild {
  align-self: stretch; flex: none;
  width: auto; height: auto; aspect-ratio: 1 / 1;
  min-height: 38px; max-height: 152px;
  border-radius: 10px; display: block; object-fit: cover;
  background: rgba(255, 255, 255, 0.12);
}
.ut-podcast-marke-text { min-width: 0; }
.ut-podcast-name {
  display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.01em;
}
.ut-podcast-mehr { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.78); }
.ut-podcast-marke:hover .ut-podcast-mehr { color: #fff; text-decoration: underline; }

/* Die Liste teilt den freien Platz mit dem Titelbild: das Bild kann nicht
   beliebig wachsen (sonst frisst es die Breite), und die Zeilen verteilen sich
   dafür im Rest. Sonst stünde in der hohen Bühne der Startseite eine Lücke
   zwischen Bild und Liste. */
.ut-podcast-folgen {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: space-evenly;
  margin-top: 8px; padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ut-podcast-folge {
  display: flex; align-items: baseline; gap: 7px;
  padding: 3px 0; color: rgba(255, 255, 255, 0.92);
  flex: none;
}
/* Der Klappkasten um die Liste. Am Rechner ist er offen und die Zeile
   „3 letzte Folgen" unsichtbar – dort ist Platz für die Liste selbst. Auf dem
   Telefon ist er zu und die Zeile ist der Griff (siehe static/podcast.js). */
.ut-podcast-klapp { flex: 1 1 auto; display: flex; flex-direction: column; }
.ut-podcast-klapp-titel { display: none; }

.ut-podcast-folge:hover { color: #fff; }
.ut-podcast-folge:hover .ut-podcast-folge-titel { text-decoration: underline; }
.ut-podcast-nr {
  flex: none; font-size: 11px; font-weight: 700;
  color: rgba(255, 255, 255, 0.72); font-variant-numeric: tabular-nums;
}
/* Eine Zeile je Folge, Rest als „…". Zwei Zeilen wären lesbarer, aber die Bühne
   hat eine feste Höhe und schneidet ab (overflow: hidden) – der vollständige
   Titel steht im Tooltip. */
.ut-podcast-folge-titel {
  flex: 1; min-width: 0;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Schmalere Fenster: neben der Begrüßung ist kein Platz mehr für einen Kasten
   von 400 px, ohne dass beide Seiten gequetscht werden. Er rutscht deshalb unter
   den Inhalt und wird breit. Die Grenze liegt bei 1120 px – darunter bliebe für
   Begrüßung, Statuszeile und Suche weniger als die Hälfte des Kopfes. */
@media (max-width: 1120px) {
  .ut-hat-podcast .db-anrede,
  .ut-hat-podcast .db-status,
  .ut-hat-podcast .db-suchbereich,
  .ut-hat-podcast .ut-buehne-inhalt { max-width: none; }

  /* Beide Bühnen sind Flex-Kästen mit dem Inhalt unten (.db-buehne in
     dashboard.css, .ut-buehne oben). Ohne das Umbrechen stellt sich der Kasten
     NEBEN die Begrüßung und presst sie auf ein Drittel der Breite. */
  .db-buehne, .ut-buehne { flex-wrap: wrap; }
  .ut-podcast {
    /* relative und nicht static: der z-index muss weiter gelten, sonst legt
       sich der Abdunkler der Startseiten-Bühne über den Kasten. */
    position: relative; top: auto; right: auto; bottom: auto;
    width: auto; max-width: none;
    flex: 1 1 100%;          /* in der Flex-Bühne der Unterseiten: eigene Zeile */
    margin: 0 16px 16px;
  }
  /* Hier steht der Kasten im Fluss und hat keine vorgegebene Höhe – dann kann
     sich das Bild auch nicht daran ausrichten und braucht ein festes Maß. */
  .ut-podcast-bild {
    align-self: center;
    width: 52px; height: 52px; min-height: 0; max-height: none;
  }
}
@media print { .ut-podcast { display: none; } }

/* --- HOME-Knopf, fest über jeder Unterseite (siehe kopf.js) -------------- */
/* z-index 40: unter Fahrmodus (50), Tooltip (50) und Urlaubsfenster (80). Ein
   Knopf, der über einem geöffneten Fenster schwebt, sieht nach Fehler aus. */
.ut-home {
  position: fixed;
  z-index: 40;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--ut-gruen);
  color: #fff;
  font: 600 13.5px/1 Arial, Helvetica, system-ui, sans-serif;
  text-decoration: none;
  /* Der Schatten trägt die Erkennbarkeit: der Knopf liegt auf wechselndem
     Untergrund und braucht eine Kante, die nicht von der Seite kommt. */
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
  transition: transform 0.12s ease, background 0.12s ease;
}
.ut-home:hover, .ut-home:focus-visible { background: var(--ut-gruen-dunkel); transform: translateY(-1px); }
.ut-home:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Auf schmalen Geräten nur das Haus – der Knopf soll den Inhalt nicht zudecken. */
@media (max-width: 620px) {
  .ut-home { padding: 12px; gap: 0; }
  .ut-home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media print { .ut-home { display: none; } }

/* =========================================================================
   TELEFON IM HOCHFORMAT
   =========================================================================

   Gemessen auf 390 × 664 px: kaputt war nichts – kein Querscrollen, nichts ragt
   über den Rand. Das Problem war die Reihenfolge. Der Kopf der Startseite
   brauchte 564 px (85 % des ersten Displays), darunter kamen 179 px
   Navigationsknöpfe in vier Reihen, und die erste Kachel fing erst bei 835 px
   an: man musste über ein ganzes Display wischen, bevor Inhalt kam.

   Hier wird deshalb dreierlei getan, und ALLES nur unterhalb von 620 px – die
   Ansicht am Rechner bleibt Zeile für Zeile, wie sie war:

     1. Reihen, die umbrechen, werden zu EINER Reihe zum Wischen
        (Statuszeile, Navigationsknöpfe). Es verschwindet nichts.
     2. Der Abwassertalk-Kasten steht zugeklappt (siehe static/podcast.js).
     3. Tippziele werden 40 px hoch, Kleinstschrift kommt auf 12 px.

   Weggelassen wird nichts. Was auf dem Telefon nicht ins Bild passt, wird
   zugeklappt oder wischbar – nicht versteckt. Eine Kachel, die am Telefon
   fehlt, hält man für nicht vorhanden.
   ========================================================================= */
@media (max-width: 620px) {
  /* --- 1) Aus drei Reihen wird eine zum Wischen ------------------------- */
  /* Die Statuszeile („ich bin heute …") brauchte 110 px in drei Reihen. Als
     eine Reihe sind es 44 – und alle sechs Möglichkeiten bleiben erreichbar.
     ACHTUNG SPEZIFITÄT: in index.html steht dashboard.css NACH marke.css. Bei
     gleicher Spezifität gewinnt deshalb dashboard.css – die Regeln für .db-*
     brauchen hier einen Vorfahren davor, sonst bleiben sie wirkungslos.
     (Genau daran ist der erste Versuch gescheitert: die Zeile brach weiter um
     und wurde durch die höheren Tippziele sogar länger.) */
  .db-buehne .db-status,
  .topbar > div:last-child {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Wischen ohne sichtbaren Balken – der Balken kostet auf dem Telefon Höhe
       und wird ohnehin nicht angeklickt. */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .db-buehne .db-status::-webkit-scrollbar,
  .topbar > div:last-child::-webkit-scrollbar { display: none; }
  /* Nichts darf schmaler gedrückt werden, sonst bricht die Beschriftung um. */
  .db-buehne .db-status > *,
  .topbar > div:last-child > * { flex: none; }

  /* Die Knopfreihe bekommt eine eigene Zeile – sonst stünde sie neben
     „Angemeldet als …" und hätte zum Wischen kaum Breite. */
  .topbar > div:last-child {
    display: flex; gap: 8px;
    flex: 1 1 100%; min-width: 0;
  }

  /* --- 2) Abwassertalk zugeklappt --------------------------------------- */
  .ut-podcast { margin: 0 12px 12px; padding: 8px 10px; }
  .ut-podcast-bild { width: 40px; height: 40px; }
  .ut-podcast-klapp-titel {
    display: flex; align-items: center; gap: 6px;
    min-height: 38px;                      /* Tippziel */
    margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.86);
    cursor: pointer; list-style: none;
  }
  .ut-podcast-klapp-titel::-webkit-details-marker { display: none; }
  /* Eigener Pfeil: der eingebaute sitzt je Browser anderswo. */
  .ut-podcast-klapp-titel::after {
    content: "";
    width: 7px; height: 7px; margin-left: auto; margin-right: 3px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.15s ease;
  }
  .ut-podcast-klapp[open] > .ut-podcast-klapp-titel::after {
    transform: rotate(-135deg) translateY(-2px);
  }
  /* Zugeklappt trägt die Zeile oben schon den Trennstrich. */
  .ut-podcast-folgen { margin-top: 0; padding-top: 2px; border-top: none; }

  /* --- 3) Tippen und Lesen --------------------------------------------- */
  /* 40 px ist das Maß, unter dem Finger daneben treffen. Vorher waren die
     Knöpfe 32 px hoch und die Folgenzeilen 22 px. */
  .topbar > div:last-child button,
  .db-buehne .db-status button,
  .db-buehne .db-status .db-status-fest { min-height: 40px; }
  .ut-podcast-folge { min-height: 38px; align-items: center; }
  /* Das Inhaltsverzeichnis des Handbuchs ist auf dem Telefon die Navigation
     durch elf Kapitel – es wird oft getippt. */
  nav.inhalt button { min-height: 40px; }

  /* Auch in den Kacheln: die Werkzeuge (↑ ↓ ×) waren 22 px im Quadrat. Sie
     bleiben kleiner als die Inhaltsknöpfe – sie sind Beiwerk und sollen die
     Kachelköpfe nicht auseinanderziehen –, aber 32 px trifft man. */
  .db-gitter .db-kachel button { min-height: 36px; }
  .db-gitter .db-werkzeuge button { min-height: 32px; min-width: 32px; }
  .knopf { min-height: 40px; }
  select { min-height: 40px; }

  /* Nichts unter 12 px. Alle hier genannten Stellen standen bei 10 bis
     11,5 px – auf einem Telefon ist das keine Schrift mehr, sondern Struktur.
     Die Selektoren tragen ihre Vorfahren mit, weil die Seiten sie selbst
     spezifischer setzen (dashboard.css, beifahrer.html, zielvereinbarung.html).
     Sie stehen bewusst HIER und nicht in fünf Dateien: was das Telefon angeht,
     soll an einer Stelle nachlesbar sein. */
  .db-buehne .db-status-titel,
  .db-gitter .db-schnell-hinweis,
  .db-gitter .db-fuss-hinweis,
  .db-gitter .db-zahl-daneben,
  .db-gitter .db-wert-l,
  .db-gitter .db-wert-n,
  .db-gitter .db-vs-kopf,
  .db-gitter .db-vs-ziel,
  .db-gitter .db-termin-mehr,
  .ut-beitrag-quelle,
  .person-karte .rl,
  .karte .warum,
  .karte .punkte small,
  .ut-podcast-mehr,
  .ut-podcast-nr,
  .marke,
  .chip { font-size: 12px; }

  /* AUSNAHME: die Beschriftungen im Prozessrad, im Trichter und in den
     Diagrammen bleiben klein. Sie sitzen in einem Bild und nicht in einem Text –
     größer gesetzt überlappen sie das, was sie beschriften. Wer sie lesen will,
     tippt die Station an; dann steht der Inhalt in normaler Größe in der Tafel. */
}
