/* Klimavergleich-Marke: Briefmarke mit Poststempel, verlinkt auf /warum-wir.html.
   Größe über --s (1 = 132 px Breite); alle Innenmaße skalieren in em mit. */
.kvm{--s:1;--red:#C8102E;--ink:#1C2B3A;position:absolute;z-index:6;display:block;width:calc(132px*var(--s));font-size:calc(16px*var(--s));
 font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);text-decoration:none;transform:rotate(-4deg);
 filter:drop-shadow(0 10px 18px rgba(28,43,58,.16)) drop-shadow(0 1px 1px rgba(28,43,58,.12));
 animation:kvmIn .9s cubic-bezier(.2,.9,.25,1.2) .5s backwards;transition:transform .35s cubic-bezier(.2,.9,.25,1.2),filter .35s}
.kvm:hover,.kvm:focus-visible{transform:rotate(-1.5deg) translateY(-3px);filter:drop-shadow(0 16px 26px rgba(28,43,58,.2)) drop-shadow(0 1px 1px rgba(28,43,58,.12))}
.kvm:focus-visible{outline:2px solid #3D8B7A;outline-offset:6px}
@keyframes kvmIn{from{opacity:0;transform:translateY(-14px) rotate(-12deg) scale(1.08)}to{opacity:1;transform:rotate(-4deg)}}
/* Papier: gezeichnete Briefmarkenform (13 x 17 Löcher, Ecken gelocht) als SVG-Fläche, feste Proportion 13:17.
   Keine CSS-Maske: deren Lochreihe ging in Safari rechts und unten nicht auf. */
.kvm-paper{display:flex;position:relative;box-sizing:border-box;aspect-ratio:13/17;padding:.375em;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 170' preserveAspectRatio='none'%3E%3Cmask id='m'%3E%3Crect width='130' height='170' fill='%23fff'/%3E%3Crect width='130' height='170' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-dasharray='0 10'/%3E%3C/mask%3E%3Crect width='130' height='170' fill='%23FFFDF8' mask='url(%23m)'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.kvm-in{flex:1;display:flex;flex-direction:column;justify-content:center;padding:.65em .4em .55em;text-align:center;border:1px solid rgba(28,43,58,.13)}
.kvm-at{display:block;width:5.6em;height:auto;margin:.15em auto .55em}
.kvm-t1{display:block;font-weight:700;font-size:.92em;letter-spacing:-.01em;line-height:1.1;white-space:nowrap}
.kvm-t2{display:block;font-size:.74em;color:#5C6473;line-height:1.3;white-space:nowrap}
.kvm-rule{display:block;width:1.75em;height:2px;margin:.5em auto .45em;background:linear-gradient(90deg,var(--red) 33%,#fff 33% 66%,var(--red) 66%);box-shadow:0 0 0 .5px rgba(28,43,58,.15)}
.kvm-t3{display:block;max-width:7.2em;margin:0 auto;text-wrap:balance;font-size:.7em;color:#3D8B7A;font-weight:600;line-height:1.25}
.kvm-pm{position:absolute;width:4.6em;height:4.6em;right:-2.75em;bottom:-2.5em;color:#2E4057;opacity:.72;transform:rotate(14deg);mix-blend-mode:multiply;pointer-events:none}

/* Faktenkarten (Städte, Gewerbe-Branchen), Punkt 26 Richtung A (Fabio 25.10.): Marke an der Unterkante des Fotos —
   obere Hälfte auf dem Foto, Poststempel links unten auf der weißen Faktenfläche, damit auf jedem Foto lesbar.
   Marke bei --s:.62 = 82 × 107 px; Foto 200 px hoch, bis 640 px 168 px (kv-staedte.css / kv-gewerbe.css); ragt 20 px darunter. */
.kvm-host{position:relative}
.kvm--card{--s:.62;top:113px;right:18px}
.kvm--card .kvm-pm{right:auto;left:-2.6em;bottom:-2.2em}
/* Startseite: auf der Ecke der Österreich-Karte, oben rechts (ersetzt dort die Städte-Zeile) */
.kvm--map{right:-14px;top:-66px;--s:.8}
.map-hero:has(>.kvm) .map-hero-label>span:last-child{display:none}
/* Bundesland-Ratgeber: neben dem Vorspann, wie eine Marke auf dem Kuvert */
.kvm--lead{position:relative;float:right;margin:-6px 18px 8px 32px;--s:.86}
.kvm--lead~.article-byline{clear:both}

@media (max-width:1180px){.kvm--map{right:18px}}
@media (max-width:900px){.kvm--card{right:16px}.kvm--lead{--s:.72;margin:2px 4px 6px 18px}
 .kvm--lead .kvm-pm{right:auto;left:-2.6em;bottom:-2.2em}}
/* Startseite unter 900 px: die Marke sitzt im Hero-Kopf rechts neben der Überschrift (eigenes .kvm--hero in .hero-intro),
   bei der Karte entfällt sie. Bis 640 px Überschrift fest zweizeilig; 641–699 px Marke neben Unterzeile und Lead.
   Alle .hero-intro-Regeln hängen an :has(>.kvm--hero) — die Städteseiten haben auch ein .hero-intro, aber keine Marke darin. */
.kvm--hero{display:none}
@media (max-width:900px){.kvm--map{display:none}.hero-intro:has(>.kvm--hero){position:relative}.kvm--hero{display:block;--s:.6;top:0;right:0}
 .kvm--hero .kvm-pm{left:-2.4em;right:auto;top:.4em;bottom:auto}}
@media (min-width:641px) and (max-width:699px){.hero-intro:has(>.kvm--hero)>.lead{max-width:calc(100% - 124px)}.kvm--hero{top:60px}}
@media (max-width:640px){.hero-intro:has(>.kvm--hero)>.h-display>span:first-child{max-width:8.5em}.kvm--hero{top:4px}}
@media (max-width:480px){.hero-intro:has(>.kvm--hero){padding-top:clamp(0px,calc(86px - 19vw),20px)}.kvm--hero{top:max(-13px,calc(19vw - 99px))}}
/* Stadt-Marke bis 640 px: kein größerer Hover-Schatten (würde am Kartenrand angeschnitten; am Handy bleibt :hover nach dem Tippen stehen) */
/* Bis 640 px Foto 168 px: Marke höher; der Stempel liegt dann auf Höhe des Kartentitels, lange Titel
   („Wiener Neustadt auf einen Blick“) brechen vor ihm um */
@media (max-width:640px){.kvm--card{top:81px;right:14px}.kvm-host:has(>.kvm--card) .cfx-h{margin-right:118px}}
@media (max-width:640px){.kvm--card:hover{filter:drop-shadow(0 10px 18px rgba(28,43,58,.16)) drop-shadow(0 1px 1px rgba(28,43,58,.12))}}
/* 3D-Render (geprägtes Büttenpapier, 3d/marke_buetten.py): liegt deckungsgleich über dem Papier, Ring und Umschrift
   sind im Bild, das Datum bleibt HTML (multiply). Papier = 8,25 em = 130 Einheiten; Bildausschnitt je Stempellage:
   seite x −12…186, karte und hero x −48…150 (Einheiten), oben jeweils 12 über dem Papier.
   Render ohne Bodenschatten: der Schatten kommt wie bisher aus dem CSS-drop-shadow oben (Fabio 21.10.). */
.kvm::before{content:"";position:absolute;left:-.7615em;top:-.7615em;width:12.565em;aspect-ratio:1920/2270;
 background:url("/img/3d/marke-seite.webp") 0 0/100% 100% no-repeat;pointer-events:none}
.kvm-paper{background:none}
.kvm-in{visibility:hidden}
.kvm-pm>circle,.kvm-pm>g{display:none}
.kvm-pm{opacity:.85}
.kvm--card::before{left:-3.0462em;background-image:url("/img/3d/marke-karte.webp")}
@media (max-width:900px){.kvm--hero::before{left:-3.0462em;background-image:url("/img/3d/marke-hero.webp")}}
/* Ratgeber-Kopf bis 1040 px (kv-blog-b.css): Stempel bleibt rechts unten, aber an der Lage im Bild „seite“;
   die 0,45 em, die er dadurch weiter hinausragt, bekommt der rechte Rand dazu */
@media (max-width:1040px){.kb .kvm--lead{margin-right:calc(20px + .45em)}.kb .kvm--lead .kvm-pm{right:-2.75em;bottom:-2.5em}}
/* Der leere Bildrand rechts (gedreht) ragte am Handy 3 px über die Seite: Kopf waagrecht beschneiden, Ring bleibt innerhalb */
.kb-hero--marke{overflow-x:clip}
@media (prefers-reduced-motion:reduce){.kvm{animation:none;transition:none}}
/* Punkt 28: Zoom-Übergang Marke ↔ Kopf von warum-wir (Skript /js/kv-marke-zoom.js im <head>, Gegenstück warum-wir.html).
   Kommt die Seite per Übergang, entfällt der Einflug kvmIn (sonst wäre die Marke im Zielbild unsichtbar). */
@view-transition{navigation:auto}
::view-transition-group(kv-marke){animation-duration:.6s;animation-timing-function:cubic-bezier(.2,.9,.25,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
.vt-ein .kvm{animation:none}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media print{.kvm{display:none}}