/* =========================================================================
   ALBA FOR ANIMALS - Bausteine (eigene Inhaltselemente)
   -------------------------------------------------------------------------
   Einstieg, Aktuell, Weg, Kacheln, Zahlen, Kontaktband, Tiere.
   Jeder Baustein bringt seine Flaeche und seine Bahn (.qn-breite) selbst
   mit; der Rahmen drumherum hat keinen Innenabstand (alba-grund.css).

   Bewegung gibt es an genau einer Stelle: dem Logo im Kopf. Kein
   Einblenden beim Scrollen - nichts beginnt unsichtbar.
   ========================================================================= */

@layer qn.theme {

  /* =======================================================================
     Einstieg: Sonnenuntergang, Text links darauf
     ======================================================================= */
  .held { position: relative; display: grid; background: var(--alba-sand); }
  .held > picture, .held__tx { grid-area: 1 / 1; }
  .held img {
    width: 100%;
    height: 100%;
    min-height: clamp(440px, 40vw, 640px);
    object-fit: cover;
    object-position: 70% 100%;
  }
  /* Heller, warmer Schleier von links statt Abdunklung. Hund und Katze
     rechts bleiben frei. */
  .held__tx {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg,
      rgb(255 251 244 / 0.94) 0%,
      rgb(255 251 244 / 0.86) 30%,
      rgb(255 251 244 / 0.38) 52%,
      rgb(255 251 244 / 0) 66%);
  }
  .held__box { max-width: 600px; padding-block: var(--takt-l); }
  .held h1 {
    font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4rem);
    line-height: 1.03;
    letter-spacing: -0.014em;
    max-width: 13ch;
    margin-block-end: 0.4em;
  }
  .held .vorspann { max-width: 46ch; }
  .held .knopf--rahmen { background: rgb(255 251 244 / 0.7); }
  .held .knopf--rahmen:hover { background: var(--alba-tinte); }

  /* Mittlere Breiten: Textspalte schmaler, damit Hund und Katze frei bleiben */
  @media (max-width: 1100px) and (min-width: 701px) {
    .held__box { max-width: 430px; }
    .held .vorspann { font-size: 1rem; }
    .held__tx {
      background: linear-gradient(90deg,
        rgb(255 251 244 / 0.95) 0%,
        rgb(255 251 244 / 0.88) 40%,
        rgb(255 251 244 / 0.3) 60%,
        rgb(255 251 244 / 0) 72%);
    }
  }
  /* Telefon: Die Bildhoehe reicht nicht fuer Text - Bild oben, Text darunter */
  @media (max-width: 700px) {
    .held { display: block; }
    .held img { min-height: 0; height: auto; aspect-ratio: 3 / 2; object-position: 50% 100%; }
    .held__tx { background: var(--alba-papier); }
    .held__box { padding-block: var(--takt-m) var(--takt-s); }
  }

  /* =======================================================================
     Aktuell: Band direkt unter dem Bild - das Erste, was man liest
     ======================================================================= */
  .aktuell { background: var(--alba-sand); border-bottom: 1px solid var(--alba-weg); }
  .aktuell__raster {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--takt-s) var(--takt-m);
    align-items: center;
    padding-block: var(--takt-s);
  }
  .aktuell__raster > :only-child,
  .aktuell__text:first-child { grid-column: 1 / 3; }
  .aktuell__bild { width: clamp(88px, 10vw, 132px); margin: 0; }
  .aktuell__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .aktuell h2 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); margin: 0 0 0.35em; }
  .aktuell__art {
    display: block;
    margin-block-end: 0.35em;
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--alba-bernstein-tinte);
  }
  .aktuell__inhalt { max-width: 70ch; }
  .aktuell .tasten { margin: 0; }
  /* Danke: ruhiger, Wichtig: mit Kante in Notfallrot */
  .aktuell--danke { background: var(--alba-bernstein-zart); }
  .aktuell--wichtig { box-shadow: inset 0 4px 0 var(--alba-notfall); }
  .aktuell--wichtig .aktuell__art { color: var(--alba-notfall); }

  @media (max-width: 760px) {
    .aktuell__raster { grid-template-columns: auto minmax(0, 1fr); }
    .aktuell__raster > .tasten { grid-column: 1 / -1; }
  }
  @media (max-width: 620px) {
    .aktuell__bild { width: 72px; }
  }

  /* =======================================================================
     Weg: Stationen auf einer Linie, am Ende das Ziel
     ======================================================================= */
  .weg { padding-block: var(--takt-l) var(--takt-xl); }
  .weg__kopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--takt-s) var(--takt-l);
    align-items: end;
    margin-block-end: var(--takt-l);
  }
  .weg__kopf h2, .weg__kopf p { margin: 0; }

  .strecke { position: relative; display: flex; gap: var(--takt-m); }
  .strecke::before {
    content: "";
    position: absolute;
    left: 22px; right: 17px; top: 21px;
    height: 2px;
    background: var(--alba-weg);
  }
  .halt { position: relative; flex: 1 1 0; min-width: 0; padding-top: 66px; }
  .halt__punkt {
    position: absolute;
    left: 0; top: 0;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--alba-bernstein);
    color: var(--alba-dunkel);
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: 0 0 0 6px var(--weg-grund, var(--alba-papier));
  }
  .frame-sand { --weg-grund: var(--alba-sand); }
  .halt h3 { font-size: 1.25rem; margin: 0 0 0.3em; }
  .halt p { font-size: 0.97rem; margin: 0; }
  .ziel { position: relative; flex: 0 0 34px; }
  .ziel .halt__punkt {
    top: 5px;
    width: 34px; height: 34px;
    background: var(--alba-dunkel);
    color: var(--alba-papier);
  }
  .ziel svg { width: 18px; height: 18px; }
  .weg .tasten { margin-block-start: var(--takt-m); }

  @media (max-width: 760px) {
    .weg__kopf { grid-template-columns: minmax(0, 1fr); }
    .strecke { flex-direction: column; }
    .strecke::before { left: 21px; right: auto; top: 22px; bottom: 17px; width: 2px; height: auto; }
    .halt { padding: 6px 0 0 66px; }
    .ziel { flex-basis: 34px; margin-left: 5px; }
    .ziel .halt__punkt { top: 0; }
  }

  /* =======================================================================
     Kacheln: Helfen
     ======================================================================= */
  .kacheln { padding-block: var(--takt-l); }
  .kacheln__vorspann { max-width: 60ch; }
  .kacheln__raster {
    display: grid;
    /* Erste Kachel breiter, die uebrigen teilen sich den Rest - egal ob
       zwei, drei oder vier Seiten ausgewaehlt sind. */
    grid-template-columns: minmax(0, 1.25fr);
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: clamp(16px, 2vw, 28px);
    margin-block-start: var(--takt-m);
  }
  .kachel {
    display: flex;
    flex-direction: column;
    padding: var(--takt-s);
    border: 1px solid var(--alba-weg);
  }
  .kachel h3 { margin: 0 0 0.3em; }
  .kachel p { font-size: 0.96rem; margin: 0 0 var(--takt-s); }
  .kachel .knopf { margin-top: auto; align-self: flex-start; }
  .kachel__betrag {
    display: block;
    margin: 0 0 0.35em;
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.1rem);
    line-height: 1;
    color: var(--alba-bernstein-tinte);
  }

  /* Dunkel: die eine dunkle Flaeche der Startseite */
  .kacheln--dunkel { background: var(--alba-dunkel); color: var(--alba-sand); }
  .kacheln--dunkel h2 { color: var(--alba-bernstein-hell); }
  .kacheln--dunkel h3 { color: var(--alba-papier); }
  .kacheln--dunkel .kachel__betrag { color: var(--alba-bernstein-hell); }
  .kacheln--dunkel .knopf--rahmen { border-color: var(--alba-sand); color: var(--alba-sand); }
  .kacheln--dunkel .knopf--rahmen:hover { background: var(--alba-sand); color: var(--alba-dunkel); }
  .kacheln--dunkel :focus-visible { outline-color: var(--alba-bernstein-hell); }

  /* Hell: Karten auf Papier */
  .kacheln--hell .kachel { background: var(--alba-papier); }

  @media (max-width: 980px) {
    .kacheln__raster { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
    .kacheln__raster > :first-child { grid-column: 1 / -1; }
  }
  @media (max-width: 620px) {
    .kacheln__raster { grid-template-columns: minmax(0, 1fr); }
  }

  /* =======================================================================
     Zahlen
     ======================================================================= */
  .zahlenblock { padding-block: var(--takt-s); }
  .zahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--takt-s);
    padding-block-start: var(--takt-s);
    border-top: 1px solid var(--alba-weg);
  }
  .zahlen b {
    display: block;
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem);
    line-height: 1;
    color: var(--alba-altgold);
  }
  .zahlen span { font-size: 0.88rem; color: var(--alba-leise); }
  @media (max-width: 620px) {
    .zahlen { grid-template-columns: 1fr 1fr; }
  }

  /* =======================================================================
     Kontaktband
     ======================================================================= */
  .kontaktband { background: var(--alba-sand); border-top: 1px solid var(--alba-weg); padding-block: var(--takt-l); }
  .kontaktband__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--takt-m) var(--takt-l);
  }
  .kontaktdaten { border-top: 1px solid var(--alba-weg); align-self: start; }
  .kontaktdaten li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 14px;
    padding: 0.7em 0;
    border-bottom: 1px solid var(--alba-linie);
  }
  .kontaktdaten b {
    flex: none;
    min-width: 6.5em;
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--alba-leise);
  }
  .kontaktdaten a { font-weight: 600; }
  @media (max-width: 760px) {
    .kontaktband__raster { grid-template-columns: minmax(0, 1fr); }
  }

  /* =======================================================================
     Tiere: Suche als Seitenleiste, Raster daneben
     ======================================================================= */
  .tiere { padding-block: var(--takt-l) var(--takt-xl); }
  .tiere__layout {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: var(--takt-m) var(--takt-l);
    align-items: start;
  }
  @media (min-width: 981px) {
    .tiere__seite { position: sticky; top: calc(var(--qn-ankerabstand, 68px) + 20px); }
  }
  .tiere__ergebnis { min-width: 0; }
  .tiere__kopf {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 24px;
    margin-block-end: var(--takt-m);
    padding-block-end: var(--takt-s);
    border-bottom: 1px solid var(--alba-weg);
  }
  .tiere__kopf h2 { margin: 0; }
  .tiere__kopf h2:focus { outline: none; }
  .tiere__auswahl, .tiere__legende { margin: 0; font-size: 0.9rem; color: var(--alba-leise); }
  .tiere__legende { margin-block-start: var(--takt-s); }

  .tiere__raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
  }

  /* ----- Suche --------------------------------------------------------- */
  .suche { background: var(--alba-sand); border: 1px solid var(--alba-weg); padding: clamp(18px, 2vw, 24px); }
  .suche h2 { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.5rem); margin: 0 0 0.75em; }
  .suche__felder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .suche__titel { display: block; margin: 0 0 5px; padding: 0; font-size: 0.95rem; }
  .suche__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-block-start: 18px;
    padding-block-start: 14px;
    border-top: 1px solid var(--alba-weg);
  }
  .treffer { margin: 0 auto 0 0; font-size: 0.95rem; color: var(--alba-tinte); }
  .treffer b { font-family: var(--alba-anzeige); font-size: 1.25rem; color: var(--alba-altgold); }

  /* Pillen: das Eingabefeld liegt unsichtbar UEBER der Pille - so bleibt
     es fuer Tastatur und Vorlesesoftware das echte Feld. */
  .wahl { display: flex; flex-wrap: wrap; gap: 6px; }
  .wahl label { position: relative; display: inline-block; font-family: var(--alba-text); font-weight: 400; }
  .wahl input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .wahl span {
    display: inline-block;
    padding: 0.45em 0.95em;
    border: 1px solid var(--alba-weg);
    border-radius: 999px;
    background: var(--alba-papier);
    color: var(--alba-tinte);
    font-size: 0.92rem;
    line-height: 1.3;
  }
  .wahl input:checked + span { background: var(--alba-bernstein); border-color: var(--alba-bernstein-tinte); color: var(--alba-dunkel); font-weight: 600; }
  .wahl input:focus-visible + span { outline: 2px solid var(--alba-bernstein-tinte); outline-offset: 2px; }

  /* ----- Karte --------------------------------------------------------- */
  .tier { min-width: 0; }
  .tier__karte {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--alba-papier);
    border: 1px solid var(--alba-weg);
  }
  .tier__bild { position: relative; margin: 0; background: var(--alba-sand); }
  .tier__bild img { width: 100%; aspect-ratio: 1; object-fit: cover; }
  .tier__platzhalter {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    color: var(--alba-weg);
  }
  .tier__platzhalter svg { width: 30%; height: auto; opacity: 0.45; }
  .tier__status {
    position: absolute;
    left: 0; top: 0;
    margin: 0;
    padding: 0.35em 0.75em;
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--alba-notfall);
    color: var(--alba-papier);
  }
  .tier__status--pate { background: var(--alba-bernstein); color: var(--alba-dunkel); }

  .tier__text { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
  .tier h3 { font-size: 1.32rem; margin: 0 0 0.12em; }
  .tier h3 a { color: var(--alba-tinte); text-decoration: none; }
  .tier h3 a:hover { text-decoration: underline; }
  .tier__daten { margin: 0 0 0.5em; font-size: 0.9rem; color: var(--alba-leise); }
  .tier__satz { margin: 0.2em 0 0.7em; font-size: 1rem; color: var(--alba-tinte); }
  .tier__zeile { display: flex; align-items: flex-start; gap: 7px; margin: 0 0 0.3em; font-size: 0.9rem; }
  .flagge { width: 19px; height: 13px; flex: none; margin-top: 0.3em; border-radius: 2px; box-shadow: 0 0 0 1px var(--alba-weg); }
  .symbol { width: 15px; height: 15px; flex: none; margin-top: 0.25em; color: var(--alba-bernstein-tinte); display: inline-block; vertical-align: -0.15em; }
  .tier__merkmale { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.6em 0 0; }
  .tier__merkmale li { padding: 0.15em 0.55em; border: 1px solid var(--alba-weg); font-size: 0.8rem; }
  .tier__mehr { display: inline-block; margin-top: auto; padding-top: 0.7em; font-size: 0.9rem; font-weight: 600; }

  /* Der Notfall breit: Bild links, Text rechts */
  .tier--breit { grid-column: span 2; }
  .tier--breit .tier__karte { flex-direction: row; }
  .tier--breit .tier__bild { flex: 0 0 54%; }
  .tier--breit .tier__bild img,
  .tier--breit .tier__platzhalter { height: 100%; aspect-ratio: auto; min-height: 260px; }
  .tier--breit .tier__text { padding: 20px 22px; }
  .tier--breit h3 { font-size: 1.6rem; }

  .tiere__weiter {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(18px, 2.4vw, 30px);
    background: var(--alba-sand);
    border: 1px solid var(--alba-weg);
  }
  .tiere__weiter h3 { font-size: 1.4rem; }
  .tiere__weiter p { max-width: 60ch; }
  .tiere__leer { margin-block-start: var(--takt-s); padding: var(--takt-s); background: var(--alba-sand); border: 1px dashed var(--alba-weg); }

  @media (max-width: 980px) {
    .tiere__layout { grid-template-columns: minmax(0, 1fr); }
    .suche__felder { grid-template-columns: 1fr 1fr; }
    .suche__art, .suche__mit, .suche__text { grid-column: 1 / -1; }
  }
  @media (max-width: 620px) {
    .tiere__raster { grid-template-columns: minmax(0, 1fr); }
    .tier--breit, .tiere__weiter { grid-column: auto; }
    .tier--breit .tier__karte { flex-direction: column; }
    .tier--breit .tier__bild { flex: none; }
    .tier--breit .tier__bild img,
    .tier--breit .tier__platzhalter { aspect-ratio: 1; min-height: 0; height: auto; }
    .suche__felder { grid-template-columns: minmax(0, 1fr); }
    .suche__felder > * { grid-column: auto; }
  }
  /* =======================================================================
     Tiere aus qn_animals: Liste und Profil
     -------------------------------------------------------------------
     Die Plugins bringen ihre Bahn (.qn-breite) selbst mit - der Rahmen
     drumherum braucht keinen Innenabstand.
     ======================================================================= */
  .qn-inhalt > .frame[class*="frame-type-qnanimals_"] { padding: 0; }

  .tier__status--reserviert { background: var(--alba-weg); color: var(--alba-papier); }

  /* Ohne Suche (Glueckspfoten, Regenbogenbruecke): volle Breite, drei Spalten */
  .tiere--ohne-suche .tiere__layout { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 981px) {
    .tiere--ohne-suche .tiere__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tiere--ohne-suche .tier--breit, .tiere--ohne-suche .tiere__weiter { grid-column: span 3; }
  }

  /* Waehrend tiere.js nachlaedt */
  .tiere[aria-busy="true"] .tiere__raster { opacity: 0.55; transition: opacity 0.2s; }

  /* Mit Live-Suche braucht der Desktop keinen Knopf */
  @media (min-width: 981px) {
    .suche[data-live] .suche__los { display: none; }
  }

  /* ----- Suche kompakt in der Seitenleiste (23.10.2026) ------------------
     Die Leiste klebt neben den Tieren. War sie hoeher als das Fenster
     (gemessen 820 px bei 791 px Fensterhoehe), kam ihr unteres Ende erst
     am Ende der Liste ins Bild. Jetzt 535 px:
     - Auswahllisten als Zeile: Beschriftung links, Feld rechts. 5.6em
       Beschriftung ("Groesse (Hunde)" einzeilig), das Feld behaelt Platz
       fuer den laengsten Eintrag ("Warten am laengsten").
     - Pillen im Raster zu dritt, "schon in Deutschland" ueber die Breite.
     - Leiste 320 statt 300 px breit.
     Nur ab 981 px - darunter steht die Suche ueber dem Raster und
     braucht die grossen Tippflaechen. Rueckweg: diesen Block entfernen. */
  @media (min-width: 981px) {
    .tiere__layout { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); }
    /* Sicherheitsnetz fuer niedrige Fenster: dann scrollt die Leiste in sich */
    .tiere__seite {
      max-height: calc(100vh - var(--qn-ankerabstand, 68px) - 40px);
      overflow-y: auto;
      scrollbar-width: thin;
    }
    .tiere__seite .suche { padding: 16px 18px; }
    .tiere__seite .suche h2 { font-size: 1.25rem; margin: 0 0 0.55em; }
    .tiere__seite .suche__felder { gap: 10px; }
    .tiere__seite .suche__titel { font-size: 0.9rem; margin: 0 0 4px; }

    .tiere__seite .suche .feld:not(.suche__text) {
      display: grid;
      grid-template-columns: 5.6em minmax(0, 1fr);
      align-items: center;
      gap: 10px;
    }
    .tiere__seite .suche .feld:not(.suche__text) > .suche__titel { margin: 0; }
    .tiere__seite .suche select,
    .tiere__seite .suche input[type="search"] {
      min-height: 36px;
      padding: 0.3em 0.5em;
      font-size: 0.88rem;
    }

    .tiere__seite .suche .wahl {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
    .tiere__seite .suche .wahl label { display: block; }
    .tiere__seite .suche .wahl span {
      display: block;
      padding: 0.32em 0.3em;
      text-align: center;
      font-size: 0.86rem;
    }
    .tiere__seite .suche__mit .wahl label:last-child { grid-column: 1 / -1; }

    .tiere__seite .suche__fuss { margin-block-start: 12px; padding-block-start: 10px; }
  }
  .tiere__auswahl a { color: inherit; }
  .tiere__mehr { margin-block-start: var(--takt-m); }

  /* Jahre der Glueckspfoten: Pillen als Links */
  .jahre { margin-block: 0 var(--takt-m); }
  .jahre .wahl a { text-decoration: none; }
  .jahre .wahl a span {
    display: inline-block;
    padding: 0.45em 0.95em;
    border: 1px solid var(--alba-weg);
    border-radius: 999px;
    background: var(--alba-papier);
    color: var(--alba-tinte);
    font-size: 0.92rem;
  }
  .jahre .wahl a:hover span { border-color: var(--alba-bernstein-tinte); }
  .jahre .wahl a[aria-current] span { background: var(--alba-bernstein); border-color: var(--alba-bernstein-tinte); color: var(--alba-dunkel); font-weight: 600; }
  .jahre__zahlen { margin: 0.8em 0 0; font-size: 0.9rem; color: var(--alba-leise); }

  /* Seitenzahlen */
  .seiten { margin-block-start: var(--takt-m); }
  .seiten ul { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .seiten a, .seiten span[aria-current] {
    display: inline-grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.6em;
    border: 1px solid var(--alba-weg);
    border-radius: var(--qn-radius);
    text-decoration: none;
    color: var(--alba-tinte);
    background: var(--alba-papier);
  }
  .seiten a:hover { border-color: var(--alba-bernstein-tinte); }
  .seiten span[aria-current] { background: var(--alba-bernstein); border-color: var(--alba-bernstein-tinte); font-weight: 600; }

  /* ----- Profil ---------------------------------------------------------- */
  .profil__kopf h1 { max-width: none; }
  .profil__marke {
    display: inline-block;
    margin: 0.9em 0 0;
    padding: 0.35em 0.75em;
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--alba-notfall);
    color: var(--alba-papier);
  }
  .profil__marke--reserviert { background: var(--alba-weg); }
  .profil__marke--pate { background: var(--alba-bernstein); color: var(--alba-dunkel); }

  .profil__raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--takt-m) var(--takt-l);
    padding-block: var(--takt-m) var(--takt-xl);
  }
  @media (min-width: 981px) {
    .profil__raster { grid-template-columns: minmax(0, 1fr) minmax(300px, 22rem); align-items: start; }
    .profil__rand { position: sticky; top: calc(var(--qn-ankerabstand, 68px) + 20px); }
  }
  .profil__haupt > * + * { margin-block-start: var(--takt-m); }
  .profil__rand { display: grid; gap: var(--takt-s); }

  /* Wichtiger Hinweis: das, was frueher ein Popup werden sollte */
  .hinweis {
    padding: var(--takt-s);
    background: var(--alba-bernstein-zart);
    border-left: 4px solid var(--alba-bernstein);
  }
  .hinweis--stark { background: #FBEDE7; border-left-color: var(--alba-notfall); }
  .hinweis__titel {
    margin: 0 0 0.4em;
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--alba-bernstein-tinte);
  }
  .hinweis--stark .hinweis__titel { color: var(--alba-notfall); }

  .profil__band { padding: var(--takt-s); background: var(--alba-sand); border: 1px solid var(--alba-weg); }
  .profil__band h2 { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.9rem); margin: 0 0 0.3em; }
  .profil__band--glueck { border-top: 4px solid var(--alba-bernstein); }
  .profil__datum { font-size: 0.9rem; color: var(--alba-leise); }

  /* Bilder: das erste gross, die uebrigen als Reihe darunter */
  .galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .galerie__bild { display: block; background: var(--alba-sand); }
  .galerie__bild img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
  .galerie__bild--gross { grid-column: 1 / -1; }
  .galerie__bild:focus-visible { outline-offset: 2px; }
  .galerie--leer { display: block; background: var(--alba-sand); }
  @media (max-width: 620px) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .profil__text { max-width: 72ch; }
  .profil__text h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
  .profil__text ul, .profil__text ol { padding-inline-start: 1.25em; margin-block-end: 1em; }

  /* Kaesten in der Randspalte */
  .profil__box { padding: var(--takt-s); background: var(--alba-papier); border: 1px solid var(--alba-weg); }
  .profil__box h2 { font-size: 1.3rem; margin: 0 0 0.6em; }
  .profil__box .tasten { margin-block-start: 0.8em; }
  .profil__weiter { background: var(--alba-sand); }
  .profil__klein { margin: 0.8em 0 0; font-size: 0.85rem; color: var(--alba-leise); }

  .steckbrief__wo { margin: 0 0 0.8em; }
  .steckbrief dl { margin: 0; border-top: 1px solid var(--alba-linie); }
  .steckbrief dl > div {
    display: grid;
    grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
    gap: 10px;
    padding: 0.45em 0;
    border-bottom: 1px solid var(--alba-linie);
    font-size: 0.93rem;
  }
  .steckbrief dt { color: var(--alba-leise); }
  .steckbrief dd { margin: 0; color: var(--alba-tinte); font-weight: 600; }

  .kontaktkarte__person { display: flex; align-items: center; gap: 14px; margin-block-end: 0.6em; }
  .kontaktkarte__foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
  .kontaktkarte .kontaktdaten li { padding: 0.5em 0; }
  .kontaktkarte .kontaktdaten b { min-width: 5em; }

  .teilen__liste { display: flex; flex-wrap: wrap; gap: 8px; }
  .teilen__liste .knopf { min-height: 40px; padding: 0.5em 1em; font-size: 0.92rem; }
  .teilen__meldung { margin: 0.6em 0 0; font-size: 0.88rem; color: var(--alba-leise); }
  .teilen__meldung:empty { display: none; }

  /* Video mit Vorschaubild, Player erst nach Klick */
  .video { margin: 0 0 var(--takt-s); }
  .video__start {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: var(--alba-dunkel);
    cursor: pointer;
  }
  .video__start img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; opacity: 0.85; }
  .video__knopf {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.7em 1.3em;
    border-radius: var(--qn-radius);
    background: var(--alba-bernstein);
    color: var(--alba-dunkel);
    font-family: var(--alba-anzeige);
    font-weight: 600;
  }
  .video__dreieck { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
  .video__start:hover .video__knopf { background: var(--alba-bernstein-2); }
  .video__player, .video video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--alba-dunkel); }
  .video__hinweis { margin-top: 0.5em; font-size: 0.85rem; color: var(--alba-leise); }

}

