/*
 * RICHTUNG 3: IDEEN FÜR DIE HAUPTÜBERSCHRIFT DER STARTSEITE (Prototyp)
 * „Professionelle Architekturvisualisierung“ in 13 Umsetzungen. Auswahl über site.yaml
 * (setzt html[data-hero]). Alle Verläufe leiten ihre Farbe aus dem Akzent (--lime) ab, folgen also dem
 * Farbtest. Verläufe in Schrift sind reine Zierde: Die Lesbarkeit hängt am dunklen Verlauf (Schleier)
 * dahinter und wurde über mehrere Motive gemessen (siehe Prüfung in der Antwort / docs).
 */
.hero__inhalt--start h1 .t2 { position: relative; }

/* 1 Heute: zwei Stärken, weiß (nichts zu tun) */

/* 2 Messingverlauf: metallischer Lauf von links nach rechts im Schlüsselwort */
html[data-hero="messing"] .hero__inhalt--start .t2 {
  background: linear-gradient(95deg, color-mix(in srgb, var(--lime) 90%, rgba(0, 0, 0, 1)) 0%, color-mix(in srgb, var(--lime) 40%, rgba(255, 255, 255, 1)) 36%, var(--lime) 62%, color-mix(in srgb, var(--lime) 28%, rgba(255, 255, 255, 1)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .55));
}

/* 3 Fensterlicht: oben weiß, nach unten warm wie beleuchtete Fenster in der Dämmerung */
html[data-hero="fenster"] .hero__inhalt--start .t2 {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 28%, color-mix(in srgb, var(--lime) 55%, rgba(255, 255, 255, 1)) 70%, var(--lime) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .5));
}

/* 4 Lichtreflex: ein heller Streifen läuft einmal über das Wort, wie ein Reflex auf einer Glasfassade */
html[data-hero="reflex"] .hero__inhalt--start .t2 {
  background: linear-gradient(105deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 40%, color-mix(in srgb, var(--lime) 42%, rgba(255, 255, 255, 1)) 48%, var(--lime) 52%, color-mix(in srgb, var(--lime) 42%, rgba(255, 255, 255, 1)) 56%, rgba(255, 255, 255, 1) 64%, rgba(255, 255, 255, 1) 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .03em .05em rgba(0, 0, 0, .5));
  animation: reflex var(--hero-animation, 2.6s) cubic-bezier(.4, 0, .2, 1) .3s both;
}
@keyframes reflex { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* 5 Bild in der Schrift: die Buchstaben zeigen das Foto, heller als der abgedunkelte Hintergrund (Fenstereffekt) */
html[data-hero="bild"] .bg__medium { animation: none !important; }
html[data-hero="bild"] .hero__inhalt--start .t2 {
  background: var(--hero-bild, linear-gradient(var(--fg, rgba(255, 255, 255, 1)), var(--fg, rgba(255, 255, 255, 1)))) var(--hero-fokus, 50% 50%) / cover no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .018em rgba(255, 255, 255, .85);
}
html[data-hero="bild"] .hero__inhalt--start h1 { filter: brightness(1.3) saturate(1.15) drop-shadow(0 .03em .05em rgba(0, 0, 0, .55)); }

/* 6 Kontur und Fläche: das erste Wort als Umriss, das Schlüsselwort gefüllt. Drei Voreinstellungen, dazu Regler im Auswahlfenster
      (setzen --t1w = Stärke der Buchstaben, --t1s = Linienstärke; sie überschreiben die Voreinstellung). */
html[data-hero="kontur"] .hero__inhalt--start .t1 { color: transparent; -webkit-text-stroke: var(--t1s, .028em) rgba(255, 255, 255, 1); font-weight: var(--t1w, 800); }
html[data-hero="konturduenn"] .hero__inhalt--start .t1 { color: transparent; -webkit-text-stroke: var(--t1s, 1.5px) rgba(255, 255, 255, 1); font-weight: var(--t1w, 300); }
html[data-hero="duenn"] .hero__inhalt--start .t1 { color: rgba(255, 255, 255, 1); -webkit-text-stroke: var(--t1s, 0) rgba(255, 255, 255, 1); font-weight: var(--t1w, 200); }

/* 7 Maßlinie: feine Maßkette mit „seit 2004“ über dem Schlüsselwort (aus dem alten Bestand) */
.mass-label { display: none; }
html[data-hero="mass"] .hero__inhalt--start .t2 { padding-top: .55em; }
html[data-hero="mass"] .hero__inhalt--start .t2::before { content: ""; position: absolute; left: 0; right: 0; top: .2em; height: .03em; min-height: 2px; background: rgba(255, 255, 255, 1); }
html[data-hero="mass"] .hero__inhalt--start .t2::after { content: ""; position: absolute; left: -.04em; right: -.04em; top: .04em; height: .34em;
  background: linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 1) 46%, rgba(255, 255, 255, 1) 54%, transparent 54%) left / .3em 100% no-repeat, linear-gradient(135deg, transparent 46%, rgba(255, 255, 255, 1) 46%, rgba(255, 255, 255, 1) 54%, transparent 54%) right / .3em 100% no-repeat; }
html[data-hero="mass"] .mass-label { display: block; position: absolute; left: 50%; top: -.02em; transform: translateX(-50%); padding: .2em .8em; background: var(--ink); color: rgba(255, 255, 255, 1); font: 600 .18em/1 "Archivo", sans-serif; font-stretch: 100%; letter-spacing: .12em; font-style: normal; }

