/* ============================================================
   TimeInvoicer — Zentrale Brand-Tokens & Wortmarke
   SINGLE SOURCE OF TRUTH für alle Marketing-Auftritte.
   Bearbeiten NUR hier in marketing/brand/, dann `sync.sh` ausführen.
   Verteilt nach: timeinvoicer.at/brand/ .ch/brand/ .com/brand/
   ============================================================ */

:root {
  /* --- Marken-Palette (identisch zur Wortmarke-SVG) --- */
  /* Dunkelster Grund der Auftritte — Hero, Kopfzeile, Fusszeile.
     Stand bis 2026-08-07 in jeder Seite einzeln als #001B1F. */
  --ti-ink:        #001B1F;
  --ti-dark:       #003F3A;
  --ti-mid:        #007D73;
  --ti-teal:       #00A99A;
  --ti-mint:       #5FF7EA;
  --ti-paper:      #ECFFFC;
  --ti-soft:       #D8FCF7;
  --ti-coral:      #FF4F64;
  --ti-coral-soft: #FFE1E6;

  /* --- Web-Theme-Palette (Astra/WordPress, kompatibel) --- */
  --ti-web-teal:   #008577;
  --ti-web-gold:   #f1c04b;

  /* --- Typografie --- */
  --ti-font:       'Manrope', Arial, Helvetica, sans-serif;
  --ti-font-mark:  Arial, Helvetica, sans-serif; /* Wortmarke = Arial Black, identisch zur SVG */

  /* --- Radien --- */
  --ti-radius:     16px;
}

/* ============================================================
   WORTMARKE als CSS-Text (für Folder, Visitenkarten, Inline-Header)
   Rendert "TimeInvoicer" / "Psy-TimeInvoicer" layout-identisch zur SVG.
   Farben: "Time"/"Psy-Time" = weiß, "Invoicer" = mint.
   ============================================================ */
.ti-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--ti-font-mark);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ti-word-time     { color: #FFFFFF; }          /* "Time" bzw. "Psy-Time" */
.ti-word-invoicer { color: var(--ti-mint); }   /* "Invoicer" */
.ti-wordmark-sub  {
  color: var(--ti-soft);
  font-family: var(--ti-font-mark);
  font-weight: 800;
}

/* ============================================================
   Store-Badges (kanonisch, ab 2026-08-05 — iOS ist in Produktion)

   Die Badge-Grafiken sind die OFFIZIELLEN Assets von Apple und Google.
   Beide Konzerne untersagen Nachbau und Veraenderung: nicht einfaerben,
   nicht beschneiden, Seitenverhaeltnis nicht aendern, Freiraum wahren.
   Deshalb steuert diese Regel nur Groesse und Abstand — nie das Bild selbst.

   Verwendung (relative Pfade, zip-portabel):
     <div class="ti-stores">
       <a class="ti-store" href="https://apps.apple.com/app/id6761268235"
          target="_blank" rel="noopener">
         <img src="brand/store-badges/apple-app-store-de.svg"
              alt="TimeInvoicer im App Store laden" height="48">
       </a>
       <a class="ti-store" href="https://play.google.com/store/apps/details?id=at.insglueck.timeinvoicer"
          target="_blank" rel="noopener">
         <img src="brand/store-badges/google-play-de.png"
              alt="TimeInvoicer bei Google Play" height="48">
       </a>
     </div>
   In Unterordnern ../brand/... bzw. ../../brand/... voranstellen.
   Sprachkuerzel je Auftritt: .at = de · .com = en · .ch = de/fr/it.
   ============================================================ */
.ti-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
}
.ti-store {
  display: inline-flex;
  align-items: center;
  /* Touch-Ziel >= 48px, auch wenn das Badge selbst niedriger wirkt. */
  min-height: 48px;
  text-decoration: none;
}
.ti-store img {
  height: 48px;
  width: auto;
  display: block;
}
/* Auf schmalen Handys untereinander statt gequetscht nebeneinander. */
@media (max-width: 420px) {
  .ti-stores { gap: 10px; }
  .ti-store img { height: 44px; }
}