/* =========================================================================
   Cookie-Einwilligung (qn_cookie_consent) in Alba-Farben
   -------------------------------------------------------------------------
   BEWUSST AUSSERHALB von @layer: Die Extension bindet ihr CSS ungeschichtet
   ein, und ungeschichtetes CSS schlaegt jede Ebene. Deshalb hier ebenfalls
   ungeschichtet und ueber die IDs der Extension - das wirkt unabhaengig
   davon, ob deren Datei davor oder danach geladen wird.
   Primaerfarbe Altgold statt Bernstein: Die Extension setzt weisse Schrift
   auf die Knoepfe, auf Bernstein waere das kaum lesbar (2,3 : 1).
   ========================================================================= */
#qn-cookie-consent,
#qn-cookie-consent-trigger {
  --qn-cc-primary: #8C5E17;
  --qn-cc-primary-hover: #6E4A12;
  --qn-cc-primary-rgb: 140, 94, 23;
  --qn-cc-secondary: #6B4F36;
  --qn-cc-secondary-hover: #3A2C20;
  --qn-cc-accent: #E29B2E;
  --qn-cc-bg: #FFFBF4;
  --qn-cc-bg-secondary: #F8EEDF;
  --qn-cc-text: #2B2620;
  --qn-cc-text-muted: #6E5E4E;
  --qn-cc-border: #9C8A6B;
  --qn-cc-border-radius: 8px;
  --qn-cc-shadow: 0 -10px 40px -18px rgba(58, 44, 32, 0.45);
  --qn-cc-backdrop: rgba(44, 33, 24, 0.55);
}
#qn-cookie-consent h2 { font-family: "Alegreya", Georgia, serif; color: #8C5E17; }