/* 8 Verdichten: das Schlüsselwort beginnt hauchdünn und wird zur vollen Stärke (Punktwolke zu Modell) */
html[data-hero="verdichten"] .hero__inhalt--start .t2 { animation: verdichten var(--hero-animation, 1.9s) cubic-bezier(.2, .7, .2, 1) both; }
@keyframes verdichten { from { font-weight: 100; letter-spacing: .05em; opacity: .55; } to { font-weight: 800; letter-spacing: -.005em; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html[data-hero="reflex"] .hero__inhalt--start .t2 { animation: none; background-position: 0 0; }
  html[data-hero="verdichten"] .hero__inhalt--start .t2 { animation: none; }
}


/* Helle Motive (data-ton="hell"): Die Schrift ist dort dunkel. Die Verläufe laufen deshalb von Schwarz zu einem dunklen Ton,
   der sich aus dem Akzent ableitet. Heller Akzent auf hellem Grund wäre unsichtbar (gemessen: unter 1,8:1). */
html[data-ton="hell"][data-hero="messing"] .hero__inhalt--start .t2 {
  background: linear-gradient(95deg, rgba(12, 13, 14, 1) 0%, color-mix(in srgb, var(--lime) 28%, rgba(18, 19, 20, 1)) 55%, rgba(12, 13, 14, 1) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .02em .04em rgba(255, 255, 255, .55));
}
html[data-ton="hell"][data-hero="fenster"] .hero__inhalt--start .t2 {
  background: linear-gradient(180deg, rgba(12, 13, 14, 1) 0%, rgba(12, 13, 14, 1) 35%, color-mix(in srgb, var(--lime) 30%, rgba(28, 29, 30, 1)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .02em .04em rgba(255, 255, 255, .55));
}
html[data-ton="hell"][data-hero="reflex"] .hero__inhalt--start .t2 {
  background: linear-gradient(105deg, rgba(12, 13, 14, 1) 0, rgba(12, 13, 14, 1) 40%, color-mix(in srgb, var(--lime) 30%, rgba(42, 43, 44, 1)) 50%, rgba(12, 13, 14, 1) 60%, rgba(12, 13, 14, 1) 100%) 100% 0 / 260% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-ton="hell"][data-hero="mass"] .hero__inhalt--start .t2::before { background: rgba(12, 13, 14, 1); }
html[data-ton="hell"][data-hero="mass"] .hero__inhalt--start .t2::after {
  background: linear-gradient(135deg, transparent 46%, rgba(12, 13, 14, 1) 46%, rgba(12, 13, 14, 1) 54%, transparent 54%) left / .3em 100% no-repeat, linear-gradient(135deg, transparent 46%, rgba(12, 13, 14, 1) 46%, rgba(12, 13, 14, 1) 54%, transparent 54%) right / .3em 100% no-repeat; }
html[data-ton="hell"][data-hero="kontur"] .hero__inhalt--start .t1, html[data-ton="hell"][data-hero="konturduenn"] .hero__inhalt--start .t1 { -webkit-text-stroke-color: rgba(12, 13, 14, 1); }
html[data-ton="hell"][data-hero="duenn"] .hero__inhalt--start .t1 { color: rgba(12, 13, 14, 1); -webkit-text-stroke-color: rgba(12, 13, 14, 1); }

/* 9 bis 11 Silben betont: aus ARCHitekturVISualisierung und PROfessionelle ergibt sich der Name arch-vis-pro.
      Nur die Stärke ändert sich: die Silben stehen schwer (900), der Rest leicht (300). Text und Wortlaut bleiben unverändert.
      Die Regler im Auswahlfenster setzen --syw (Silben) und --restw (Rest). */
html[data-hero^="silben"] .hero__inhalt--start .t1, html[data-hero^="silben"] .hero__inhalt--start .t2 { font-weight: var(--restw, 300); }
html[data-hero^="silben"] .hero__inhalt--start .sy { font-weight: var(--syw, 900); }
html[data-hero="silbenfarbe"] .hero__inhalt--start .sy { color: var(--lime); }
html[data-ton="hell"][data-hero="silbenfarbe"] .hero__inhalt--start .sy { color: inherit; }   /* auf hellen Motiven bleibt es bei der Stärke: heller Akzent wäre unsichtbar */


/* Schriftregler aus dem Entwurf, ohne Testfenster. Silbenvarianten verwenden eigene Stärken. */
html[data-hero="heute"] .hero__inhalt--start .t1 { font-weight: var(--t1w, 500); }
html[data-hero="heute"][data-titel="gleich"] .hero__inhalt--start .t1 { font-weight: var(--t1w, 800); }

/* Lesbare Grundschrift, wenn ein Browser dekorative CSS-Funktionen nicht unterstützt. */
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  html[data-hero="messing"] .hero__inhalt--start .t2,
  html[data-hero="fenster"] .hero__inhalt--start .t2,
  html[data-hero="reflex"] .hero__inhalt--start .t2 { background: none; color: var(--fg, rgba(255, 255, 255, 1)); }
}
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  html[data-hero] .hero__inhalt--start .t2 { background: none; color: var(--fg, rgba(255, 255, 255, 1)); }
}