/* Farben: „Tafel-Blau“ – Bergblau + Bordeaux der Haustafel */
:root{color-scheme: only light; --c-bg: #f9f9fc; --c-surface: #eff1f8; --c-surface-2: #e1e6f2; --c-text: #1b2440; --c-muted: #4e5873; --c-line: #d4daea; --c-primary: #3b5897; --c-primary-ink: #ffffff; --c-accent: #932450; --c-accent-ink: #ffffff; --c-water: #2f7fc0; --c-wood: #a86e44; --c-dark: #22325a; --c-dark-ink: #f1f3fb; --c-hero-overlay: rgb(34 50 90 / .42);}
/* „Kino+“ – Apartments Jernej. Basis für alle Seiten. Farben „Tafel-Blau“ als Tokens in :root (unten).
   Schrift: SF Pro (Apple) bzw. die jeweilige Systemschrift – passt zur Haustafel („APARTMENTS“ in SF Pro Display). Keine Webfonts. */
@view-transition{navigation:auto}
@property --ht{syntax:"<number>";inherits:true;initial-value:0}
@property --htp{syntax:"<percentage>";inherits:true;initial-value:0%}
body{--htp:calc(var(--ht) * 100%)}
:root{--f:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--logo-berg:#3b5897;--logo-name:#932450;--logo-wort:#41403e;--apt-tr:#3b5897;--apt-tl:#932450;--apt-br:#3a7d5c;--gutter:clamp(1rem,4.5vw,3.5rem);--max:76rem;--r:clamp(14px,1.6vw,24px);--head-h:4.5rem;--logo-w:150px;--ease:cubic-bezier(.2,.7,.2,1);--shadow:0 1px 2px color-mix(in srgb,var(--c-dark) 10%,transparent),0 12px 40px -14px color-mix(in srgb,var(--c-dark) 28%,transparent);--tshadow:0 1px 2px rgb(0 0 0 / .5),0 0 22px rgb(0 0 0 / .32),0 0 56px rgb(0 0 0 / .22)}
@media (min-width:700px){:root{--logo-w:172px}
}
@media (min-width:1000px){:root{--head-h:5.25rem;--logo-w:196px}
}
/* Anker: Ziel liegt genau unter Kopfzeile + klebendem Untermenü (1px darunter, damit eine Trennlinie oben verschwindet).
   --sub-h = Höhe des Untermenüs, per JS gemessen (app.js / region-magazin.js); Startwert, bis das Skript läuft */
html:has(.mag-tabs,.cat-nav){--sub-h:3.75rem}
html:has(.aptnav){--sub-h:3.5rem}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + var(--sub-h,0px) - 1px);interpolate-size:allow-keywords}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}
}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:400 clamp(1rem,.96rem + .2vw,1.125rem)/1.6 var(--f);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg,picture{display:block;max-width:100%}
picture img{width:100%;height:100%;object-fit:cover;background:var(--c-surface-2)}
h1,h2,h3,h4{font-family:var(--f);font-weight:600;line-height:1.12;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.02em}
h2{font-size:clamp(1.95rem,1.25rem + 2.9vw,3.6rem);letter-spacing:-.028em}
h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem)}
p,li,dd{text-wrap:pretty}
p{margin:0 0 1em}
a{color:var(--c-primary);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--c-primary);outline-offset:3px;border-radius:4px}
/* nach Tippen/Klicken kein Fokusrahmen (Skript-Fokus, z. B. „ד der Großansicht); Tastatur behält ihn – app.js setzt data-pt */
html[data-pt] :focus-visible{outline:none !important}
html[data-pt] .mag-railwrap::after{outline:none !important}
.hero :focus-visible,.site-footer :focus-visible,.contact :focus-visible,.lb :focus-visible{outline-color:currentColor}
.sr-only{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;padding:.75rem 1rem;background:var(--c-primary);color:var(--c-primary-ink);border-radius:999px}
.skip:focus{top:1rem}
.wrap{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.ico{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo{width:var(--logo-w);height:auto;aspect-ratio:4313 / 1304}
.logo-t{aspect-ratio:4313 / 1304}
.btn{--b:var(--c-primary);--bi:var(--c-primary-ink);display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.7em 1.35em;border-radius:999px;border:1.5px solid var(--b);background:var(--b);color:var(--bi);font:600 1rem/1.2 var(--f);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),background-color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px color-mix(in srgb,var(--b) 80%,transparent)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.btn--ghost:hover{background:color-mix(in srgb,currentColor 10%,transparent);box-shadow:none}
.btn--accent{--b:var(--c-accent);--bi:var(--c-accent-ink)}
.btn--sm{min-height:44px;padding:.5em 1.05em;font-size:.95rem}
.progress{position:fixed;left:0;right:0;top:calc(var(--head-h) + 1rem * var(--ht) - 1.5px);height:1.5px;z-index:60;background:var(--c-primary);transform-origin:0 50%;scale:var(--sp,0) 1;pointer-events:none}
/* Seiten mit Unter-Menü: die Fortschrittslinie sitzt an dessen Unterkante (siehe .cat-nav::after), nicht am Header */
body:has(.cat-nav,.mag-tabs,.aptnav) .progress{display:none}
:is(.cat-nav,.mag-tabs,.aptnav)::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--c-primary);transform-origin:0 50%;scale:var(--sp,0) 1;pointer-events:none}
.site-header{--top-bg:transparent;--top-fg:#fff;--lt:#fff;--lt-name:#fff;--lt-wort:#fff;--blur:calc(20px * (1 - var(--ht)));position:fixed;inset:0 0 auto;z-index:50;height:calc(var(--head-h) + 1rem * var(--ht));display:flex;align-items:center;gap:.75rem;padding-inline:var(--gutter);color:color-mix(in srgb,var(--top-fg) var(--htp),var(--c-text));background:color-mix(in srgb,var(--top-bg) var(--htp),color-mix(in srgb,var(--c-bg) 82%,transparent));--sat:calc(1 + .5 * (1 - var(--ht)));backdrop-filter:blur(var(--blur)) saturate(var(--sat));-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));border-bottom:1px solid color-mix(in srgb,transparent var(--htp),color-mix(in srgb,var(--c-line) 80%,transparent));text-shadow:0 1px 3px rgb(0 0 0 / calc(.4 * var(--ht)));view-transition-name:site-header}
.has-hero{--ht:1}
.site-header .btn{text-shadow:none}
.brand{position:relative;display:grid;align-items:center;margin-right:auto;min-height:44px}
.brand .logo{grid-area:1 / 1}
.brand .logo-w{--logo-berg:#fff;--logo-name:#fff;--logo-wort:#fff;opacity:var(--ht)}
.brand .logo-c{--logo-berg:#3b5897;--logo-name:#932450;--logo-wort:#41403e;opacity:calc(1 - var(--ht));filter:none}
.brand .logo{filter:drop-shadow(0 1px 1.5px rgb(0 0 0 / calc(.28 * var(--ht))));width:calc(var(--logo-w) * (1 + .08 * var(--ht)))}
.nav{display:none;gap:.1rem}
.nav a{color:inherit;text-decoration:none;padding:.55rem .8rem;border-radius:999px;font-weight:500;font-size:.95rem}
.nav a:hover,.nav a[aria-current]{background:color-mix(in srgb,currentColor 12%,transparent)}
/* .head-tel (Telefon in der Kopfzeile): nur noch für varianten/ – die Hauptseiten zeigen das Telefon nur im Kontaktblock, Fußbereich und Dock */
.head-tel{display:none;color:inherit;font-weight:600;text-decoration:none;white-space:nowrap;align-items:center;gap:.4rem;min-height:44px;padding:0 .6rem}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:none;color:inherit;cursor:pointer;filter:drop-shadow(0 1px 2px rgb(0 0 0 / calc(.4 * var(--ht))))}
.menu-btn .ico{width:1.6rem;height:1.6rem}
@media (min-width:1000px){.nav,.head-tel{display:flex}
.menu-btn{display:none}
}
@media (min-width:1000px) and (max-width:1279px){.head-tel{width:44px;padding:0;justify-content:center}
.head-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:380px){:root{--logo-w:138px}
.site-header .btn{padding-inline:.8em}
}
.menu{text-shadow:none;inset:auto;top:calc(var(--head-h) + .5rem);right:var(--gutter);left:auto;margin:0;width:min(20rem,calc(100vw - 2 * var(--gutter)));padding:.75rem;border:1px solid var(--c-line);border-radius:var(--r);background:var(--c-bg);color:var(--c-text);box-shadow:var(--shadow);opacity:1;translate:0 0;transition:opacity .25s,translate .3s var(--ease),display .3s allow-discrete,overlay .3s allow-discrete}
.menu:not(:popover-open){opacity:0;translate:0 -8px}
@starting-style{.menu:popover-open{opacity:0;translate:0 -8px}
}
.menu::backdrop{background:color-mix(in srgb,var(--c-dark) 30%,transparent)}
.menu a{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:.4rem .75rem;border-radius:12px;color:inherit;text-decoration:none;font-weight:500}
.menu a:hover{background:var(--c-surface)}
.menu a span{font-size:.78rem;font-weight:600;color:var(--c-primary);width:1.6rem;font-variant-numeric:tabular-nums}
.menu hr{border:0;border-top:1px solid var(--c-line);margin:.5rem 0}
.hero{position:relative;color:#fff}
.hero__stage{position:relative;height:100svh;min-height:34rem;display:grid;align-items:end;overflow:hidden}
.subhero .hero__stage{height:auto;min-height:max(28rem,min(78svh,50rem))}
.subhero .hero__content{padding-bottom:clamp(2.5rem,7svh,4.5rem)}
.crumbs{font-size:.85rem;font-weight:600;margin:0 0 .8rem}
.crumbs a{color:inherit}
.crumbs--sec{font-size:.8rem;font-weight:500;color:var(--c-muted);margin:0 0 .5rem;letter-spacing:.01em}
.crumbs--sec a{color:var(--c-primary);text-decoration:none}
.crumbs--sec a:hover{text-decoration:underline}
.crumbs--sec span{color:var(--c-text)}
.hero__media{position:absolute;inset:0;background:var(--c-water);overflow:hidden}
.hero__media > *,.hero__media img,.hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__media video{opacity:0;transition:opacity 1.2s}
.hero__media video.is-playing{opacity:1}
.hero__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,var(--c-hero-overlay) 25%,color-mix(in srgb,var(--c-hero-overlay) 55%,transparent) 50%,transparent 72%)}
@media (min-width:900px) and (orientation:landscape){.hero__media::after{background:linear-gradient(to right,var(--c-hero-overlay) 10%,color-mix(in srgb,var(--c-hero-overlay) 60%,transparent) 36%,transparent 62%)}
}
.hero__content{position:relative;z-index:1;text-shadow:var(--tshadow);padding:calc(var(--head-h) + 2rem) var(--gutter) clamp(6rem,13svh,8rem);width:min(100%,62rem)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.eyebrow::before{content:"";width:2rem;height:1.5px;background:currentColor;box-shadow:0 1px 2px rgb(0 0 0 / .3)}
.hero .eyebrow{padding:0;background:none;color:rgb(255 255 255 / .8);text-shadow:0 1px 2px rgb(0 0 0 / .45),0 0 14px rgb(0 0 0 / .3);letter-spacing:.14em}
.hero .eyebrow::before{display:none}
.hero h1{font-size:clamp(2.5rem,1.3rem + 5.6vw,6rem);line-height:1.02;margin-bottom:.35em;letter-spacing:-.035em;font-weight:700}
.hero h1 em{font-style:normal;font-weight:400}
.hero .lead{font-size:clamp(1.05rem,.95rem + .55vw,1.35rem);max-width:37rem;margin-bottom:1.6rem;font-weight:500;color:rgb(255 255 255 / .9)}
.hero .btn--ghost{color:#fff;background:rgb(0 0 0 / .16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hero .btn,.hero .chips li{text-shadow:none}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.hero__note{font-size:.9rem;margin-top:.9rem;font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:1.6rem 0 0;list-style:none}
.chips li{padding:.4rem .85rem;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--c-text);background:rgb(255 255 255 / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scroll-cue{position:absolute;z-index:1;left:50%;bottom:1.4rem;translate:-50% 0;color:#fff;display:grid;justify-items:center;gap:.35rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-shadow:var(--tshadow)}
.scroll-cue i{width:1.5rem;height:2.4rem;border:1.5px solid currentColor;border-radius:999px;position:relative;box-shadow:0 0 8px rgb(0 0 0 / .25)}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:.45rem;width:3px;height:.5rem;margin-left:-1.5px;border-radius:2px;background:currentColor}
@media (max-width:999px){.scroll-cue{display:none}
}
@media (max-width:699px){.hero .chips{display:none}
.hero .eyebrow{font-size:.7rem;letter-spacing:.1em}
}
.hero__place{position:absolute;z-index:1;left:var(--gutter);bottom:1.6rem;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:0;text-shadow:var(--tshadow)}
.hero__card{position:relative}
.chapter{position:relative;padding-block:clamp(4.5rem,10vw,8.5rem)}
.chapter--alt{background:var(--c-surface)}
.kicker{display:flex;align-items:center;gap:.8rem;font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-primary);margin-bottom:1rem}
.kicker span{font-size:clamp(1.9rem,1.4rem + 1.8vw,2.8rem);font-weight:300;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.lead{font-size:clamp(1.1rem,1rem + .45vw,1.3rem);line-height:1.55}
.muted{color:var(--c-muted)}
.hint{font-size:.82rem;color:var(--c-muted);margin:0}
.chapter-head{max-width:46rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.split{display:grid;gap:clamp(2rem,5vw,5rem)}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr;align-items:center}
}
details::details-content{display:flow-root;block-size:0;overflow:clip;transition:block-size .3s cubic-bezier(.25,.8,.35,1),content-visibility .3s allow-discrete}
details[open]::details-content{block-size:auto}
.ticks{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:.45rem}
.ticks li{display:flex;gap:.6rem;align-items:baseline}
.ticks li::before{content:"";flex:none;width:.55rem;height:.55rem;border-radius:50%;background:var(--c-water);translate:0 -.1em}
.gal{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:clamp(120px,21vw,220px);gap:clamp(6px,1vw,10px)}
.gal a,.thumbs a,.lead-pic{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--c-surface-2);cursor:zoom-in}
.gal a:first-child{grid-column:span 2;grid-row:span 2}
.gal picture,.thumbs picture{height:100%}
.gal img,.thumbs img,.lead-pic img{transition:transform .9s var(--ease)}
.gal a:hover img,.thumbs a:hover img,.lead-pic:hover img{transform:scale(1.04)}
@media (min-width:700px){.gal{grid-template-columns:repeat(6,1fr)}
.gal a{grid-column:span 2}
.gal a:first-child{grid-column:span 4}
.gal a:last-child:nth-child(3n+2){grid-column:span 4}
}
@media (max-width:699px){.gal a:last-child:nth-child(even){grid-column:span 2}
}
.gal-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.5rem 1.5rem;margin:clamp(3rem,6vw,5rem) 0 1rem}
.gal-head h3{margin:0}
.gal-head p{margin:0;color:var(--c-muted);font-size:.95rem}
.zoom::after{content:"";position:absolute;right:.6rem;bottom:.6rem;width:2rem;height:2rem;border-radius:50%;opacity:0;transition:opacity .3s;background:rgb(255 255 255 / .85) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center / 1rem no-repeat}
.zoom:hover::after,.zoom:focus-visible::after{opacity:1}
/* Seitwärts-Leiste (gemeinsame Komponente: Startseite, Region-Magazin) – Verhalten in app.js (Punkte, „1 / 6“, Pfeile, Tastatur).
   <div class="mag-railwrap"><ul class="mag-rail" tabindex="0" aria-label="…">…</ul><div class="mag-railbar"><div class="mag-dots" role="group"
   aria-label="…: Position"></div><span class="mag-count" aria-hidden="true"></span><span class="mag-nav"><button type="button" data-dir="-1"
   aria-label="Zurück">…</button><button type="button" data-dir="1" aria-label="Weiter">…</button></span></div></div>
   Unten 2,25rem Luft, damit der Kartenschatten nicht abgeschnitten wird (die Leiste darunter rückt dafür hoch).
   --col = Kartenbreite (mit Vorschau auf die nächste Karte). .mag-rail--m = nur auf Telefonen (< 700 px) eine Leiste, darüber bleibt das
   eigene Raster der Liste (dessen Regeln dann in @media (min-width:700px) stehen). Pfeile nur mit Maus/Trackpad ab 700 px. */
/* Themenfarben – erzeugt von tools/site/region.py aus region.json themes[].color */
[data-c=baden-wasser]{--pc:#2f7fc0}
[data-c=mit-kindern]{--pc:#cf257d}
[data-c=wenn-es-regnet]{--pc:#625f9e}
[data-c=spazieren-natur]{--pc:#3e7a4c}
[data-c=berge]{--pc:#2e506a}
[data-c=radfahren]{--pc:#a06612}
[data-c=sport]{--pc:#b8461b}
[data-c=essen-trinken]{--pc:#7e553b}
[data-c=ausfluege-kaernten]{--pc:#5f6b1d}
[data-c=abends-feste]{--pc:#7a3e8e}
[data-c=slowenien-italien]{--pc:#1f7a74}
/* Ende Themenfarben */
[data-c=plan]{--pc:#3a3f4b}
[data-c=prak]{--pc:#8a8f9c}
.mag-railwrap{margin-inline:calc(-1 * var(--gutter))}
.mag-rail{position:relative;margin:0;list-style:none}
.mag-rail:where(:not(.mag-rail--m)){display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:var(--col,min(80%,19rem));gap:var(--mag-gap,clamp(.75rem,1.6vw,1.25rem));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:.5rem var(--gutter) 2.25rem;scrollbar-width:none}
@media (max-width:699px){.mag-rail.mag-rail--m{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-template-rows:none;grid-auto-columns:var(--col,min(80%,19rem));gap:clamp(.75rem,1.6vw,1.25rem);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:.5rem var(--gutter) 2.25rem;scrollbar-width:none}
}
@media (min-width:700px){.mag-railwrap:has(> .mag-rail--m){margin-inline:0}
.mag-railwrap:has(> .mag-rail--m) > .mag-railbar{display:none}
}
/* --bleed: Hülle außerhalb von .wrap – die Leiste läuft bis an den Bildschirmrand, Karten und Punkte bleiben an der Inhaltskante */
.mag-railwrap--bleed{--rail-in:max(var(--gutter),calc((100% - var(--max)) / 2));margin-inline:0}
.mag-railwrap--bleed > .mag-rail{padding-inline:var(--rail-in);scroll-padding-inline:var(--rail-in)}
.mag-railwrap--bleed > .mag-railbar{padding-inline:var(--rail-in)}
.mag-rail::-webkit-scrollbar{display:none}
.mag-rail > *{scroll-snap-align:start;min-width:0;position:relative}
.mag-rail:focus-visible{outline-offset:-3px}
/* Fokusrahmen der Leiste als eigener Kasten um das Kartenband: endet über Punkten/Zähler (die Leiste darunter rückt in den unteren
   Innenabstand hoch); seitlich so breit wie die Leiste (bei --bleed fensterbreit), damit er keine sichtbare Karte durchschneidet */
@supports selector(:has(*)){.mag-railwrap:has(> .mag-rail:focus-visible){position:relative}
.mag-railwrap > .mag-rail:focus-visible{outline:none}
.mag-railwrap:has(> .mag-rail:focus-visible)::after{content:"";position:absolute;z-index:3;inset:3px 3px calc(44px + .3rem);border-radius:var(--r);outline:3px solid var(--c-primary);pointer-events:none}
}
.mag-railbar{position:relative;display:flex;align-items:center;gap:.8rem;padding:0 var(--gutter);min-height:44px;margin-top:-1.25rem;scroll-margin-bottom:6rem}
.mag-railbar[hidden]{display:none}
.mag-dots{display:flex;flex-wrap:wrap;gap:0}
.mag-dots button{display:grid;place-items:center;width:20px;height:28px;padding:0;border:0;background:none;cursor:pointer}
.mag-dots button::after{content:"";width:7px;height:7px;border-radius:99px;background:color-mix(in srgb,var(--c-text) 22%,transparent);transition:width .3s var(--ease),background-color .3s}
.mag-dots button[aria-current]::after{width:18px;background:var(--c-primary)}
.mag-dots button:focus-visible{outline-offset:-2px}
.mag-count{font-size:.8rem;font-weight:600;color:var(--c-muted);font-variant-numeric:tabular-nums}
.mag-nav{display:none;gap:.5rem;margin-left:auto}
.mag-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-bg);color:var(--c-text);cursor:pointer;display:grid;place-items:center}
.mag-nav button:hover:not(:disabled){background:var(--c-surface-2)}
.mag-nav button:disabled{opacity:.35;cursor:default}
@media (hover:hover) and (min-width:700px){.mag-nav{display:flex}
}
@media (prefers-reduced-motion:no-preference){.mag-rail{scroll-behavior:smooth}
}
/* Karten in der Leiste: Foto, Thema (Farbpunkt --pc) + Wegzeit, Titel, kurzer Text („Heute schön bei …“, Pool-Fotos) */
.rcard > a,.rcard > .rcard__in{display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:var(--r);overflow:hidden;background:var(--c-bg);border:1px solid var(--c-line);color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:translate .3s var(--ease)}
.rcard > a:hover{translate:0 -3px}
.rcard > a:focus-visible{outline:3px solid var(--c-primary);outline-offset:2px}
.rcard picture,.rcard .vid-card{position:relative;aspect-ratio:3 / 2}
.rcard__tx{display:grid;align-content:start;gap:.35rem;padding:.95rem 1.1rem 1.2rem}
.rcard__meta{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--pc,var(--c-primary))}
.rcard__meta > span:first-child{display:inline-flex;align-items:center;gap:.4rem}
.rcard__meta > span:first-child::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--pc,var(--c-primary))}
.rcard__tm{display:inline-flex;align-items:center;gap:.3rem;color:var(--c-muted);text-transform:none;letter-spacing:0;font-size:.82rem}
.rcard__tm svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rcard b{font-size:1.12rem;font-weight:600;line-height:1.25}
.rcard__why{font-size:.9rem;line-height:1.45;color:var(--c-muted)}
.picks{--col:min(78%,18.5rem)}
/* Wetter-Umschalter (Sonne / Hitze / Regen) über „Heute schön bei …“ */
.wxseg{display:inline-flex;flex-wrap:wrap;gap:.2rem;padding:.3rem;border-radius:999px;background:var(--c-surface-2);margin-top:.4rem}
.wxseg input{position:absolute;opacity:0;width:1px;height:1px}
.wxseg label{display:inline-flex;align-items:center;gap:.45rem;min-height:42px;padding:.35rem 1.05rem;border-radius:999px;font-weight:600;font-size:.95rem;cursor:pointer;color:var(--c-muted);transition:background-color .25s,color .25s}
.wxseg input:checked + label{background:var(--c-bg);color:var(--c-text);box-shadow:0 1px 3px rgb(20 30 60 / .18)}
.wxseg input:focus-visible + label{outline:3px solid var(--c-primary);outline-offset:2px}
.wx-p{display:none}
.wx:has(#wx-sonne:checked) .wx-p--sonne,.wx:has(#wx-hitze:checked) .wx-p--hitze,.wx:has(#wx-regen:checked) .wx-p--regen{display:block}
.tabs{display:flex;border:1px solid var(--c-line);border-radius:999px;padding:4px;width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;background:var(--c-bg);position:relative;margin-bottom:clamp(1.25rem,3vw,2rem)}
.tabs input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.tabs label{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border-radius:999px;cursor:pointer;white-space:nowrap;font-size:.95rem;font-weight:500;color:var(--c-muted);transition:background .3s,color .3s}
.tabs input:checked + label{background:var(--c-primary);color:var(--c-primary-ink);font-weight:600}
.tabs input:focus-visible + label{outline:3px solid var(--c-primary);outline-offset:2px}
@media (max-width:560px){.tabs{width:100%}
.tabs label{flex:1 1 0;justify-content:center;text-align:center;white-space:normal;line-height:1.15;padding:.35rem .55rem;font-size:.9rem}
}
.apt{container-type:inline-size;scroll-margin-top:calc(var(--head-h) + 5rem)}
.apt + .apt{margin-top:3rem}
@supports selector(:has(*)){.apts .apt{display:none;margin:0}
.apts:has(#tab-1:checked) .apt:nth-of-type(1),.apts:has(#tab-2:checked) .apt:nth-of-type(2),.apts:has(#tab-3:checked) .apt:nth-of-type(3){display:block}
@media (prefers-reduced-motion:no-preference){.apts .apt{transition:opacity .5s var(--ease),translate .5s var(--ease)}
@starting-style{.apts .apt{opacity:0;translate:0 10px}
}
}
}
.apt__grid{display:grid;gap:clamp(1.25rem,3vw,2.5rem)}
@container (min-width:720px){.apt__grid{grid-template-columns:1.25fr 1fr;align-items:start}
}
.lead-pic picture{aspect-ratio:3 / 2}
.apt h3{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);margin-bottom:.4em}
.apt__sub{display:block;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin-bottom:.35rem}
.apt__hl{margin:0 0 1rem;padding:.8rem 1rem;border-left:3px solid var(--c-accent);border-radius:0 .6rem .6rem 0;background:color-mix(in srgb,var(--c-accent) 7%,var(--c-bg))}
.apt__hl b{color:var(--c-accent)}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1rem;padding:0;list-style:none}
.meta li{font-size:.85rem;font-weight:500;padding:.25rem .75rem;border:1px solid var(--c-line);border-radius:999px;background:var(--c-bg)}
.apt__acts{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
@container (min-width:720px){.thumbs{grid-template-columns:repeat(4,1fr)}
}
.thumbs a{aspect-ratio:4 / 3}
.thumbs .thumbs__more{display:grid;place-content:center;text-align:center;gap:.1rem;cursor:pointer;background:var(--c-primary);color:var(--c-primary-ink);text-decoration:none;font-size:.9rem;font-weight:500}
.thumbs__more b{font-size:1.6rem;font-weight:600;letter-spacing:-.02em;line-height:1}
.more{font-weight:600;display:inline-flex;align-items:center;gap:.35rem;min-height:44px}
.equip-grid{display:grid;gap:clamp(1.25rem,3vw,2rem)}
@media (min-width:900px){.equip-grid{grid-template-columns:1fr 1fr}
}
.equip-card{background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--r);padding:clamp(1.25rem,3vw,2rem)}
.equip-card h3{margin-bottom:.2em}
.equip-card > p{color:var(--c-muted);margin-bottom:.6rem;font-size:.95rem}
.equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr));gap:0 1.5rem;list-style:none;margin:0;padding:0}
.equip li{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--c-line);font-size:.97rem}
.equip li::before{content:"";flex:none;width:.95rem;height:.5rem;margin:0 .2rem .25rem;border:solid var(--c-primary);border-width:0 0 2px 2px;rotate:-45deg}
.price-grid{display:grid;gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(3.5rem,7vw,6rem)}
@media (min-width:900px){.price-grid{grid-template-columns:.9fr 1.1fr}
}
.price-card{background:var(--c-dark);color:var(--c-dark-ink);border-radius:calc(var(--r) + 4px);padding:clamp(1.5rem,4vw,2.5rem)}
.price-card a:not(.btn){color:inherit}
.price-card .kicker{color:inherit;margin:0}
.price{font-size:clamp(2.8rem,2rem + 3.6vw,4.4rem);font-weight:600;letter-spacing:-.03em;line-height:1;margin:.3rem 0 .2rem}
.price small{display:block;margin-top:.4rem;font-size:1rem;font-weight:500;letter-spacing:0}
.price-note{margin:.5rem 0 0;font-size:1rem;font-weight:500}
.price-card table{width:100%;border-collapse:collapse;font-size:.93rem;margin:1.2rem 0}
.price-card th,.price-card td{text-align:left;padding:.5rem 0;border-bottom:1px solid color-mix(in srgb,var(--c-dark-ink) 22%,transparent);vertical-align:top}
.price-card th{font-weight:600;padding-right:1rem}
.price-card h3{font-size:1.05rem;margin:1.6rem 0 0}
.price-card .sp{margin-top:.8rem;font-size:1rem}
.price-card .sp th,.price-card .sp td{vertical-align:middle}
.price-card .sp th{font-weight:500}
.price-card .sp td{text-align:right;white-space:nowrap;font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.price-card .sp td small{display:block;font-size:.75rem;font-weight:500;letter-spacing:0;opacity:.8}
.price-card .sp tr:first-child th,.price-card .sp tr:first-child td{border-top:1px solid color-mix(in srgb,var(--c-dark-ink) 22%,transparent)}
.price-card .sp th small{display:block;font-size:.8rem;opacity:.8}
.price-note{margin:0;font-size:.9rem;opacity:.85}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:48px;padding:.8rem 0;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;line-height:1;font-weight:300;color:var(--c-primary);transition:rotate .3s var(--ease);flex:none}
.faq details[open] summary::after{rotate:45deg}
.faq details p{margin:0 0 1rem;color:var(--c-muted)}
.band{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;margin-top:clamp(2.5rem,5vw,4rem);padding:clamp(1.4rem,4vw,2.4rem);border-radius:calc(var(--r) + 4px);background:var(--c-dark);color:var(--c-dark-ink)}
.band h3{margin:0 0 .3rem}
.band p{margin:0;max-width:40rem}
.site-footer{background:var(--c-dark);color:var(--c-dark-ink);padding:clamp(3rem,6vw,5rem) 0 calc(6rem + env(safe-area-inset-bottom))}
.site-footer a{color:inherit}
.foot-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.site-footer h2{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.2rem}
.site-footer li a{display:inline-flex;min-height:36px;align-items:center}
.foot-logo{display:inline-block;--logo-berg:#fff;--logo-name:#fff;--logo-wort:#fff}
.foot-logo .logo{width:200px;filter:drop-shadow(0 1px 1.5px rgb(0 0 0 / .28))}
.copy{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid color-mix(in srgb,var(--c-dark-ink) 15%,transparent);font-size:.85rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}
.copy .foot-guest{white-space:nowrap}
@media (min-width:1000px){.site-footer{padding-bottom:3rem}
}
/* Bildansicht als Story (story.js): Foto/Video füllt den Bildschirm, Ken Burns, Fortschrittsbalken oben, Bildtext unten */
.lb{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:#fff;overflow:hidden;opacity:var(--dim,1)}
.lb[open]{display:block}
.lb::backdrop{background:#000;transition:opacity .35s}
.lb.is-out,.lb.is-out::backdrop{background:transparent}
.lb.is-out::backdrop{opacity:0}
.lb__media{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x}
.lb__media::-webkit-scrollbar{display:none}
.lb__slide{position:relative;flex:0 0 100%;height:100%;margin:0;scroll-snap-align:center;scroll-snap-stop:always;overflow:hidden}
.lb__frame{position:absolute;inset:0;overflow:hidden}
.lb__slide picture{display:contents}
.lb__slide source{display:none}
.lb__slide :is(img,video){position:absolute;left:0;top:0;display:block;max-width:none;max-height:none;background:#111 center / cover no-repeat;will-change:transform;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.lb__slide video{object-fit:cover}
/* Fortschrittsbalken je Bild (wie Stories) */
.lb__bars{position:absolute;z-index:2;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;display:flex;gap:4px;pointer-events:none}
.lb__bars span{flex:1;height:3px;border-radius:2px;background:rgb(255 255 255 / .35);overflow:hidden}
.lb__bars i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
/* Verläufe oben/unten, damit Balken, Knöpfe und Text auf hellen Fotos lesbar bleiben */
.lb::before,.lb::after{content:"";position:absolute;z-index:1;left:0;right:0;pointer-events:none}
.lb::before{top:0;height:120px;background:linear-gradient(rgb(0 0 0 / .45),transparent)}
.lb::after{bottom:0;height:160px;background:linear-gradient(transparent,rgb(0 0 0 / .55))}
.lb__cap{position:absolute;z-index:2;left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom));margin:0 auto;max-width:44rem;text-align:center;font-size:.95rem;line-height:1.4;color:#fff;text-shadow:0 1px 4px rgb(0 0 0 / .5);pointer-events:none}
.lb__cap b{display:block;margin-top:.2rem;font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;opacity:.8}
.lb button{position:absolute;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgb(0 0 0 / .28);color:#fff;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb button .ico{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;fill:none}
.lb button:hover{background:rgb(0 0 0 / .5)}
.lb button[disabled]{opacity:0;pointer-events:none}
.lb :focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb .x{top:calc(max(10px,env(safe-area-inset-top)) + 12px);right:10px}
.lb .pp{top:calc(max(10px,env(safe-area-inset-top)) + 12px);right:60px}
.lb .pp .ico--play{fill:currentColor;stroke:none}
.lb .pp:not(.is-paused) .ico--play,.lb .pp.is-paused .ico--pause{display:none}   /* zwei Zeichen statt CSS d:path() – Safari kann das nicht */
.lb .pv,.lb .nx{top:50%;translate:0 -50%;left:16px;width:52px;height:52px}
.lb .nx{left:auto;right:16px}
@media (hover:none),(max-width:699px){.lb .pv,.lb .nx{display:none}}   /* Telefon: antippen links/rechts */
.lb button,.lb__cap,.lb__bars,.lb::before,.lb::after{transition:opacity .3s}
.lb.is-out :is(button,.lb__cap,.lb__bars),.lb.is-out::before,.lb.is-out::after,.lb.is-out .lb__slide:not(.is-cur){opacity:0;transition:opacity .2s}
@starting-style{.lb[open] :is(button,.lb__cap,.lb__bars){opacity:0}}
.lb.is-fit .lb__slide :is(img,video){background-color:transparent}
html:has(.lb[open]){overflow:hidden}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){.progress,:is(.cat-nav,.mag-tabs,.aptnav)::after{animation:grow linear both;animation-timeline:scroll(root)}
@keyframes grow{to{scale:1 1}
}
.has-hero{animation:headstate linear both;animation-timeline:scroll(root);animation-range:0 30svh}
@keyframes headstate{from{--ht:1}
to{--ht:0}
}
}
@supports (animation-timeline:view()){.reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry min(70%,14rem)}
@keyframes rise{from{opacity:0;translate:0 2.5rem}
}
.gal a{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
}
@media (prefers-reduced-motion:reduce){.hero__media video{display:none}
*,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
.hero h1{font-size:clamp(2rem,1.05rem + 3.9vw,4.4rem);margin-bottom:.4em}
.hero .lead{font-size:clamp(.98rem,.93rem + .3vw,1.15rem);max-width:33rem;margin-bottom:1.3rem}
.hero .eyebrow{font-size:.72rem;margin-bottom:.8rem}
.hero .btn{font-size:.95rem}
.hero .chips{font-size:.88rem}
@supports not selector(:popover-open){.menu[popover]{display:none}.menu[popover].open{display:block;position:fixed;z-index:70}}
/* E-Bike: „Bei uns inklusive“-Karte (ebike.html + Startseite) und kleine Bildnachweise */
.incl{background:var(--c-dark);color:var(--c-dark-ink);border-radius:calc(var(--r) + 4px);padding:clamp(1.4rem,4vw,2.4rem);box-shadow:var(--shadow)}
.incl__tag{display:inline-block;margin:0 0 1.2rem;padding:.35rem .85rem;border-radius:999px;background:var(--c-accent);color:var(--c-accent-ink);font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.incl ul{list-style:none;margin:0;padding:0;display:grid;gap:1.1rem}
.incl li{display:flex;gap:1rem;align-items:flex-start}
.incl__ico{flex:none;display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;background:rgb(255 255 255 / .13)}
.incl__ico .ico{width:1.65rem;height:1.65rem}
.incl li b{display:block;font-size:clamp(1.08rem,1rem + .45vw,1.32rem);line-height:1.25;margin:.15rem 0 .25rem}
.incl li div span{display:block;font-size:.95rem;line-height:1.5;opacity:.88}
.incl__note{margin:1.3rem 0 0;padding-top:1rem;border-top:1px solid rgb(255 255 255 / .2);font-size:.9rem;opacity:.88}
.credit{font-size:.72rem;line-height:1.35;color:var(--c-muted)}
.credit a{color:inherit}
.menu{max-height:calc(100vh - var(--head-h) - 1rem);max-height:calc(100dvh - var(--head-h) - 1rem);overflow-y:auto}

/* Startseite: „Start“ erst nach dem Hero zeigen (Klasse .is-scrolled setzt app.js) */
.nav .nav-start{display:inline-block;max-width:6em;overflow:hidden;white-space:nowrap;vertical-align:middle;transition:max-width .35s var(--ease),opacity .25s,padding .35s var(--ease),margin .35s var(--ease),visibility .35s}
html:not(.is-scrolled) .has-hero .nav .nav-start{max-width:0;opacity:0;padding-inline:0;margin-inline:0;pointer-events:none;visibility:hidden}
html:not(.is-scrolled) .has-hero .menu .nav-start{display:none}
/* ☰-Menü: Nummern per CSS-Zähler – ausgeblendete Einträge (z. B. „Start“ im Hero) zählen nicht mit */
.menu{counter-reset:mn}
.menu a:has(.mn){counter-increment:mn}
.menu .mn::before{content:counter(mn,decimal-leading-zero)}
/* Bildnachweis (bildnachweis.html): kein Hero – Kopfzeile ist von Anfang an hell (body ohne .has-hero) */
.bn-top{padding:calc(var(--head-h) + clamp(2rem,6vw,4rem)) 0 clamp(1.8rem,4vw,2.8rem);background:var(--c-surface);border-bottom:1px solid var(--c-line)}
.bn-top h1{font-size:clamp(2.2rem,1.5rem + 3vw,3.8rem);letter-spacing:-.03em;margin-bottom:.3em}
.bn-top .lead{max-width:46rem;margin:0}
.bn{padding-block:clamp(2.8rem,6vw,4.8rem)}
.bn h2{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}
.bn .chapter-head{margin-bottom:clamp(1.5rem,3vw,2.2rem)}
.bn .chapter-head p{max-width:46rem;margin:0}
.bn-grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.bn-card{display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r);overflow:hidden}
.bn-card picture{display:block;aspect-ratio:3 / 2;background:var(--c-surface-2)}
.bn-card img{display:block;width:100%;height:100%;object-fit:cover}
.bn-tx{padding:.9rem 1.1rem 1.15rem}
.bn-tx h3{font-size:1.1rem;letter-spacing:-.01em;margin-bottom:.55rem}
.bn-tx dl{margin:0;display:grid;gap:.3rem;font-size:.84rem;line-height:1.45}
.bn-tx dl div{display:grid;grid-template-columns:4.9rem 1fr;gap:.5rem}
.bn-tx dt{color:var(--c-muted);font-weight:600}
.bn-tx dd{margin:0;overflow-wrap:anywhere}
.bn-list{max-width:54rem;margin:0;padding-left:1.1rem;display:grid;gap:.9rem}
.bn-list ul{margin:.5rem 0 0;padding-left:1.1rem;display:grid;gap:.25rem;font-size:.92rem}

/* Hero-Eyebrow: „· Kärnten“ auf schmalen Bildschirmen ausblenden */
@media (max-width:600px){.hero .eyebrow .eb-x{display:none}}

/* Sprachumschalter (tools/site/i18n.md, Markup: tools/site/i18n.py lang_switch): .lang in der Kopfzeile zwischen .nav und „Anfragen“
   (EN/DE, sieht aus wie die Nav-Links und folgt wie sie der Kopfzeile: weiß über dem Hero, Textfarbe im hellen Zustand);
   schmaler als 420 px nur im Menü (.menu-lang, letzter Eintrag, Kürzel EN/DE aus hreflang in der Spalte der Nummern).
   .lang-switch = gleicher Stil (Name aus dem ersten Spec-Entwurf). */
:is(.lang,.lang-switch){display:none;place-items:center;min-width:44px;min-height:44px;padding:0 .6rem;border-radius:999px;color:inherit;text-decoration:none;font-weight:600;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 35%,transparent);transition:background-color .2s,box-shadow .2s}
:is(.lang,.lang-switch):hover{background:color-mix(in srgb,currentColor 12%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 55%,transparent)}
@media (min-width:420px){:is(.lang,.lang-switch){display:inline-grid}}
@media (min-width:1000px){:is(.lang,.lang-switch){min-width:0;min-height:36px;padding:0 .7rem;margin-left:-.2rem}}
.menu .menu-lang{font-weight:600}
.menu .menu-lang::before{content:attr(hreflang);width:1.6rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c-primary)}