/* ============================================================
   HERO-BUEHNE — Vorstellungsgrafik (Owner-Auftrag 2026-08-07)
   ============================================================
   Der Befund: Auf der Startseite lagen DREI Abdunklungs-Ebenen
   uebereinander auf der Grafik (.hero::before ueber die ganze
   Flaeche mit 96 % Deckung, .hero::after unten links, und
   .hero-copy::before hinter dem Text). Zusammen blieb vom Bild
   fast nichts uebrig — auf dem Frontdisplay eines Foldables war
   die Grafik praktisch schwarz.

   Dazu kam `center/cover` mit `min-height: 100svh`: Auf einem
   hohen, schmalen Display skaliert `cover` das 16:9-Bild auf die
   HOEHE und schneidet links und rechts ab. Genau dort steht aber
   das Wesentliche — das Handy mit der Rechnung.

   Die Loesung hier folgt zwei Regeln:

   1. EINE Abdunklung statt drei, und nur dort, wo Text steht.
      Der Verlauf laeuft schraeg aus, damit die rechte Bildhaelfte
      unangetastet bleibt.
   2. Auf schmalen Displays wird NICHT zugeschnitten. Statt `cover`
      steht dort `100% auto`: volle Breite, Hoehe proportional.
      Das Bild ist 4096x2304 (16:9), die Hoehe also 56,25 % der
      Breite — genau so viel Platz reserviert das padding-top.
      Der Text sitzt darunter auf ruhigem Grund.

   Lesbarkeit bleibt messbar: Ueber der Textzone deckt der Verlauf
   mindestens 78 %, das haelt Weiss auf Teal deutlich ueber dem
   WCAG-AA-Kontrast. Heller wird die Grafik dort, wo KEIN Text
   steht — das war der Auftrag.

   Diese Regeln stehen bewusst hier und nicht in der Seite: Die
   Bühne ist Marke, keine Seiteneigenheit. Wer sie aendert, aendert
   sie fuer alle Auftritte auf einmal.
   ------------------------------------------------------------ */

