/* public/post/kachel.css — Template-Geometrie für 3 Stile × 2 Formate */

/* Render-Basisbreite: 540px CSS → html2canvas scale 2 = 1080px PNG */
.kachel {
  --kachel-accent: #E8743B;
  position: relative;
  width: 540px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  padding: 40px 38px;
  gap: 14px;
}
.kachel--feed  { height: 675px; }   /* 4:5  (540×675  → 1080×1350) */
.kachel--story { height: 960px; }   /* 9:16 (540×960  → 1080×1920) */

/* Eyebrow-Tag auf Akzentfläche */
.kachel-eyebrow {
  align-self: flex-start;
  font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 4px;
  background: var(--kachel-accent); color: #fff;
}

/* Job-Titel — groß, neutral, mit Akzent-Punkt */
.kachel-title {
  margin: 4px 0 0; font-size: 52px; line-height: 0.98; font-weight: 800;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.kachel-pos::after { content: '.'; color: var(--kachel-accent); }
.kachel-mwd { font-size: 0.3em; font-weight: 600; letter-spacing: 0.04em; opacity: 0.65; white-space: nowrap; }

.kachel-meta {
  margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.01em;
}

/* Foto-Zone: feste Fläche, Foto füllt per cover, Text liegt NIE darauf */
.kachel-foto {
  flex: 1 1 auto; min-height: 120px; margin: 8px 0;
  border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.12);
}
.kachel-foto-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.kachel-spruch { margin: 0; font-size: 19px; line-height: 1.45; }

/* CTA-Balken auf Akzentfläche */
.kachel-cta {
  align-self: stretch; margin-top: 4px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
  padding: 14px 16px; border-radius: 5px;
  background: var(--kachel-accent); color: #fff;
}

.kachel-logo {
  position: absolute; top: 36px; right: 36px;
  width: 64px; height: 64px; object-fit: contain;
}

