@charset "UTF-8";
/* IFAM-Team Bonn Köln (ifam-team.de)

   Entwurf vom 02.10.2026: Spielbericht statt Kanzleibroschüre. Schwarz und Weiß wie das Logo,
   Farbe bringen allein die Fotos. Ein dunkler Kopf, in dem die Logoplakette so steht wie in
   ihrer Vorlage, darunter ein Titelband mit schmal laufenden Versalien; die Wellenlinien des
   Logos (der Rhein zwischen Bonn und Köln) schließen das Band ab und kehren als Zeichen über
   den Abschnittsüberschriften wieder. Kein Framework, kein JavaScript, keine Fremdserver,
   keine Animation, keine Cookies.

   Schrift: Archivo (Omnibus-Type, SIL OFL 1.1), selbst gehostet unter ../Fonts/. Eine
   variable Datei mit Gewichts- und Breitenachse trägt Überschriften (schmal, fett) und
   Fließtext (normal breit) zugleich; die Kursive kommt als zweite Datei ohne Breitenachse.

   Farben aus dem Logo (gemessen am 02.10.2026 an ifam-logo.png, 1254 × 1246 px): Das Logo
   ist unbunt, die größte Kanaldifferenz aller Pixel beträgt 13. Median der dunklen Pixel
   #1c1c1d (Tinte), Median der hellen #f3f4f4 (Plakette), der Rest ist transparent.

   Kontraste (WCAG 2.1, gerechnet am 02.10.2026; AA verlangt 4,5:1 für Text, 3:1 für große
   Schrift, Bedienelemente und Fokus):
     --tinte      #1c1c1d auf Weiß    17,0:1   auf --papier  15,5:1
     Weiß         #ffffff auf --tinte 17,0:1
     --papier     #f3f4f4 auf --tinte 15,5:1
     --grau       #55585b auf Weiß     7,2:1   auf --papier   6,5:1
     --grau-hell  #c4c7c9 auf --tinte 10,0:1
   --linie #d4d6d7 ist reiner Schmuck (1,5:1 auf Weiß) und trägt nie allein eine Information.
   Links haben die Textfarbe und sind am Unterstrich zu erkennen, nicht an der Farbe. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../Fonts/Archivo-latin-wdth-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Archivo";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../Fonts/Archivo-latin-wght-italic.woff2") format("woff2");
}

:root {
  --tinte: #1c1c1d;
  --papier: #f3f4f4;
  --weiss: #ffffff;
  --grau: #55585b;
  --grau-hell: #c4c7c9;
  --linie: #d4d6d7;

  --schrift: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --breite: 70rem;                      /* Satzspiegel: vier Karten zu je rund 16 rem */
  --spalte: 42rem;                      /* einspaltiger Lesetext, rund 75 Zeichen */
  --rand: clamp(1rem, 4vw, 2rem);
  --rund: 1.1rem;                       /* die abgerundete Ecke der Logoplakette */
  --logo: 4.75rem;                      /* Kantenlänge des Logobilds; die Plakette füllt davon zwei Drittel */

  /* Die Wellen des Logos als Kachel, 72 px Periode: drei Linien hell für dunklen Grund,
     eine Linie dunkel für hellen. Eingebettet, kein Abruf. Der Pfad beginnt und endet
     außerhalb der Kachel, sonst zeigt jede Kachelgrenze eine Naht. */
  --wellen-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cpath d='M-72 7q18-9 36 0t36 0 36 0 36 0 36 0M-72 19q18-9 36 0t36 0 36 0 36 0 36 0M-72 31q18-9 36 0t36 0 36 0 36 0 36 0' fill='none' stroke='%23f3f4f4' stroke-width='3.5'/%3E%3C/svg%3E");
  --welle-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='12' viewBox='0 0 72 12'%3E%3Cpath d='M-72 7q18-9 36 0t36 0 36 0 36 0 36 0' fill='none' stroke='%231c1c1d' stroke-width='3.5'/%3E%3C/svg%3E");

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Die Bänder laufen über Pseudoelemente bis an den Fensterrand; ohne clip entstünde daraus
   ein waagerechter Rollbalken. */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinte);
  background: var(--weiss);
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; overflow-wrap: break-word; }
p, ul, ol { margin: 0 0 1em; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: .09em; text-underline-offset: .2em; }
a:hover { background: var(--tinte); color: var(--weiss); text-decoration: none; }

:focus-visible { outline: 3px solid var(--tinte); outline-offset: 3px; border-radius: 2px; }