.ti-hero {
  position: relative;
  isolation: isolate;
  /* BEWUSST KEIN display/align hier.
     Bis 2026-08-07 setzte diese Klasse `display:flex; align-items:flex-end`.
     Auf .at passte das zufaellig, auf .com brach es das Layout: der
     Inhaltscontainer wurde zum Flex-Element und schrumpfte von 1280 auf 630
     Pixel. Die Buehne gehoert der Marke, das LAYOUT der Seite — sonst ist die
     Klasse nicht wiederverwendbar, und genau das ist ihr Zweck. */
  /* Die Hoehe ist an die BILDPROPORTION gekoppelt — das ist der Kern.
     56.25vw ist die Hoehe, die das 16:9-Bild bei voller Breite haette.
     Ohne diese Fessel wird der Hero auf hohen, maessig breiten Fenstern
     „schmaler" als das Bild (z.B. 1000x760 = 1,32 gegen 1,78), und `cover`
     skaliert dann auf die HOEHE und schneidet links und rechts weg. Genau
     so verschwand am 2026-08-07 auf dem Schreibtisch alles bis auf ein
     riesiges Handy.
     78svh haelt den Hero auf kleinen Fenstern im Rahmen, 760px deckelt
     ihn auf grossen. Der kleinste der drei Werte gewinnt. */
  min-height: min(56.25vw, 78svh, 760px);
  padding: 96px 0 44px;
  /* Bewusst EINZELEIGENSCHAFTEN statt der `background`-Kurzform:
     Die Seite setzt `background-image` selbst (inline oder in ihrem
     eigenen <style>), weil ein relativer Bildpfad gegen die Datei
     aufgeloest wird, in der er STEHT. Stuende der Pfad hier, suchte
     der Browser ihn neben dieser CSS-Datei in brand/ — dort liegt
     kein Bild. Die Kurzform wuerde ausserdem das von der Seite
     gesetzte Bild wieder auf `none` zuruecksetzen.
     Arbeitsteilung: zentral = WIE die Buehne aussieht,
     Seite = WELCHES Bild darauf liegt. */
  background-color: var(--ti-ink, #001B1F);
  /* `100% auto` statt `cover` — DER entscheidende Unterschied.
     `cover` fuellt die Flaeche und schneidet die ueberstehende Achse ab. Bei
     einem Hero, der hoeher als 16:9 ist (z.B. 1000x760), trifft das die BREITE:
     Wortmarke links und Haekchen rechts verschwinden, uebrig bleibt ein
     riesiges Handy in der Mitte. Genau das war der Befund vom 2026-08-07.
     `100% auto` legt die volle Bildbreite an; beschnitten wird hoechstens oben
     und unten, wo im Bild nur Hintergrund liegt. Die Bildaussage — links
     Wortmarke, Mitte Geraete, rechts die vier Zeilen — bleibt IMMER ganz. */
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

/* AUFHELLER — liegt direkt auf dem Bild, unter der Abdunklung.
   Die Vorlage ist von Haus aus dunkel; frueher fiel das nicht auf,
   weil `cover` nur den helleren Ausschnitt mit dem Handy zeigte.
   Sobald die GANZE Grafik sichtbar ist, versinkt sie.
   `screen` hebt die Tiefen an, ohne die Lichter auszubrennen — es
   multipliziert die Komplemente, weisse Stellen bleiben also weiss.
   Der Ton ist bewusst leicht mint statt neutral: neutrales Grau
   haette die Grafik grau-stichig gemacht, dieser Ton haelt sie in
   der Marke. */
.ti-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  /* `inherit` holt Bild, Lage und Groesse vom Elternelement — die Seite
     setzt sie dort, der Pfad bleibt also gegen die SEITE aufgeloest.
     Diese Kopie liegt deckend ueber dem dunklen Original und wird
     gefiltert. Bewusst `filter` statt `mix-blend-mode`: ein Filter
     rechnet unabhaengig vom Untergrund und liefert auf jedem Geraet
     dasselbe Ergebnis, waehrend ein Mischmodus vom Stapelkontext
     abhaengt und in der Praxis zu oft wirkungslos bleibt. */
  background-image: inherit;
  background-position: inherit;
  background-size: inherit;
  background-repeat: no-repeat;
  filter: brightness(1.42) saturate(1.16) contrast(0.97);
}

/* Die EINE Abdunklung — LIEGT UEBER dem Aufheller. Schraeg, damit
   sie den Text traegt und die Bildmitte freigibt. */
.ti-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Die Werte sind auf die AUFGEHELLTE Grafik gerechnet, nicht auf die
     dunkle Vorlage. Ein Abdunkler, der fuer das dunkle Original passte,
     laesst den Text auf dem hellen Bild schwimmen — genau das trat beim
     ersten Versuch ein. Bis 44 % traegt der Verlauf den Text (>= 0,88
     Deckung, Weiss auf diesem Grund liegt klar ueber WCAG AA), danach
     faellt er zuegig ab und gibt die Haekchen-Spalte frei. */
  background: linear-gradient(
    100deg,
    rgba(0, 27, 31, 0.96) 0%,
    rgba(0, 27, 31, 0.93) 30%,
    rgba(0, 27, 31, 0.88) 44%,
    rgba(0, 27, 31, 0.46) 62%,
    rgba(0, 27, 31, 0.10) 80%,
    rgba(0, 27, 31, 0.00) 94%
  );
}

.ti-hero > * { position: relative; z-index: 1; }

/* Schmale Displays: die Grafik VOLLSTAENDIG zeigen, nicht zuschneiden. */
@media (max-width: 860px) {
  .ti-hero {
    min-height: 0;
    /* 56.25 % = Bildhoehe bei voller Breite, plus Luft fuer die Kopfzeile. */
    padding: calc(56.25% + 26px) 0 40px;
    background-position: top center;
    background-size: 100% auto;
  }
  /* Senkrechter Verlauf: oben durchsichtig, damit die Grafik wirkt —
     unten deckend, damit der Text auf ruhigem Grund steht. */
  .ti-hero::before {
    background: linear-gradient(
      180deg,
      rgba(0, 27, 31, 0.00) 0%,
      rgba(0, 27, 31, 0.06) 38%,
      rgba(0, 27, 31, 0.55) 50%,
      rgba(0, 27, 31, 0.94) 60%,
      var(--ti-ink, #001B1F) 68%
    );
  }
}

/* ============================================================
   App-Aufnahmen (.ti-shots)
   ------------------------------------------------------------
   Eine Quelle fuer alle drei Domains. Die Bilder liegen zentral unter
   marketing/brand/app-screens/<sprache>/ und werden per sync.sh nach
   <domain>/brand/app-screens/ verteilt — nie je Domain einzeln pflegen.

   Bewusst nur ZWEI Aufnahmen nebeneinander (iPad gross, ein Telefon
   daneben) statt einer Bilderwand: Auf 360 px Breite werden drei
   nebeneinanderstehende Telefone so klein, dass man nichts mehr erkennt —
   dann zeigt das Bild die Funktion, ohne sie zu zeigen.

   Umbruchverhalten: Beide Kacheln haben eine Wunschbreite und duerfen
   schrumpfen. Passt die iPad-Kachel nicht mehr neben das Telefon, rutscht
   sie auf eine eigene Zeile und nimmt die volle Breite — ohne Medienabfrage.
   ============================================================ */
.ti-shots {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  justify-content: center;
}

.ti-shots figure { margin: 0; }

.ti-shots-pad { flex: 1 1 460px; max-width: 660px; }
.ti-shots-phone { flex: 0 1 210px; max-width: 230px; }

/* Schmale Schirme: Sobald die iPad-Kachel auf eine eigene Zeile rutscht, steht
   das Telefon allein in seiner Zeile und blieb bei 210 px — verloren in viel
   Leerraum, obwohl Platz da war. Hier darf es mitwachsen. */
@media (max-width: 700px) {
  .ti-shots-phone { flex: 1 1 100%; max-width: 300px; }
}

.ti-shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0, 27, 31, 0.22);
}

