/* kv-bundesland-kopf.css — Kopf der 9 Bundesland-Ratgeber (/blog/bundesland-*.html), Punkt 32 Version B (Fabio 26.10.2026).
   Nach kv-blog-b.css und kv-marke.css einbinden. Header: .kb-hero.kb-hero--relief[data-land=<land>] statt .kb-hero--marke.
   Text links (Eyebrow, H1, Vorspann, Autorenzeile), rechts das 3D-Relief des Landes; die Marke (.kvm--relief) klebt an
   der rechten unteren Relief-Ecke, Lage je Land über --kvm-r/--kvm-b. Bis 1040 px steht das Relief unter dem Vorspann.
   Relief = /img/3d/relief-<land>.webp (1200 × 880, freigestellt). Vorlage: .work/mockups/p32-bundesland/_bl.css (Richtung B).
   Schriftgrade aus kv-blog-b.css; Abstände 16 · 24 · 28 · 40 · 64. */

.kb-hero--relief{overflow-x:clip}
.kb-hero--relief .kb-hero-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);column-gap:64px;
  align-items:start;max-width:none}
.kb-hero--relief .kb-eyebrow{grid-area:1/1}
.kb-hero--relief .kb-h1{grid-area:2/1}
.kb-hero--relief .kb-lead{grid-area:3/1}
.kb-hero--relief .kb-by{grid-area:4/1}

/* H1 mit Unterzeile (wie .h-display-sub der Werkzeug- und Textköpfe): Ortszeile groß, Themen darunter */
.kb .kb-h1>span{display:block}
.kb .kb-h1 .h-display-sub{font-size:.48em;font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--text);margin-top:16px}

/* Relief: das Bild hat transparenten Rand (für den Schlagschatten). Zuschnitt auf die Vereinigung aller neun Umrisse
   (x 16–87 %, y 10–80 % der Datei), damit jedes Land in derselben Fläche steht: Bild 140 % breit, Rand weggeschoben. */
.kb-relief{grid-area:1/2/5/3;align-self:center;position:relative;margin:0;
  animation:kvKopfEin var(--dur-entrance) .35s var(--ease-out) backwards}
.kb-relief img{display:block;width:140%;max-width:none;height:auto;margin:-9% -18% -19% -22%;
  filter:drop-shadow(0 18px 20px rgba(28,43,58,.22)) drop-shadow(0 2px 3px rgba(28,43,58,.2))}
@keyframes kvKopfEin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Marke auf der Relief-Ecke; Lage je Land (Umriss unterschiedlich): obere Hälfte der Marke liegt auf dem Relief */
.kvm--relief{--s:.8;right:var(--kvm-r,0%);bottom:var(--kvm-b,0%)}
.kb-hero--relief[data-land=burgenland]{--kvm-r:36%;--kvm-b:2%}
.kb-hero--relief[data-land=kaernten]{--kvm-r:4%;--kvm-b:16%}
.kb-hero--relief[data-land=niederoesterreich]{--kvm-r:6%;--kvm-b:0%}
.kb-hero--relief[data-land=oberoesterreich]{--kvm-r:4%;--kvm-b:4%}
.kb-hero--relief[data-land=salzburg]{--kvm-r:4%;--kvm-b:4%}
.kb-hero--relief[data-land=steiermark]{--kvm-r:4%;--kvm-b:4%}
.kb-hero--relief[data-land=tirol]{--kvm-r:34%;--kvm-b:4%}
.kb-hero--relief[data-land=vorarlberg]{--kvm-r:8%;--kvm-b:6%}

@media (max-width:1040px){
  .kb-hero--relief .kb-hero-main{grid-template-columns:minmax(0,1fr)}
  .kb-hero--relief .kb-relief{grid-area:4/1;justify-self:start;width:min(100%,440px);margin:28px 0 0}
  .kb-hero--relief .kb-by{grid-area:5/1;margin-top:48px}   /* Stempel ragt unter das Relief */
  .kb-hero--relief .kb-lead{max-width:60ch}
}
@media (max-width:640px){
  .kb-hero--relief .kb-relief{width:80%;margin-top:24px}
  .kb-hero--relief .kb-by{margin-top:44px}
  .kvm--relief{--s:.62}
  /* Burgenland: Marke ist im Verhältnis zum Relief größer als am Desktop und deckte den schmalen Süden zu → weiter nach rechts */
  .kb-hero--relief[data-land=burgenland]{--kvm-r:28%}
}
@media (prefers-reduced-motion:reduce){.kb-relief{animation:none}}