/* ==========================================================
   Elvira Stein – Onepager
   ========================================================== */

/* ---------- Schrift: Verdana mit echten Schnitten ----------
   Jeder Schnitt wird ausdrücklich auf die installierte Systemdatei
   gemappt (local()). font-synthesis: none verhindert, dass der
   Browser Fett/Kursiv „fälscht“, falls ein Schnitt fehlt. */
@font-face {
  font-family: "Verdana Site";
  src: local("Verdana"), local("Verdana Regular"), local("Verdana-Regular");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Verdana Site";
  src: local("Verdana Bold"), local("Verdana-Bold");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Verdana Site";
  src: local("Verdana Italic"), local("Verdana-Italic");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "Verdana Site";
  src: local("Verdana Bold Italic"), local("Verdana-BoldItalic");
  font-weight: 700;
  font-style: italic;
}

/* ---------- Schrift für den Namen: Fraunces ----------
   Fraunces (SIL Open Font License, Lizenz in fonts/OFL-fraunces.txt),
   fest eingestellt auf Bold · SOFT 100 · WONK 1 · opsz 72 und auf die
   lateinischen Zeichen reduziert (18 KB). Wird vom eigenen Server geladen. */
@font-face {
  font-family: "Fraunces Elvira";
  src: url("../fonts/fraunces-elvira-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variablen ---------- */
:root {
  --black: #000;
  --white: #fff;
  --blue: #0000ff;
  --magenta: #ff00ff;
  --green: #00ff00;

  --pad: clamp(16px, 3.5vw, 48px);          /* Seitenrand */
  --tile: clamp(130px, 13vw, 182px);      /* Kachelgröße */
  --gap: calc(var(--tile) * 0.37);          /* Abstand zwischen Kacheln, Platz für die Farbebenen */
  --near: calc(var(--tile) * 0.075);        /* Versatz vordere Farbebene */
  --far: calc(var(--tile) * 0.155);         /* Versatz hintere Farbebene */

  /* Schriftskala – 4 Stufen für die ganze Webseite, auf allen Geräten gleich.
     Nur der Name wächst ab 1024 px bis 1440 px mit. */
  --fs-title: 3rem;          /* Name        48 px → 74 px (Desktop) */
  --fs-h2: 1.75rem;          /* Titel       28 px */
  --fs-text: 1.125rem;       /* Text        18 px */
  --fs-caption: 0.9375rem;   /* Klein       15 px */
}

@media (min-width: 1024px) {
  :root {
    --fs-title: clamp(3rem, -1rem + 6.25vw, 4.6rem);   /* nur der Name wächst am Desktop */
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Verdana Site", Verdana, Geneva, sans-serif;
  font-synthesis: none;
  line-height: 1.35;
  overflow-x: hidden;
}

strong, b { font-weight: 700; }
em, i { font-style: italic; }
strong em, em strong, b i, i b { font-weight: 700; font-style: italic; }

img { display: block; max-width: 100%; }

a { color: inherit; }

/* Unterstreichung etwas weiter vom Text weg – gilt für alle Links und Hover-Effekte */
a,
a * {
  text-underline-offset: 0.15em;
}

.page {
  padding: 0 var(--pad);
}

/* ---------- Kopf ---------- */
.site-header {
  padding-top: clamp(24px, 3.5vw, 48px);
  padding-bottom: 24px;   /* mehr Luft unter „Grafikerin“ */
}
.site-title {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
}
/* Nur der Name im Kopf, nicht die Seitentitel von Impressum/Datenschutz */
.site-header .site-title {
  font-family: "Fraunces Elvira", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: var(--fs-title);
}
.site-subtitle {
  margin: 0.35em 0 0;
  font-size: var(--fs-text);
}

/* ---------- Abschnitte ---------- */
.section {
  margin-top: clamp(40px, 6vw, 90px);
}
.section h2 {
  margin: 0 0 0.35em;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
}
.section--tight { margin-top: clamp(20px, 2.5vw, 36px); }

.text {
  max-width: 76ch;   /* Kund:innenliste am Desktop dreizeilig */
  margin: 0;
  font-size: var(--fs-text);
}

/* ---------- Horizontal scrollende Reihe ---------- */
.row {
  display: flex;
  gap: var(--gap);
  margin: 0 calc(var(--pad) * -1) 0 0;   /* läuft rechts bis zum Rand */
  padding: var(--far) var(--pad) 12px 0;  /* Platz oben für die Farbebenen */
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--black) transparent;
}
.row > li { flex: 0 0 auto; scroll-snap-align: start; }

/* ---------- Kachel ---------- */
.tile {
  display: block;
  width: var(--tile);
  text-decoration: none;
  color: var(--blue);
}
.thumb {
  display: block;
  position: relative;
  isolation: isolate;
  width: var(--tile);
  aspect-ratio: 1;
}
.thumb .pic {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: var(--black);    /* Platzhalter, solange kein Bild da ist */
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* Teaser bleibt quadratisch, auch wenn die Datei es nicht ist */
  object-position: center;
}

/* Farbebenen hinter dem Bild (Klassen setzt js/gallery.js automatisch nach Bildanzahl)
   2 Bilder = .layers.near-only (1 Fläche), 3+ Bilder = .layers (2 Flächen)
   Feste Farben: 1. Fläche immer Blau, 2. Fläche immer Pink (Magenta) */
.thumb.layers { --c-near: var(--blue); --c-far: var(--magenta); }
.thumb.layers::before,
.thumb.layers::after {
  content: "";
  position: absolute;
  inset: 0;
}
.thumb.layers::after {           /* vordere Ebene */
  z-index: 1;
  background: var(--c-near, var(--blue));
  transform: translate(var(--near), calc(var(--near) * -1));
}
.thumb.layers::before {          /* hintere Ebene */
  z-index: 0;
  background: var(--c-far, var(--blue));
  transform: translate(var(--far), calc(var(--far) * -1));
}
.thumb.layers.near-outline::after {
  background: var(--white);
  border: 1.5px solid var(--c-near, var(--blue));
}
.thumb.layers.far-outline::before {
  background: var(--white);
  border: 1.5px solid var(--c-far, var(--blue));
}
.thumb.layers.near-only::before { display: none; }


.caption {
  display: block;
  margin-top: 0.6em;
  font-size: var(--fs-caption);
  font-weight: 400;
  line-height: 1.15;
}
/* ---------- Hover-Effekt Bildkacheln: Blau-Duotone ----------
   Foto wird schwarz-weiß, Blau legt sich darüber (Schwarz → Blau, Weiß bleibt Weiß),
   die Beschriftung wird unterstrichen. Nur auf Geräten mit Maus/Trackpad. */
.thumb .pic img { transition: filter 0.3s ease; }
.thumb .pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
@media (hover: hover) {
  .tile:hover .thumb .pic::after { opacity: 1; }
  .tile:hover .pic img { filter: grayscale(1) contrast(1.15); }
  .tile:hover .caption { text-decoration: underline; }
}
/* Tastatur: gleicher Effekt beim Fokus */
.tile:focus-visible .thumb .pic::after { opacity: 1; }
.tile:focus-visible .pic img { filter: grayscale(1) contrast(1.15); }
.tile:focus-visible .caption { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .thumb .pic img, .thumb .pic::after { transition: none; }
}

.tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* ---------- Lehre ---------- */
/* Lehre: kein Scrollen – die drei Kacheln teilen sich die Seitenbreite */
.row--boxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-right: 0;
  padding: 4px 0 0;
  overflow: visible;
}
.row--boxes .box { width: auto; }
@media (max-width: 640px) {
  .row--boxes { grid-template-columns: 1fr; row-gap: clamp(10px, 1.4vw, 20px); }   /* am Handy untereinander, gleicher Abstand wie die Balken */
}
.box {
  display: flex;
  align-items: center;
  width: calc(var(--tile) * 2 + var(--gap));   /* genau 2 Kachelspalten breit */
  height: clamp(90px, 11.5vw, 160px);
  padding: 0 clamp(20px, 5vw, 68px);
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-text);
  text-decoration: none;
}
.box:hover,
.box:focus-visible { text-decoration: underline; }
/* Kachel ohne Link (z. B. Workshops): keine Hover-Effekte, auch nicht in den Vorschlägen */
.box.box--static,
.box.box--static:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  text-decoration: none !important;
  cursor: default;
}