/* Sprungmarke: erst mit Tastaturfokus sichtbar. */
.sprung {
  position: absolute; left: .5rem; top: -6rem; z-index: 10;
  padding: .6rem 1rem; background: var(--weiss); color: var(--tinte); font-weight: 700;
}
.sprung:focus { top: .5rem; }

/* ---------- Kopf ---------- */

.site-header { background: var(--tinte); color: var(--weiss); }
.site-header__inner {
  max-width: var(--breite); margin: 0 auto; padding: .9rem var(--rand);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .25rem 1.5rem;
}
.site-header a:hover, .site-footer a:hover, .page-content > h1 a:hover { background: var(--weiss); color: var(--tinte); }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--weiss); }

.site-logo {
  display: flex; align-items: center; gap: .85rem;
  text-decoration: none; font-stretch: 75%; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.05; font-size: 1.15rem;
}
.site-logo:hover { background: none; color: inherit; }
.site-logo:hover .site-logo__name { text-decoration: underline; text-decoration-thickness: .12em; text-underline-offset: .2em; }
/* Das Bildschirmfoto trägt rundum durchsichtigen Rand (Plakette: x 217–1056, y 119–1069 von
   1254 × 1246). Negative Ränder holen ihn zurück, damit die Plakette bündig steht. */
.site-logo img {
  display: block; width: var(--logo); height: auto; flex: none;
  margin: calc(var(--logo) * -.095) calc(var(--logo) * -.158) calc(var(--logo) * -.141) calc(var(--logo) * -.173);
}
.site-logo__name span { display: block; font-weight: 500; color: var(--grau-hell); }

.mainnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 .5rem; }
.mainnav a {
  display: block; padding: .7rem .6rem;              /* Tippfläche 44 px hoch */
  font-stretch: 75%; font-weight: 700; font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: .08em; text-decoration: none;
}
.mainnav li.active a { box-shadow: inset 0 -3px 0 var(--weiss); }
.mainnav li.active a:hover { box-shadow: none; }

/* ---------- Inhalt: ein Raster aus vier Spalten ----------
   Die Karten (Layout 1) stehen als Geschwister im <main> und nehmen je eine Spalte; alles
   andere läuft über die volle Breite. */

.page-content {
  max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand) 5rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(1.1rem, 2.5vw, 1.75rem);
}
.page-content > * { grid-column: 1 / -1; min-width: 0; }

/* Titelband: auf Unterseiten die Seitenüberschrift, auf der Startseite die Begrüßung. */
.page-content > h1,
.page-content[data-start="1"] > .frame:first-child h1 {
  font-stretch: 68%; font-weight: 800; text-transform: uppercase; line-height: .95;
  letter-spacing: -.005em; color: var(--weiss);
}
.page-content > h1 {
  position: relative; isolation: isolate;
  font-size: clamp(2.6rem, 9vw, 5rem);
  padding: clamp(1.5rem, 5vw, 3rem) 0 calc(clamp(1.5rem, 5vw, 3rem) + 44px);
}
.page-content > h1::before,
.page-content[data-start="1"] > .frame:first-child::before {
  content: ""; z-index: -1; background: var(--tinte);
}
/* 1 px nach oben: Bei gebrochenen Pixelhöhen des Kopfs bliebe sonst eine helle Haarlinie. */
.page-content > h1::before { position: absolute; inset: -1px -100vmax 0; }
.page-content > h1::after,
.page-content[data-start="1"] > .frame:first-child::after {
  content: ""; height: 36px; background: var(--wellen-hell) repeat-x 50% 0;
}
.page-content > h1::after { position: absolute; inset: auto -100vmax 14px; }

/* ---------- Inhaltselemente allgemein ---------- */

.frame { margin-top: 3.5rem; }
.page-content > h1 + .frame, .page-content > .frame:first-child { margin-top: 3rem; }
.frame > :last-child, .ce-bodytext > :last-child { margin-bottom: 0; }

/* Überschrift eines Inhaltselements: Versalien mit einer Welle davor. */
.frame > header > h2 {
  font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.7rem, 4.2vw, 2.4rem); margin-bottom: 1.25rem;
}
.frame > header > h2::before {
  content: ""; display: block; width: 72px; height: 12px; margin-bottom: .9rem;
  background: var(--welle-dunkel) repeat-x 0 0;
}

/* Überschriften im Fließtext (Impressum, Datenschutz). */
.frame h2 { font-stretch: 80%; font-weight: 700; font-size: 1.45rem; margin: 2.5rem 0 .7rem; }
.frame h3 { font-weight: 700; font-size: 1.1rem; margin: 1.75rem 0 .4rem; }
.frame h4 { font-weight: 600; font-size: 1rem; margin: 1.25rem 0 .3rem; }
.frame > :first-child, .frame > header > :first-child { margin-top: 0; }

