/* ==========================================================================
   ai-credit.css — AI image-disclosure badge (EU AI Act)

   The badge is overlaid via CSS and never baked into the JPG, so the label
   survives every object-fit: cover crop at any viewport ratio.

   Placed bottom-left of the image, optically flush with the text above it
   (H1 / .contact-card__title). Deliberately subordinate — the hero copy stays
   the focus. Uses existing tokens only; defines no new colours.
   ========================================================================== */

.hero,
.contact-card__intro {
  position: relative;

  /* Rendered height of the badge artwork. Both files are 210px high, so at the
     display widths below they land on the same rendered height and one token
     covers both: 316 × 210 / 758 = 87.6 and 388 × 210 / 930 = 87.6, rounded 88.
     Used to reserve space for the copy above. */
  --ai-badge-h: 88px;
  --ai-badge-gap: 28px;

  /* Reserved clearance for the nav pill, deliberately generous.
     Corrected on 22 August 2026: the previous note here claimed --nav-height was
     the pill's min-height and that 8px of block padding grew it to 80px. Neither
     is true. The pill carries NO min-height at all (see the note on .nav-pill in
     styles.css), its block padding is 10px, and it renders at 63px at 1500px wide.
     The 80px stay: over-reserving costs nothing but a little space above the
     badge, while under-reserving would slide the disclosure under the pill. The
     value is a safety margin, not a measurement. */
  --ai-pill-h: 80px;
}

.ai-credit-badge {
  position: absolute;
  z-index: 3;

  /* The lettering inside the artwork is about 16px tall at this width, the same
     size as the page body copy, so it must not be scaled down without reason.
     Enlarged by a quarter on 21 August 2026: at the previous 253px the lettering
     was only ~13px and the disclosure read as if it were meant to be hidden.
     Width, height and text inset scale together — changing one alone breaks the
     alignment below.
     There are TWO sizes, not one: below 600px the badge falls back to the smaller
     set, see the small-screens block at the end of this file. The comment here
     claimed "one size at every viewport" until 22 August 2026, which the same
     file contradicted further down. */
  width: 316px; /* de */
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;

  /* The artwork carries transparent padding around the lettering, so the file
     edge is NOT the text edge. Careful: the label sets its first words
     ("Kopf:" / "Concept:") at 55% opacity (alpha 140) and only the emphasised
     words at full white — so the ink starts well before the first opaque
     pixel. Measuring with an alpha threshold above 140 finds the wrong column
     and puts the badge ~10px too far left.

     Re-measured per column from the delivered WebP files on 21 August 2026,
     alpha ≥ 100: the first lettering appears at 120/758 (de) = 15.83% and
     118/930 (en) = 12.69%. That is a PROPORTION, not a fixed value, which is
     why the inset has to scale with the width. At 316/388px it comes to 50.0px
     (de) and 49.2px (en), i.e. ~50px in BOTH languages. Pulling the element
     left by that amount puts the visible text on the same axis as the copy
     above it. The transparent overhang is clipped by the overflow:hidden on
     .hero/.contact-card.

     The ~50px is then reduced by the left side bearing of the heading above,
     so the two runs of lettering line up OPTICALLY rather than box-to-box:
     Manrope's "M" starts 2px (40px type) to 4px (64px type) right of its own
     box, the contact "S"/"L" 1–2px. The bearing depends on the heading size,
     not on the badge, so it does NOT scale with the width. Using the mid value
     per section keeps the residual under ~1px at every breakpoint. */
  --ai-text-inset: 47px; /* 50 − ~3px bearing of the hero H1 */
}

/* English artwork is wider at the same rendered height (same text inset). */
.ai-credit-badge--en {
  width: 388px;
}

/* --- Left edge: lettering on the same vertical axis as the copy above ----- */

/* Hero: liest den linken Einzug des Hero-Textblocks aus --hero-pad.
   Bis zum 4. September 2026 standen hier die drei Zahlen 24, 56 und 80 als
   Literale, dazu dieselben drei ein zweites Mal in styles.css. Verbunden waren
   sie allein durch einen Kommentar, und die beiden Haltepunkte konnten
   auseinanderlaufen, ohne dass es jemandem aufgefallen wäre. Mit dem Token
   können sie es nicht mehr.
   Rückfallwert 24px nach demselben Muster wie bei der Kontakt-Variante unten,
   und aus demselben Grund: Er kostet nichts und trägt, falls je wieder eine
   Stilvorlage asynchron geladen wird. */
.hero .ai-credit-badge {
  left: calc(var(--hero-pad, 24px) - var(--ai-text-inset));
}

/* Contact: matches .contact-card__intro padding-inline (16 → 40 → 56).
   Its heading is smaller than the hero H1, so its bearing is ~2px, not ~3px. */