/* ---------- Banner ---------- */
/* Ausgeblendete Elemente (z. B. Melodica-Banner): Attribut hidden entfernen, um sie wieder zu zeigen */
[hidden] { display: none !important; }

.banners {
  display: grid;
  gap: clamp(10px, 1.4vw, 20px);
  margin-top: clamp(50px, 7vw, 110px);
}
.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(54px, 5.6vw, 78px);
  padding: 0.5em 1em;
  background: var(--black);
  color: var(--banner-color, var(--white));
  font-size: var(--fs-text);
  text-align: center;
  text-decoration: none;
}
.banner:hover,
.banner:focus-visible { text-decoration: underline; }

/* ---------- CV-Block ---------- */
.cv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(50px, 7vw, 110px);
  min-height: clamp(360px, 60vw, 850px);
  background: var(--black);
}
.cv__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;       /* Text und Knopf vertikal mittig in der schwarzen Fläche */
  align-items: flex-start;
  gap: clamp(24px, 3.5vw, 48px);
  padding: clamp(24px, 5vw, 68px);
  color: var(--white);
}
/* Über mich */
.cv__about { max-width: 500px; }
.cv__about p {
  margin: 0 0 0.8em;
  font-size: var(--fs-text);
  line-height: 1.4;
}
.cv__about p:last-child { margin-bottom: 0; }
.cv__photo {
  position: relative;
  background: #222;
}
.cv__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.btn-cv {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 0.55em 1.4em;
  border: 3px solid var(--green);
  color: var(--green);
  font-size: var(--fs-text);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-cv:hover,
.btn-cv:focus-visible { background: var(--green); color: var(--black); }
.btn-cv:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
/* Download-Icon im Lebenslauf-Knopf, gleicher Stil wie die anderen Icons */
.btn-cv::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.5em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M12 3v12M6 10l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M12 3v12M6 10l6 6 6-6M4 21h16'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}
.btn-cv:hover::after,
.btn-cv:focus-visible::after { transform: translateX(0.15em); }
@media (prefers-reduced-motion: reduce) { .btn-cv, .btn-cv::after { transition: none; } }

/* ---------- Fuß ---------- */
.site-footer {
  margin-top: clamp(60px, 10vw, 160px);
  padding: 0 0 clamp(24px, 3.5vw, 48px);
  font-size: var(--fs-caption);
}
.site-footer a { margin-right: 1.5em; }

/* ---------- Mobil ---------- */
@media (max-width: 640px) {
  .cv {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cv__photo { order: -1; aspect-ratio: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Bildansicht (reduziertes Vollbild) ----------
   Hintergrund = Farbe der hinteren Ebene des Stapels (--bg, per JS gesetzt).
   Klick irgendwo = weiter, das Label am Mauszeiger zeigt den Stand. */
.viewer {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  cursor: none;
}
/* Großansicht: immer Blau (#0000FF) mit leichter Transparenz – die Seite schimmert durch */
.viewer::backdrop { background: rgba(0, 0, 255, 0.92); }
.viewer[open] { display: grid; place-items: center; }

/* Kopf der Großansicht: Titel und ggf. Fotocredit untereinander im normalen Textfluss,
   damit sich nichts überlagert, wenn der Titel am Handy zweizeilig wird */
.viewer__head {
  position: fixed;
  left: var(--pad);
  right: var(--pad);
  top: clamp(16px, 2.5vw, 32px);
  pointer-events: none;
}
.viewer__title {
  margin: 0;
  font-size: var(--fs-text);
  font-weight: 400;
}
/* Fotocredit fremder Fotograf:innen, direkt unter dem Titel */
.viewer__credit {
  margin: 0.3em 0 0;
  font-size: var(--fs-caption);
  opacity: 0.85;
}
.viewer__credit[hidden] { display: none; }
.viewer__pic {
  display: grid;
  place-items: center;
  transition: opacity 0.18s ease;
}
.viewer__pic.is-fading { opacity: 0; }
/* Bild im Originalformat (hoch, quer oder quadratisch), passt sich dem Fenster an */
.viewer__pic img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(88vw, 1600px);
  max-height: calc(100dvh - 2 * clamp(64px, 9vw, 120px));
}
/* Platzhalter, solange das Bild fehlt */
.viewer__pic.is-empty {
  width: min(70vmin, 800px);
  aspect-ratio: 1;
  background: #222;
  color: var(--white);
  font-size: var(--fs-caption);
}
.viewer__label {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 0.35em 0.7em;
  background: var(--black);
  color: var(--white);
  font-size: var(--fs-caption);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(14px, 14px);
}
.viewer__label[hidden] { display: none; }

/* Für Tastatur: Schließen-Knopf erscheint nur, wenn er fokussiert ist */
.viewer__close {
  position: fixed;
  right: var(--pad);
  top: clamp(16px, 2.5vw, 32px);
  padding: 0.4em 0.8em;
  border: 2px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  opacity: 0;
}
.viewer__close:focus-visible { opacity: 1; outline: none; }

/* Touch-Geräte: kein Mauszeiger – Label fix unten in der Mitte */
@media (hover: none) {
  .viewer { cursor: auto; }
  .viewer__label {
    left: 50% !important;
    top: auto !important;
    bottom: 24px;
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__pic { transition: none; }
}

/* ---------- Hilfsklassen ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
.site-title a { text-decoration: none; transition: color 0.15s ease; }
/* Name als Link zur Startseite (Unterseiten): beim Hover blau statt unterstrichen */
.site-title a:hover,
.site-title a:focus-visible { color: var(--blue); }
/* Textspalte: angenehme Zeilenlänge (ca. 65–75 Zeichen), wächst bis 46rem */
.legal {
  max-width: 46rem;
  /* Unterseiten nutzen dieselbe Skala wie die Startseite */
  --fs-legal: var(--fs-text);
  --fs-legal-h3: var(--fs-text);
  --fs-legal-h1: var(--fs-h2);
  --fs-legal-back: var(--fs-caption);
}
.legal h1 {
  margin-bottom: 0.2em;
  font-size: var(--fs-legal-h1);
}
.legal h2 {
  margin: 2.2em 0 0.5em;
  font-size: var(--fs-legal-h3);
  font-weight: 700;
  line-height: 1.3;
}
.legal h2:first-of-type { margin-top: 1.4em; }
.legal p, .legal ul {
  margin: 0 0 1em;
  font-size: var(--fs-legal);
  line-height: 1.55;
  hyphens: manual;               /* keine automatische Silbentrennung */
  -webkit-hyphens: manual;
  overflow-wrap: break-word;     /* lange E-Mail-Adressen/Links brechen notfalls um */
}
.legal ul { padding-left: 1.2em; }
.legal a { color: var(--blue); }
.back {
  display: inline-block;
  margin-top: 2.5em;
  color: var(--blue);
  font-weight: 700;
  font-size: var(--fs-legal-back);
}
@media (max-width: 640px) {
  .legal h2 { margin-top: 1.8em; }
}
/* Hover für Textlinks (Impressum, Datenschutz, Fußzeile, Über-mich-Text): blau hinterlegt, weiße Schrift.
   box-shadow verlängert die Fläche seitlich, ohne dass Text verrutscht;
   box-decoration-break hinterlegt mehrzeilige Links Zeile für Zeile. */
.legal a,
.site-footer a,
.cv__about a {
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
@media (hover: hover) {
  .legal a:hover,
  .site-footer a:hover,
  .cv__about a:hover {
    background: var(--blue);
    color: var(--white);
    box-shadow: 0.08em 0 0 0.07em var(--blue), -0.08em 0 0 0.07em var(--blue);   /* seitlich 0,15em, oben/unten 0,07em */
    text-decoration: none;
  }
}
.legal a:focus-visible,
.site-footer a:focus-visible,
.cv__about a:focus-visible {
  background: var(--blue);
  color: var(--white);
  box-shadow: 0.08em 0 0 0.07em var(--blue), -0.08em 0 0 0.07em var(--blue);
  text-decoration: none;
  outline: 2px solid var(--black);
  outline-offset: 0.25em;
}
@media (prefers-reduced-motion: reduce) {
  .legal a, .site-footer a, .cv__about a { transition: none; }
}
.cv__about a:focus-visible { outline-color: var(--white); }
.site-footer a[aria-current="page"] { text-decoration: none; font-weight: 700; }

/* ---------- Icon für externe Links ----------
   Gilt für jeden Link auf eine fremde Website (absolute http/https-Adresse),
   egal ob er im selben oder in einem neuen Fenster öffnet.
   Interne Links (relativ, z. B. impressum.html) und mailto: bekommen kein Icon.
   Falls je ein absoluter Link auf die eigene Domain nötig ist: Klasse .no-ext-icon.
   Das Icon übernimmt die Textfarbe (Magenta, Grün, Blau …). */
a:is([href^="http://"], [href^="https://"]):not(.no-ext-icon)::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.4em;
  vertical-align: -0.02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M14 3h7v7M21 3l-10 10M18 14v7H3V6h7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M14 3h7v7M21 3l-10 10M18 14v7H3V6h7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Brief-Icon für E-Mail-Kachel (Workshops), gleicher Stil wie das Extern-Icon */
.box--mail::after,
.banner--mail::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.4em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---------- Pfeil vor „Zurück zur Startseite“ ----------
   Gleicher Stil wie das Icon für externe Links (Strichstärke, eckige Enden),
   etwas kräftiger, weil der Linktext fett ist; übernimmt die Textfarbe. */
.back::before {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.4em;
  vertical-align: -0.02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M10 5l-7 7 7 7M3 12h18'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='square'%3E%3Cpath d='M10 5l-7 7 7 7M3 12h18'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Icons in Bannern und Lehre-Kacheln hängen am letzten Wort (span.icon-tail),
   damit sie bei zweizeiligem Text nicht an den Rand rutschen */
.box::after,
.banner::after { display: none !important; }
.icon-tail { white-space: nowrap; }
.icon-tail::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.4em;
  vertical-align: -0.02em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M14 3h7v7M21 3l-10 10M18 14v7H3V6h7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M14 3h7v7M21 3l-10 10M18 14v7H3V6h7'/%3E%3C/svg%3E") center / contain no-repeat;
}
a[href^="mailto:"] .icon-tail::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='square'%3E%3Cpath d='M3 5h18v14H3zM3 6l9 7 9-7'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .icon-tail::after { transition: transform 0.2s ease; }
  .banner:hover .icon-tail::after,
  .banner:focus-visible .icon-tail::after,
  .box:hover .icon-tail::after,
  .box:focus-visible .icon-tail::after { transform: translate(0.15em, -0.15em); }
  a[href^="mailto:"]:hover .icon-tail::after,
  a[href^="mailto:"]:focus-visible .icon-tail::after { transform: translate(0.15em, 0); }
}

/* ---------- Austeilen beim Scrollen ----------
   Sobald eine Bildreihe ins Bild kommt, gleiten die Kacheln nacheinander ein
   und die Farbflächen schieben sich hinter den Bildern hervor.
   Die Klasse .deal setzt js/gallery.js – ohne JavaScript ist alles sofort sichtbar. */
body.deal .row:not(.settled) .thumb.layers::before,
body.deal .row:not(.settled) .thumb.layers::after {
  transition: transform 0.85s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--d, 0) * 140ms + 200ms);
}
body.deal .row:not(.settled) .thumb.layers::before { transition-delay: calc(var(--d, 0) * 140ms + 360ms); }
body.deal .row:not(.dealt) .thumb.layers::before,
body.deal .row:not(.dealt) .thumb.layers::after { transform: translate(0, 0); }
body.deal .row > li {
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(.2, .8, .2, 1);
  transition-delay: calc(var(--d, 0) * 140ms);
}
body.deal .row:not(.dealt):not(.row--boxes) > li { opacity: 0; transform: translateY(14px); }