/* Lesetext: eine Spalte von angenehmer Breite. */
.frame-layout-0 > :is(p, ul, ol, h2, h3, h4, header, table),
.frame-layout-0 .ce-bodytext { max-width: var(--spalte); }

/* fluid_styled_content: Floats, verschobene Hüllen (right: 50 %) und overflow: hidden
   zurücknehmen. Letzteres schnitte auch den Fokusrahmen ab. */
.ce-textpic, .ce-gallery, .ce-row, .ce-nowrap .ce-bodytext { overflow: visible; }
.ce-gallery, .ce-column,
.ce-center .ce-outer, .ce-center .ce-inner { float: none; position: static; right: auto; margin: 0; }
.ce-gallery figure { display: block; margin: 0; }
.ce-row { margin: 0; }
.ce-above .ce-bodytext { clear: none; }

/* Bild über Text ohne besondere Gestalt. */
.frame-layout-0 .ce-gallery { margin-bottom: 1.5rem; }
.frame-layout-0 .ce-gallery img { border-radius: var(--rund); }

/* ---------- Startseite: Begrüßung im Titelband ---------- */

.page-content[data-start="1"] > .frame:first-child {
  margin-top: 0; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 50px auto;
}
.page-content[data-start="1"] > .frame:first-child > .ce-textpic { display: contents; }
.page-content[data-start="1"] > .frame:first-child::before { grid-area: 1 / 1 / 4 / -1; margin: -1px -100vmax 0; }
.page-content[data-start="1"] > .frame:first-child::after { grid-area: 3 / 1 / 4 / -1; margin: 0 -100vmax; }
.page-content[data-start="1"] > .frame:first-child > header {
  grid-area: 1 / 1; max-width: none; padding: clamp(1.5rem, 5vw, 3rem) 0 1.5rem;
}
.page-content[data-start="1"] > .frame:first-child h1 { font-size: clamp(2.3rem, 8.5vw, 4.4rem); }
.page-content[data-start="1"] > .frame:first-child .ce-gallery { grid-area: 2 / 1; margin: 0 0 1.75rem; }
.page-content[data-start="1"] > .frame:first-child .ce-gallery img { display: block; width: 100%; }
.page-content[data-start="1"] > .frame:first-child .ce-bodytext {
  grid-area: 4 / 1 / 5 / -1; max-width: var(--spalte); padding-top: 3rem;
}

@media (min-width: 52rem) {
  .page-content[data-start="1"] > .frame:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 3rem;
    grid-template-rows: auto 0 50px auto; align-items: center;
  }
  .page-content[data-start="1"] > .frame:first-child::before,
  .page-content[data-start="1"] > .frame:first-child::after { align-self: stretch; }
  .page-content[data-start="1"] > .frame:first-child > header { padding: 3.5rem 0 2.5rem; }
  .page-content[data-start="1"] > .frame:first-child h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); }
  .page-content[data-start="1"] > .frame:first-child .ce-gallery { grid-area: 1 / 2; margin: 3rem 0 2rem; }
}

/* ---------- Zweisprachiger Text ----------
   Deutsch und Englisch stehen untereinander. Ab 60 rem setzt der Browser sie in zwei gleich
   breite Spalten und bricht nur zwischen Absätzen um: links der deutsche Text, rechts der
   englische, beide in derselben Schrift und Größe. Die Lesereihenfolge bleibt in jedem Fall
   die des Dokuments; verschiebt eine Textänderung das Gleichgewicht, läuft ein Absatz in die
   andere Spalte, es geht aber nichts durcheinander. Gilt für Start und Team. */

@media (min-width: 60rem) {
  .page-content:is([data-start="1"], [data-seite="/team"]) > .frame-layout-0.frame-type-text,
  .page-content[data-start="1"] > .frame:first-child .ce-bodytext,
  .frame-layout-2 .ce-bodytext { columns: 2; column-gap: 3rem; max-width: none; }

  .page-content:is([data-start="1"], [data-seite="/team"]) > .frame-layout-0.frame-type-text > *,
  .frame-layout-2 .ce-bodytext > * { max-width: none; }

  .page-content:is([data-start="1"], [data-seite="/team"]) > .frame-layout-0.frame-type-text > header,
  .frame-layout-2 .ce-bodytext > header { column-span: all; }

  .page-content:is([data-start="1"], [data-seite="/team"]) p,
  .frame-layout-2 p { break-inside: avoid; }
}