/* Bildunterschrift erbt die Textfarbe der Seite statt eine feste zu setzen.
   Grund (gemessen 2026-08-08): Ein fest gesetztes Graugruen ergab auf dem
   dunklen Grund der Startseiten rgb(91,119,115) auf rgb(0,63,58) — rund 2,3:1
   und damit weit unter den geforderten 4.5:1. Der Abschnitt steht auf hellen
   UND dunklen Seiten; nur eine mitlaufende Farbe ist auf beiden lesbar. */
.ti-shots figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.4;
  color: inherit;
  opacity: 0.78;
}


/* ============================================================
   Sichtbarer Fokus + CTA-Formel (2026-08-08)
   ------------------------------------------------------------
   --- Sichtbarer Fokus ---
   Befund: In allen drei Auftritten war `:focus-visible` neun Mal in vier
   Dateien definiert — praktisch nirgends. Wer mit der Tastatur navigiert, sieht
   nicht, wo er steht. Das ist kein Schoenheitsfehler, sondern schliesst Leute
   aus, die keine Maus benutzen koennen.

   `:focus-visible` statt `:focus`: Der Ring erscheint bei Tastaturbedienung,
   nicht bei jedem Mausklick — sonst schalten Entwickler ihn wieder ab.

   --- CTA-Formel ---
   Befund: `.btn-primary` in style.css legte WEISSE Schrift auf einen Verlauf,
   der bei `#53FFF0` endet — gemessen **1,24 : 1** am hellen Ende. Genau der
   Fehler "helle Schrift auf hellem Grund". Mint ist eine FLAECHE, kein
   Schriftgrund fuer Weiss: dunkles Ink darauf ergibt 13,58 : 1.
   ============================================================ */

:where(a, button, [role="button"], input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ti-mint, #5FF7EA);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Auf hellen Flaechen ist Mint als Ring zu schwach — dort das tiefe Teal. */
@media (prefers-color-scheme: light) {
  .ti-on-paper :where(a, button, [role="button"]):focus-visible {
    outline-color: var(--ti-dark, #003F3A);
  }
}

.ti-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  background: var(--ti-mint, #5FF7EA);
  color: var(--ti-ink, #001B1F);
}

/* ============================================================
   Produktvideo: kontrastfester zentraler Abschnitt (2026-08-09)
   ------------------------------------------------------------
   Der Abschnitt steht in vielen historisch unterschiedlichen Templates.
   Deshalb setzt die zentrale Quelle Flaeche UND Textpaar gemeinsam und
   ueberstimmt lokale Inline-Farben/Opacity. Helle Schrift darf hier nie auf
   einen hellen Template-Grund, dunkle nie auf den dunklen Video-Grund fallen.
   ============================================================ */
#produktvideo {
  background: var(--ti-dark, #003F3A) !important;
  color: var(--ti-paper, #ECFFFC) !important;
}

#produktvideo :where(h1, h2, h3, p, figcaption) {
  color: var(--ti-paper, #ECFFFC) !important;
  opacity: 1 !important;
}

#produktvideo :where(.kicker, .eyebrow) {
  color: var(--ti-mint, #5FF7EA) !important;
}