.contact-card__intro .ai-credit-badge {
  --ai-text-inset: 48px; /* 50 − ~2px bearing of the contact title */
  /* Rückfallwert 16px für --kante, das aus styles.css kommt. *Bis zum
     12. September 2026 stand hier --container-inner-pad.*
     Seit dem 21. August 2026 ist er gegenstandslos: styles.css lädt auf allen sieben
     Seiten blockierend und steht vor dem ersten Bild zur Verfügung, der Rückfall kann
     gar nicht mehr greifen. **Er bleibt trotzdem stehen.** Er kostet nichts und trägt,
     falls jemand später wieder eine Stilvorlage asynchron lädt. Ein Rückfallwert, der
     nie zum Zug kommt, ist billiger als ein fehlender, den niemand vermisst, bis er
     fehlt. */
  /* SEIT DEM 12. SEPTEMBER 2026 --kante STATT --container-inner-pad. Der
     Kontaktbereich ist an diesem Tag flächenfüllend geworden und zieht seinen
     Text auf die Kante der Bänder; das Abzeichen richtet sich am Titel darüber
     aus und muss deshalb dieselbe Zahl lesen. Bliebe hier der alte Token,
     stünde das Abzeichen ab 1260 Pixeln um bis zu 42 Pixel links vom Titel. */
  left: calc(var(--kante, 16px) - var(--ai-text-inset));
}

/* --- Bottom offset -------------------------------------------------------- */

/* Hero: the nav pill is fixed at the bottom edge — clear it by computing the
   offset from the pill's real height so the two can never collide. */
.hero .ai-credit-badge {
  bottom: calc(var(--ai-pill-h) + var(--nav-bottom) + 24px);
}

/* Contact: clear of the card's 24px corner rounding. */
.contact-card__intro .ai-credit-badge {
  bottom: 32px;
}

/* --- Reserve space so the badge never overlaps the copy above -------------
   Higher specificity than the base rules in styles.css, so these win no matter
   which stylesheet the browser applies first.
   The reason given here until 22 August 2026 was that styles.css loaded "via
   preload + onload swap, i.e. asynchronously". That has not been true since
   21 August 2026: both stylesheets are plain blocking <link> elements, in a
   fixed order, and the preload-with-onload switch was removed because it stood
   in the way of the Content-Security-Policy. The higher specificity stays
   anyway, it is the cheaper guarantee. */

.hero .hero__content {
  padding-bottom: calc(
    var(--ai-pill-h) + var(--nav-bottom) + 24px +
      var(--ai-badge-h) + var(--ai-badge-gap)
  );
}

.contact-card .contact-card__intro {
  padding-bottom: calc(32px + var(--ai-badge-h) + var(--ai-badge-gap));
}

/* --- Small screens --------------------------------------------------------
   Below 600px the badge falls back to the pre-21-August-2026 size.

   Why: the badge is an <img> and is therefore capped by max-width: 100% of its
   containing block, which is the viewport-wide .hero. Measured on 21 August 2026,
   the English artwork at 388px starts being squeezed at exactly 387px viewport
   width and is down to 320px at a 320px viewport. Nothing is clipped, but the
   lettering shrinks with it while --ai-text-inset stays a fixed pixel value, so
   the alignment with the heading drifts: measured 0.6px off at 375px, 1.3px at
   360px and 6.4px at 320px, against the intended ~3px. At that point the badge
   sticks out to the LEFT of the H1, which is precisely what the inset exists to
   prevent. The smaller artwork fits every phone width unsqueezed.

   The threshold is the existing 600px block, not the measured 387px: no
   in-between size is introduced. Between 388 and 600px the larger badge would
   still fit, so this fallback is deliberately more cautious than the measurement
   strictly requires. */

@media (max-width: 600px) {
  .hero,
  .contact-card__intro {
    --ai-badge-gap: 20px;
    --ai-badge-h: 70px;
  }

  .ai-credit-badge {
    width: 253px; /* de */
    --ai-text-inset: 37px; /* 40 − ~3px bearing of the hero H1 */
  }

  .ai-credit-badge--en {
    width: 310px;
  }

  .contact-card__intro .ai-credit-badge {
    --ai-text-inset: 38px; /* 40 − ~2px bearing of the contact title */
  }

  .hero .ai-credit-badge {
    bottom: calc(var(--ai-pill-h) + var(--nav-bottom) + 16px);
  }

  .contact-card__intro .ai-credit-badge {
    bottom: 24px;
  }

  .hero .hero__content {
    padding-bottom: calc(
      var(--ai-pill-h) + var(--nav-bottom) + 16px +
        var(--ai-badge-h) + var(--ai-badge-gap)
    );
  }

  .contact-card .contact-card__intro {
    padding-bottom: calc(24px + var(--ai-badge-h) + var(--ai-badge-gap));
  }
}