/* ---------- Layout 1: Karte ----------
   Im HTML steht die Überschrift vor dem Bild; die Karte zeigt das Bild zuerst. */

.page-content > .frame-layout-1 {
  grid-column: auto; margin-top: 2.25rem;
  display: flex; flex-direction: column;
}
.frame-layout-1 > .ce-textpic { display: contents; }
.frame-layout-1 .ce-gallery { order: -1; margin-bottom: .9rem; }
.frame-layout-1 .ce-gallery img,
.frame-layout-2 .ce-gallery img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 20%;
  border-radius: var(--rund); background: var(--papier);
  outline: 1px solid rgba(28, 28, 29, .1); outline-offset: -1px;   /* helle Hintergründe liefen sonst ins Weiß aus */
}
.frame-layout-1 h3, .frame-layout-2 h3 { font-size: 1.2rem; font-weight: 700; margin: 0; hyphens: auto; }
.frame-layout-1 h4, .frame-layout-2 h4 {
  margin: .3rem 0 0; font-stretch: 80%; font-weight: 600; font-size: .9rem;
  text-transform: uppercase; letter-spacing: .09em; color: var(--grau);
}
.frame-layout-1 .ce-bodytext { margin-top: .45rem; font-size: .95rem; }
.frame-layout-1 .ce-bodytext a { display: inline-block; padding: .2rem 0; }

/* Unter 44 rem zwei Karten je Reihe. Drei gibt es nie: Acht Karten ergäben 3 + 3 + 2. */
@media (max-width: 43.99rem) {
  .page-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 26rem) {
  .frame-layout-1 h3 { font-size: 1.05rem; }
  .frame-layout-1 h4 { font-size: .8rem; letter-spacing: .06em; }
}

/* ---------- Layout 2: Porträt neben Text ----------
   Das Bild steht auf der Seite, die im Backend gewählt ist (ce-right oder ce-left). */

.page-content > .frame-layout-2 { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--linie); }
/* Schmal: Das Porträt steht rechts neben dem Namen, der Text umfließt es. */
.frame-layout-2 > .ce-textpic { display: flow-root; }
.frame-layout-2 .ce-gallery { float: right; width: min(38%, 9.5rem); margin: 0 0 .6rem 1rem; }
.frame-layout-2 > .ce-left .ce-gallery { float: left; margin: 0 1rem .6rem 0; }
/* Folgen Karten auf die Porträts, schließt eine Linie den Block ab. */
.page-content > .frame-layout-2:has(+ .frame-layout-1) { padding-bottom: 3rem; border-bottom: 1px solid var(--linie); }
.page-content > .frame-layout-2 + .frame-layout-1,
.page-content > .frame-layout-2 + .frame-layout-1 ~ .frame-layout-1 { margin-top: 3rem; }
.frame-layout-2 .ce-bodytext > header { margin-bottom: 1rem; }
.frame-layout-2 h3 { font-size: 1.6rem; font-stretch: 85%; font-weight: 800; }

@media (min-width: 40rem) {
  .frame-layout-2 > .ce-textpic {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(10rem, 22vw, 15rem);
    column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
  }
  .frame-layout-2 .ce-gallery,
  .frame-layout-2 > .ce-left .ce-gallery { grid-column: 2; grid-row: 1; float: none; width: auto; margin: 0; }
  .frame-layout-2 .ce-bodytext { grid-column: 1; grid-row: 1; }
  .frame-layout-2 > .ce-left { grid-template-columns: clamp(10rem, 22vw, 15rem) minmax(0, 1fr); }
  .frame-layout-2 > .ce-left .ce-gallery { grid-column: 1; }
  .frame-layout-2 > .ce-left .ce-bodytext { grid-column: 2; }
}

/* ---------- Layout 3: Logoreihe ----------
   Vier Logos sehr verschiedener Form in gleich großen Feldern; der Satz steht davor. */

.frame-layout-3 > .ce-textpic { display: flex; flex-direction: column; }
.frame-layout-3 .ce-bodytext { order: -1; margin-bottom: 2rem; font-size: 1.3rem; line-height: 1.4; max-width: var(--spalte); }
.frame-layout-3 .ce-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.frame-layout-3 .ce-row { display: contents; }
.frame-layout-3 .ce-column {
  position: relative; min-height: 9.5rem; padding: 2rem 1.5rem;
  display: grid; place-items: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--rund);
}
.frame-layout-3 .ce-gallery img { display: block; width: auto; max-width: 100%; max-height: 5.5rem; object-fit: contain; }
/* Das ganze Feld ist der Link. */
.frame-layout-3 figure a::after { content: ""; position: absolute; inset: -1px; border-radius: var(--rund); }
.frame-layout-3 figure a:hover { background: none; }
.frame-layout-3 figure a:hover::after { box-shadow: inset 0 0 0 3px var(--tinte); }
.frame-layout-3 figure a:focus-visible { outline: none; }
.frame-layout-3 figure a:focus-visible::after { outline: 3px solid var(--tinte); outline-offset: 3px; }