/* ---- Stil NAVY: dunkel, Text hell ---- */
.kachel--navy { background: #1c2433; color: #fff; }
.kachel--navy .kachel-spruch { color: #d7deea; }

/* ---- Stil HELL: Creme, Text dunkel ---- */
.kachel--hell { background: #ece7df; color: #1a1a1a; }
.kachel--hell .kachel-meta { color: #4a463f; }
.kachel--hell .kachel-spruch { color: #33302b; }

/* ---- Stil SCHWARZ: schwarz, Text hell, gelber Akzent dunkel beschriftet ---- */
.kachel--schwarz { background: #111; color: #fff; }
.kachel--schwarz .kachel-eyebrow,
.kachel--schwarz .kachel-cta { color: #111; }      /* gelber Grund braucht dunklen Text */
.kachel--schwarz .kachel-spruch { color: #e6e6e6; }

/* Story hat mehr Höhe → Titel etwas größer */
.kachel--story .kachel-title { font-size: 60px; }

/* ============================================================
   VOLLFLÄCHEN-SKIN (kuratiertes Bibliotheksbild mit Copy-Space)
   Foto füllt die Kachel; Text liegt in der leeren anchor-Ecke,
   Scrim + Textfarbe richten sich nach ton (hell/dunkel).
   ============================================================ */
.kachel--vollflaeche { position: relative; }

/* Foto als vollflächiger Hintergrund (statt gerahmter Kasten) */
.kachel--vollflaeche .kachel-foto {
  position: absolute; inset: 0; z-index: 0;
  margin: 0; min-height: 0; border-radius: 0; background: none;
}

/* Scrim-Ebene über dem Foto (Richtung/Farbe weiter unten) */
.kachel--vollflaeche::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* Text + CTA + Logo über Foto und Scrim */
.kachel--vollflaeche > :not(.kachel-foto) { position: relative; z-index: 2; }
/* CTA-Balken an den unteren Rand */
.kachel--vollflaeche .kachel-cta { margin-top: auto; }

/* anchor=links → Textspalte links halten (CTA bleibt voll breit) */
.kachel--vollflaeche.kachel--anchor-links .kachel-eyebrow,
.kachel--vollflaeche.kachel--anchor-links .kachel-title,
.kachel--vollflaeche.kachel--anchor-links .kachel-meta,
.kachel--vollflaeche.kachel--anchor-links .kachel-spruch { max-width: 56%; }

/* anchor=rechts → Textspalte rechts halten, rechtsbündig */
.kachel--vollflaeche.kachel--anchor-rechts .kachel-title,
.kachel--vollflaeche.kachel--anchor-rechts .kachel-meta,
.kachel--vollflaeche.kachel--anchor-rechts .kachel-spruch { max-width: 56%; margin-left: auto; text-align: right; }
.kachel--vollflaeche.kachel--anchor-rechts .kachel-eyebrow { align-self: flex-end; }

/* anchor=unten → Textblock an den unteren Rand schieben (direkt über den CTA) */
.kachel--vollflaeche.kachel--anchor-unten .kachel-eyebrow { margin-top: auto; }
.kachel--vollflaeche.kachel--anchor-unten .kachel-cta { margin-top: 0; }

/* ---- ton hell: dunkler Text, heller Scrim ---- */
.kachel--vollflaeche.kachel--ton-hell { color: #1a1a1a; }
.kachel--vollflaeche.kachel--ton-hell .kachel-meta { color: #33312c; }
.kachel--vollflaeche.kachel--ton-hell .kachel-spruch { color: #2a2824; }
.kachel--vollflaeche.kachel--ton-hell.kachel--anchor-oben::before {
  background: linear-gradient(to bottom, rgba(248,247,244,0.94) 0%, rgba(248,247,244,0.62) 28%, rgba(248,247,244,0) 54%);
}
.kachel--vollflaeche.kachel--ton-hell.kachel--anchor-links::before {
  background: linear-gradient(105deg, rgba(248,247,244,0.95) 0%, rgba(248,247,244,0.6) 38%, rgba(248,247,244,0) 66%);
}
.kachel--vollflaeche.kachel--ton-hell.kachel--anchor-rechts::before {
  background: linear-gradient(255deg, rgba(248,247,244,0.95) 0%, rgba(248,247,244,0.6) 38%, rgba(248,247,244,0) 66%);
}
.kachel--vollflaeche.kachel--ton-hell.kachel--anchor-unten::before {
  background: linear-gradient(to top, rgba(248,247,244,0.94) 0%, rgba(248,247,244,0.62) 30%, rgba(248,247,244,0) 56%);
}

/* ---- ton dunkel: heller Text, dunkler Scrim ---- */
.kachel--vollflaeche.kachel--ton-dunkel { color: #fff; }
.kachel--vollflaeche.kachel--ton-dunkel .kachel-meta { color: #ededed; }
.kachel--vollflaeche.kachel--ton-dunkel .kachel-spruch { color: #e6e6e6; }
.kachel--vollflaeche.kachel--ton-dunkel.kachel--anchor-oben::before {
  background: linear-gradient(to bottom, rgba(14,16,20,0.86) 0%, rgba(14,16,20,0.46) 30%, rgba(14,16,20,0) 56%);
}
.kachel--vollflaeche.kachel--ton-dunkel.kachel--anchor-links::before {
  background: linear-gradient(105deg, rgba(14,16,20,0.86) 0%, rgba(14,16,20,0.46) 40%, rgba(14,16,20,0) 68%);
}
.kachel--vollflaeche.kachel--ton-dunkel.kachel--anchor-rechts::before {
  background: linear-gradient(255deg, rgba(14,16,20,0.86) 0%, rgba(14,16,20,0.46) 40%, rgba(14,16,20,0) 68%);
}
.kachel--vollflaeche.kachel--ton-dunkel.kachel--anchor-unten::before {
  background: linear-gradient(to top, rgba(14,16,20,0.86) 0%, rgba(14,16,20,0.46) 30%, rgba(14,16,20,0) 56%);
}