/* Der Hundekeks unten links: heller Teller, Kante im Ton des Wegs.
   Beim Ueberfahren wackelt er kurz - nur, wer Bewegung nicht abgeschaltet hat. */
#qn-cookie-consent-trigger.qn-cc-trigger--bild {
  width: 3.5rem;
  height: 3.5rem;
  background: #FFFBF4;
  border: 1px solid #9C8A6B;
  box-shadow: 0 6px 18px -6px rgba(58, 44, 32, 0.45);
}
#qn-cookie-consent-trigger.qn-cc-trigger--bild:hover { transform: none; }
#qn-cookie-consent-trigger.qn-cc-trigger--bild:focus-visible { outline: 3px solid #95661E; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  #qn-cookie-consent-trigger.qn-cc-trigger--bild:hover .qn-cc-trigger__bild { animation: alba-keks 0.5s ease-in-out; }
}
@keyframes alba-keks {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-12deg); }
  65% { transform: rotate(8deg); }
}


/* =========================================================================
   Formulare (EXT:form) - Kontakt und spaetere Formulare (23.10.2026)
   -------------------------------------------------------------------------
   Klassen setzt Configuration/Form/Alba/config.yaml, das Markup ist das des
   Cores (bis auf Field, Required, Confirmation). Grundwerte fuer Felder,
   Beschriftungen und Fokus stehen schon in alba-grund.css ("Formulare").
   Entwurf: unterseite-kontakt.html - Hinweis ueber dem Feld, "Pflichtfeld"
   als Wort, Fehler mit Zeichen und Klartext (nicht nur Farbe).
   ========================================================================= */