@media (min-width: 36rem) {
  .frame-layout-3 .ce-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .frame-layout-3 .ce-column { min-height: 12rem; padding: 2.5rem; }
}

/* ---------- Fuß ---------- */

.site-footer { background: var(--tinte); color: var(--weiss); font-size: .95rem; }
.site-footer__inner {
  max-width: var(--breite); margin: 0 auto; padding: 2.5rem var(--rand) 3rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 2.5rem;
  color: var(--grau-hell);
}
.site-footer__name {
  flex: 1 1 100%; color: var(--weiss);
  font-stretch: 75%; font-weight: 800; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em;
}
.site-footer__kontakt { flex: 1 1 auto; }
.site-footer a { display: inline-block; padding: .35rem 0; color: var(--weiss); }

/* ---------- Druck ---------- */

@media print {
  @page { margin: 18mm 16mm; }
  html, body { overflow: visible; }
  body { font-size: 10.5pt; line-height: 1.45; color: #000; background: #fff; }

  .sprung, .mainnav, .site-footer nav:not(.site-footer__kontakt) { display: none; }

  .site-header, .site-footer { background: none; color: #000; }
  .site-header__inner, .site-footer__inner, .page-content { max-width: none; padding-left: 0; padding-right: 0; }
  .site-header__inner { padding-top: 0; border-bottom: 1pt solid #000; }
  .site-logo__name span, .site-footer__inner, .site-footer a { color: #000; }
  .site-footer { margin-top: 2em; border-top: 1pt solid #000; }
  .site-footer__inner { padding: 1em 0 0; }

  /* Bänder ohne Schwarzfläche. */
  .page-content > h1::before, .page-content > h1::after,
  .page-content[data-start="1"] > .frame:first-child::before,
  .page-content[data-start="1"] > .frame:first-child::after { display: none; }
  .page-content > h1,
  .page-content[data-start="1"] > .frame:first-child h1 { color: #000; font-size: 26pt; }
  .page-content > h1 { padding: 1.2em 0 0; }
  .page-content[data-start="1"] > .frame:first-child { grid-template-rows: auto; }
  .page-content[data-start="1"] > .frame:first-child > header { padding: 1.2em 0 .8em; }
  .page-content[data-start="1"] > .frame:first-child .ce-gallery { margin: 1em 0; max-width: 100mm; }
  .page-content[data-start="1"] > .frame:first-child .ce-bodytext { padding-top: 0; }

  .page-content { padding-bottom: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 6mm; }
  .frame { margin-top: 1.6em; }
  .page-content > .frame-layout-2 { margin-top: 1.2em; padding-top: 1.2em; }
  /* Karten als gewöhnliche Blöcke: Als Flex-Spalte trennte der Seitenumbruch Bild und Namen. */
  .page-content > .frame-layout-1 { display: block; margin-top: 1.2em; }
  .frame-layout-1 > .ce-textpic { display: block; }
  .frame-layout-1 .ce-gallery { margin: .5em 0; max-width: 32mm; }
  .frame-layout-1, .frame-layout-2, .frame-layout-3 .ce-column, figure { break-inside: avoid; }
  h1, h2, h3, h4, .frame > header { break-after: avoid; }
  p { orphans: 3; widows: 3; }
  .frame-layout-1 h4, .frame-layout-2 h4 { color: #000; }
  .frame-layout-3 .ce-column { min-height: 0; padding: 6mm; border-color: #000; }

  /* Ziele ausschreiben, wo das Papier sie sonst verschluckt. */
  a { text-decoration: none; }
  .frame a[href^="http"]::after,
  .site-footer__kontakt a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; font-weight: 400; overflow-wrap: anywhere; }
  /* In den schmalen Karten nur die Mailadresse; Profiladressen von 150 Zeichen sprengten die Spalte. */
  .frame-layout-1 a[href^="http"]::after { content: none; }
  .frame-layout-1 a[href^="mailto:"]::after,
  .site-footer__kontakt a[href^="mailto:"]::after { content: " (" attr(href) ")"; font-size: .85em; overflow-wrap: anywhere; }
  .frame-layout-3 figure a::after { position: static; display: block; margin-top: 2mm; text-align: center; }
}