@layer qn.theme {

  form:has(.formular__feld) { container-type: inline-size; max-width: 46rem; }

  .formular__legende { margin: 0 0 var(--takt-s); font-size: 0.95rem; color: var(--alba-leise); }

  .formular__gruppe { margin: 0 0 var(--takt-m); padding: 0; }
  .formular__gruppe > legend {
    margin: 0 0 0.6em;
    padding: 0;
    font-size: var(--qn-groesse-h3);
    color: var(--alba-tinte);
  }

  /* Raster: untereinander, ab 36rem Formularbreite zwei Spalten */
  .formular__reihe { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--takt-s); }
  @container (min-width: 36rem) {
    .formular__reihe { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .formular__reihe > * { grid-column: span 12; }
    .formular__reihe > .formular__m4 { grid-column: span 4; }
    .formular__reihe > .formular__m6 { grid-column: span 6; }
    .formular__reihe > .formular__m8 { grid-column: span 8; }

    /* Eingabefelder nebeneinander auf einer Hoehe - egal wie lang
       Beschriftung oder Hinweis sind (23.10.2026). Jede Reihe hat vier
       gemeinsame Zeilen: Beschriftung | Hinweis | Feld | Fehler. Spalte
       und Feld reichen sie per Subgrid durch, jedes Teil sitzt fest in
       seiner Zeile - fehlt der Hinweis, bleibt die Zeile trotzdem frei.
       Ohne Subgrid-Unterstuetzung: Felder stehen wie vorher untereinander
       im Fluss, nur nicht buendig. */
    @supports (grid-template-rows: subgrid) {
      .formular__reihe > *,
      .formular__reihe .formular__feld {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 4;
      }
      .formular__reihe .formular__label   { grid-row: 1; align-self: end; }
      .formular__reihe .formular__hinweis { grid-row: 2; }
      .formular__reihe .formular__eingabe { grid-row: 3; }
      .formular__reihe .formular__fehler  { grid-row: 4; }
    }
  }

  /* ----- Feld ---------------------------------------------------------- */
  .formular__feld { margin: 0 0 1.25rem; }
  .formular__label { display: block; margin: 0 0 0.2em; }

  .formular__pflicht {
    display: inline-block;
    margin-inline-start: 0.5em;
    padding: 0.05em 0.55em;
    border: 1px solid var(--alba-linie);
    border-radius: 999px;
    background: var(--alba-bernstein-zart);
    font-family: var(--alba-text);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--alba-bernstein-tinte);
    vertical-align: 0.15em;
  }

  .formular__hinweis {
    display: block;
    margin: 0 0 0.45em;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--alba-leise);
  }

  /* ----- Fehler: Zeichen + Klartext ------------------------------------ */
  .formular--fehler .formular__eingabe,
  .formular__eingabe[aria-invalid="true"] {
    border-color: var(--alba-notfall);
    box-shadow: 0 0 0 1px var(--alba-notfall);
  }
  .formular__fehler {
    display: flex;
    gap: 0.45em;
    margin-block-start: 0.4em;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--alba-notfall);
  }
  .formular__fehler::before { content: "\2715" / ""; flex: none; }

  /* ----- Ankreuzen: Rueckruf und Einverstaendnis ----------------------- */
  .formular__gruppe--auswahl [role="radiogroup"] { display: flex; flex-direction: column; gap: 0.15em; }
  .formular__kreuz {
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    min-height: 44px;
    padding: 0.35em 0;
    font-family: var(--alba-text);
    font-weight: 400;
    color: var(--alba-tinte);
    cursor: pointer;
  }
  .formular__kreuz label { font-family: var(--alba-text); font-weight: 400; cursor: pointer; }
  .formular__kreuz input {
    flex: none;
    width: 1.3em;
    height: 1.3em;
    margin: 0.15em 0 0;
    accent-color: var(--alba-bernstein-tinte);
    cursor: pointer;
  }
  .formular--fehler .formular__kreuz input { outline: 2px solid var(--alba-notfall); outline-offset: 2px; }
  .formular__feld--zustimmung { margin-block-end: 0.4rem; }
  .formular__feld--zustimmung .formular__kreuz label { max-width: 62ch; }
  .formular__feld--zustimmung .formular__hinweis,
  .formular__feld--zustimmung .formular__fehler { margin-inline-start: 2em; }
  .formular__klein { margin: 0 0 var(--takt-s) 2em; font-size: 0.9rem; color: var(--alba-leise); }

  /* ----- Patentier: Tierkarte im Patenschaftsantrag (26.10.2026) -------
     Element "Patentier" aus qn_animals. Bild links, Name gross daneben -
     man sieht auf einen Blick, fuer wen man unterschreibt. Unter 26rem
     Formularbreite steht das Bild kleiner, die Zeile bleibt nebeneinander. */
  .patentier {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0.6rem 1rem;
    align-items: center;
    margin: 0 0 1.25rem;
    padding: 0.75rem;
    border: 1px solid var(--alba-linie);
    border-left: 4px solid var(--alba-bernstein);
    border-radius: var(--qn-radius);
    background: var(--alba-sand);
  }
  .patentier--ohne { grid-template-columns: minmax(0, 1fr); border-left-color: var(--alba-notfall); }
  .patentier__bild { margin: 0; }
  .patentier__bild img,
  .patentier__bild .tier__platzhalter {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: calc(var(--qn-radius) / 2);
    background: var(--alba-papier);
  }
  .patentier__text > * { margin: 0; }
  .patentier__titel { font-size: 0.85rem; color: var(--alba-leise); }
  .patentier__name {
    font-family: var(--alba-anzeige);
    font-size: var(--qn-groesse-h3);
    font-weight: 600;
    line-height: 1.2;
    color: var(--alba-tinte);
  }
  .patentier__daten { margin-block-start: 0.15em; color: var(--alba-tinte); }
  .patentier__klein { margin-block-start: 0.3em; font-size: 0.9rem; color: var(--alba-leise); }
  .patentier__wege { margin-block-start: 0.5em; font-size: 0.9rem; }
  .patentier .formular__fehler { grid-column: 1 / -1; margin: 0; }
  @container (max-width: 26rem) {
    .patentier { grid-template-columns: 5.5rem minmax(0, 1fr); }
  }

  /* ----- Absenden ------------------------------------------------------ */
  .formular__abschluss { margin-block-start: var(--takt-s); }

  /* ----- Dankmeldung --------------------------------------------------- */
  .formular__danke {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 46rem;
    padding: var(--takt-s);
    border-left: 4px solid var(--alba-bernstein);
    border-radius: var(--qn-radius);
    background: var(--alba-sand);
  }
  .formular__danke:focus { outline: none; }
  .formular__danke-zeichen { flex: none; width: 2.2rem; height: 2.2rem; color: var(--alba-bernstein-tinte); }
  .formular__danke-text { color: var(--alba-tinte); }
  .formular__danke-text > * + * { margin-block-start: 0.5em; }

  /* ----- Hinweis nach Sperre (qn_form_shield, p.qf-schild) --------------
     Steht direkt VOR dem <form>. Ton: Hinweis, kein Fehler - meist war es
     nur die Zurueck-Taste oder ein Doppelklick. */
  .qf-schild {
    max-width: 46rem;
    margin: 0 0 var(--takt-s);
    padding: 0.9em 1.1em;
    border-left: 4px solid var(--alba-weg);
    border-radius: var(--qn-radius);
    background: var(--alba-sand);
    color: var(--alba-tinte);
  }
  .qf-schild--zuviel { border-left-color: var(--alba-bernstein); }

  /* ----- Honigtopf: fuer Menschen und Vorlesesoftware unsichtbar ------- */
  .formular__falle {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ----- Windows-Kontrastmodus ----------------------------------------- */
  @media (forced-colors: active) {
    .formular__pflicht { border-color: CanvasText; }
    .formular__eingabe[aria-invalid="true"] { outline: 2px solid Highlight; }
  }

  /* =======================================================================
     Dateiliste (CType uploads, Vorlage ContentElements/Uploads.html)
     Mikrodesign Baustein 10, 26.10.2026
     ======================================================================= */
  .dateien { list-style: none; padding: 0; margin: 0; max-width: 46rem; border-top: 1px solid var(--alba-weg); }
  .dateien .datei { display: block; padding: 0; border-bottom: 1px solid var(--alba-linie); }
  .datei__link {
    display: flex;
    align-items: center;
    gap: 0.9em;
    min-height: 44px;
    padding: 0.7em 0.4em;
    color: var(--alba-tinte);
    text-decoration: none;
    transition: background-color 0.15s;
  }
  .datei__link:hover { background: var(--alba-bernstein-zart); color: var(--alba-tinte); }
  .datei__link:hover .datei__name { color: var(--alba-altgold); text-decoration: underline; text-decoration-color: var(--alba-bernstein); text-underline-offset: 0.2em; }
  .datei__typ {
    flex: none;
    min-width: 3.2em;
    padding: 0.3em 0.45em;
    border: 1px solid var(--alba-weg);
    border-radius: 4px;
    background: var(--alba-papier);
    font-family: var(--alba-anzeige);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-align: center;
    color: var(--alba-bernstein-tinte);
  }
  .datei__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.15em; }
  .datei__name { font-weight: 600; overflow-wrap: anywhere; }
  .datei__info { font-size: 0.88rem; color: var(--alba-leise); }
  .datei__groesse { flex: none; font-size: 0.85rem; color: var(--alba-leise); font-variant-numeric: tabular-nums; white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) { .datei__link { transition: none; } }
  .frame-dunkel .datei__link { color: var(--alba-sand); }
  .frame-dunkel .datei__link:hover { background: var(--alba-dunkel-2); color: var(--alba-papier); }
  .frame-dunkel .datei__link:hover .datei__name { color: var(--alba-bernstein-hell); }
  .frame-dunkel .datei__info, .frame-dunkel .datei__groesse { color: var(--alba-linie); }
  .frame-dunkel .dateien .datei { border-bottom-color: var(--alba-weg); }

  /* =======================================================================
     Preise (CType layoutalba_preise) - Mikrodesign Baustein 9
     ======================================================================= */
  .preise { padding-block: var(--takt-m); }
  .preisliste { max-width: 40rem; margin: 0; border-top: 1px solid var(--alba-weg); }
  .preisliste > div {
    display: flex;
    align-items: baseline;
    gap: 0.6em 1em;
    padding: 0.6em 0;
    border-bottom: 1px solid var(--alba-linie);
  }
  .preisliste dt { font-weight: 600; color: var(--alba-tinte); }
  .preisliste dt small { display: block; font-weight: 400; font-size: 0.85em; color: var(--alba-leise); }
  .preisliste dd {
    margin: 0 0 0 auto;
    font-family: var(--alba-anzeige);
    font-weight: 600;
    font-size: 1.15em;
    color: var(--alba-altgold);
    white-space: nowrap;
  }
  .preise__text { max-width: var(--alba-lesebreite, 66ch); margin-block-start: var(--takt-s); font-size: 0.95rem; color: var(--alba-leise); }
  .frame-sand .preisliste > div { border-bottom-color: var(--alba-weg); }

  /* =======================================================================
     Rueckmeldung Verein (01.11.2026)
     Rueckweg: diesen Block entfernen (bzw. alba-bausteine.css.vor-rueckmeldung)
     ======================================================================= */

  /* Tierbilder QUADRATISCH (01.11.2026, Dirk): Karten, Glueckspfoten,
     Profil-Galerie, Paten-/Anfragekarte - vorher 4 : 3. Hochformat-Fotos
     verlieren so deutlich weniger. Passend dazu Tier/Karte.html,
     Animal/Show.html, Form/Partials/*tier.fluid.html und der Zuschnitt
     "Karte (1 : 1)" im TCA. Rueckweg: alba-bausteine.css.vor-quadrat
     ("aspect-ratio: 1" an den fuenf Tierstellen wieder "4 / 3").

     Liegt das Bild nicht schon fertig zugeschnitten vor
     (breite Notfallkarte: Hoehe 100 %), sitzt der Ausschnitt eher oben -
     Kopf vor Pfoten. Passt zum Server-Zuschnitt "c-40" in Tier/Karte.html. */
  .tier__bild img { object-position: 50% 30%; }

  /* Suche: Geschlecht und Besonderheiten wie Tierart/Vertraeglich */
  @media (max-width: 980px) {
    .suche__geschlecht, .suche__besonders { grid-column: 1 / -1; }
  }
  @media (max-width: 620px) {
    .suche__geschlecht, .suche__besonders { grid-column: auto; }
  }
  @media (min-width: 981px) {
    .tiere__seite .suche__besonders .wahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tiere__seite .suche__besonders .wahl label:last-child:nth-child(odd) { grid-column: 1 / -1; }
  }

  /* "Mehr Filter": seltene Angaben zugeklappt - die Leiste bleibt kurz,
     ohne eigenen Scrollbalken. Innen dasselbe Raster wie aussen. */
  .suche__mehr { grid-column: 1 / -1; border-top: 1px solid var(--alba-weg); padding-top: 10px; }
  .suche__mehr > summary {
    display: flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--alba-tinte);
  }
  .suche__mehr > summary::-webkit-details-marker { display: none; }
  .suche__mehr > summary::after {
    content: "";
    width: 0.5em; height: 0.5em;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
  }
  .suche__mehr[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
  .suche__mehr > summary:hover { color: var(--alba-bernstein-tinte); }
  .suche__mehr > summary:focus-visible { outline: 2px solid var(--alba-bernstein-tinte); outline-offset: 3px; }
  .suche__mehr-zahl { font-weight: 400; color: var(--alba-leise); }
  .suche__mehr > .suche__felder { margin-top: 12px; }
  @media (min-width: 981px) {
    .tiere__seite .suche__mehr > .suche__felder { margin-top: 10px; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .suche__mehr > summary::after { transition: transform 0.15s ease; }
  }

  /* Aktuell aus den Meldungen: mehrere Meldungen untereinander im Band */
  .aktuell--meldungen .aktuell__raster + .aktuell__raster { border-top: 1px solid var(--alba-weg); }
  .aktuell__anriss { margin: 0; max-width: 70ch; }
}