/* seite-region.css – nur /tirol, /oesterreich und /deutschland, nach site.css geladen (Runde 5 Region, 15.09.2026).
   Ruhige Karten auf dem fixierten Navy-Grund, keine Rahmenlinien, kein Gold. Die Inntal-Grafik ist selbst gezeichnet
   (schematisch, keine Karte eines Drittanbieters); die Orte stehen zusaetzlich als Text in den Karten darunter. */

/* ---------- Abschnitte ---------- */
.rg-abschnitt { padding-block: var(--abschnitt); }
.rg-abschnitt--eng { padding-top: calc(var(--abschnitt) * .45); }
.rg-einleitung { max-width: 40rem; margin-top: .9rem; color: var(--text-2); }

/* ---------- Orte & Taeler: schematische Inntal-Linie ---------- */
.inntal { position: relative; margin: 0 0 clamp(1rem, 2.5vw, 1.5rem); padding: clamp(1rem, 2.4vw, 1.75rem) clamp(.75rem, 2vw, 1.5rem) .9rem; border-radius: var(--radius-l); background-color: var(--karte); }
.inntal__svg { display: block; width: 100%; max-width: 1100px; height: auto; margin-inline: auto; overflow: visible; }
.inntal__inn { fill: none; stroke: rgba(198, 208, 238, .55); stroke-width: 3; stroke-linecap: round; }
.inntal__tal { fill: none; stroke: rgba(198, 208, 238, .3); stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.inntal__punkt { fill: #00022e; stroke: var(--hell-300); stroke-width: 2; }
.inntal__punkt--haupt { fill: var(--hell-100); stroke: var(--hell-100); }
.inntal__punkt--tal { fill: var(--hell-400); stroke: none; }
.inntal__name { fill: var(--text); font-family: var(--schrift); font-size: 15px; font-weight: 500; }
.inntal__name--haupt { fill: var(--ivory); font-size: 18px; font-weight: 600; }
.inntal__name--tal { fill: var(--text-3); font-size: 13.5px; font-weight: 500; }
.inntal__fluss { fill: var(--hell-500); font-family: var(--schrift); font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.inntal__notiz { margin-top: .35rem; font-size: .75rem; line-height: 1.4; color: var(--text-3); text-align: right; }
@media (max-width: 899px) { .inntal { display: none; } }

/* ---------- Bezirks-Karten mit Orten ---------- */
.rg-bezirke { display: grid; gap: .625rem; }
@media (min-width: 700px) { .rg-bezirke { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem; } }
@media (min-width: 1100px) { .rg-bezirke { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rg-bezirk { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.05rem, 2.2vw, 1.45rem); border-radius: var(--radius-m); background-color: var(--karte); }
.rg-bezirk__titel { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--ivory); text-wrap: balance; }
.rg-bezirk__text { margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--text-3); }
.rg-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .85rem; }
.rg-chip { display: inline-flex; align-items: center; min-height: 32px; padding: .3rem .7rem; border-radius: 999px; background-color: var(--weiss-06); color: var(--text); font-size: .8125rem; font-weight: 500; line-height: 1.25; }

/* ---------- Fotos aus Tirol ---------- */
.rg-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-top: clamp(.875rem, 2.5vw, 1.25rem); }
@media (min-width: 700px) { .rg-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; } }
.rg-foto { position: relative; min-width: 0; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-m); box-shadow: var(--schatten); }
.rg-foto:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 700px) { .rg-foto, .rg-foto:nth-child(3) { grid-column: auto; aspect-ratio: 4 / 3; } }
.rg-foto .foto::after { background: linear-gradient(180deg, rgba(0, 1, 24, 0) 52%, rgba(0, 1, 24, .72) 100%); }
.rg-foto__ort { position: absolute; left: .85rem; right: .85rem; bottom: .7rem; z-index: 3; font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--ivory); }

/* ---------- Saison ---------- */
.rg-saison { display: grid; gap: 1rem; }
@media (min-width: 800px) { .rg-saison { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; } }
.rg-saisonkarte { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: var(--radius-l); background-color: var(--karte); }
.rg-saisonkarte__bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.rg-saisonkarte__inhalt { display: flex; flex: 1; flex-direction: column; padding: clamp(1.1rem, 2.4vw, 1.6rem); }
.rg-saisonkarte__zeit { font-size: .6875rem; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--hell-400); }
.rg-saisonkarte__titel { margin-top: .35rem; font-size: clamp(1.3125rem, 1.1rem + .8vw, 1.75rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; color: var(--ivory); text-wrap: balance; }
.rg-saisonkarte__text { margin-top: .5rem; color: var(--text-2); }

/* ---------- Zwei Karten (Betriebe / Bewerber:innen) ---------- */
.rg-zwei { display: grid; gap: 1rem; }
.rg-saison + .rg-zwei { margin-top: 1rem; }
@media (min-width: 800px) { .rg-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; } .rg-saison + .rg-zwei { margin-top: 1.125rem; } }
.rg-karte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-l); background-color: var(--karte); }
.rg-karte__label { display: inline-flex; align-items: center; gap: .5em; font-size: .6875rem; font-weight: 600; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--hell-400); }
.rg-karte__label .icon { width: .95rem; height: .95rem; }
.rg-karte__titel { margin-top: .45rem; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--ivory); text-wrap: balance; }
.rg-karte__text { max-width: 34rem; margin-top: .5rem; color: var(--text-2); }
.rg-karte > .textlink { margin-top: auto; padding-top: .9rem; }
.rg-schritte { display: grid; gap: .85rem; margin-top: 1.15rem; margin-bottom: .25rem; }
.rg-schritt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: .8rem; align-items: start; }
.rg-schritt__nr { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--navy-900); background-color: var(--hell-100); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rg-schritt__titel { display: block; padding-top: .3rem; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ivory); }
.rg-schritt__text { display: block; margin-top: .1rem; font-size: .875rem; line-height: 1.5; color: var(--text-2); }

/* ---------- Branchen in der Region ---------- */
.rg-branchen { display: grid; gap: .625rem; }
@media (min-width: 600px) { .rg-branchen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rg-branchen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; } }
.rg-branchen > li { min-width: 0; }
.rg-branche { display: flex; align-items: flex-start; gap: .9rem; height: 100%; min-height: 88px; padding: 1.05rem 1.1rem 1.05rem 1rem; border-radius: var(--radius-m); background-color: var(--karte); color: var(--ivory); text-decoration: none; transition: background-color .2s; }
.rg-branche__icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; color: var(--hell-200); background-color: var(--weiss-06); transition: background-color .2s, color .2s; }
.rg-branche__icon .icon { width: 1.2rem; height: 1.2rem; }
.rg-branche__inhalt { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.rg-branche__titel { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; -webkit-hyphens: manual; hyphens: manual; }
.rg-branche__text { margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--text-2); }
.rg-branche__pfeil { width: 1rem; height: 1rem; margin-top: .8rem; color: var(--text-3); transition: transform .3s var(--ease-aus), color .2s; }
.rg-branche:is(:hover, :focus-visible) { background-color: var(--karte-2); }
.rg-branche:is(:hover, :focus-visible) .rg-branche__icon { color: var(--navy-900); background-color: var(--hell-100); }
.rg-branche:is(:hover, :focus-visible) .rg-branche__pfeil { transform: translateX(3px); color: var(--ivory); }
.rg-branche:focus-visible { outline-offset: 3px; }
.rg-mehr { margin-top: .75rem; }

/* ---------- Bundeslaender ---------- */
.bl-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 700px) { .bl-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; } }
.bl-liste > li { min-width: 0; }
.bl { display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 68px; padding: .75rem 1rem; border-radius: var(--radius-m); background-color: var(--karte); color: var(--ivory); text-decoration: none; }
.bl__name { font-size: .9375rem; font-weight: 600; line-height: 1.25; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
.bl__stadt { margin-top: .15rem; font-size: .8125rem; line-height: 1.35; color: var(--text-3); }
.bl-liste > .bl-liste__schwerpunkt { grid-column: 1 / -1; }
.bl--schwerpunkt { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; padding: .9rem 1.1rem; background-color: rgba(174, 187, 229, .16); transition: background-color .2s; }
.bl--schwerpunkt .bl__text { display: flex; flex-direction: column; min-width: 0; }
.bl--schwerpunkt .bl__name { font-size: 1.125rem; }
.bl--schwerpunkt .bl__stadt { color: var(--text-2); }
.bl__pfeil { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: var(--ivory); background-color: var(--weiss-10); transition: background-color .2s, color .2s; }
.bl__pfeil .icon { width: 1rem; height: 1rem; transition: transform .3s var(--ease-aus); }
.bl--schwerpunkt:is(:hover, :focus-visible) { background-color: rgba(174, 187, 229, .26); }
.bl--schwerpunkt:is(:hover, :focus-visible) .bl__pfeil { color: var(--navy-900); background-color: var(--hell-100); }
.bl--schwerpunkt:is(:hover, :focus-visible) .bl__pfeil .icon { transform: translateX(3px); }

/* ---------- Hinweis (Deutschland) ---------- */
.rg-hinweis { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 1rem; align-items: start; padding: clamp(1.15rem, 3vw, 1.75rem); border-radius: var(--radius-l); background-color: var(--karte); }
.rg-hinweis__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--hell-200); background-color: var(--weiss-06); }
.rg-hinweis__icon .icon { width: 1.15rem; height: 1.15rem; }
.rg-hinweis__titel { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--ivory); }
.rg-hinweis__text { max-width: 46rem; margin-top: .3rem; color: var(--text-2); }

/* ---------- Fragen & Antworten (details/summary, ohne JavaScript) ---------- */
.faq__raster { display: grid; gap: clamp(1.25rem, 4vw, 4rem); }
@media (min-width: 1024px) { .faq__raster { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.faq__raster .kopfzeile { margin-bottom: 0; }
.faq__liste { display: grid; gap: .5rem; }
.faq__eintrag { border-radius: var(--radius-m); background-color: var(--karte); transition: background-color .2s; }
.faq__eintrag[open] { background-color: var(--karte-2); }
.faq__frage { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .8rem 1rem .8rem 1.15rem; border-radius: var(--radius-m); color: var(--ivory); font-size: 1rem; font-weight: 600; line-height: 1.35; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.faq__frage::-webkit-details-marker { display: none; }
.faq__frage::marker { content: ""; }
.faq__frage:focus-visible { outline-offset: -2px; }
.faq__zeichen { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: var(--hell-200); background-color: var(--weiss-06); transition: transform .3s var(--ease-aus), background-color .2s; }
.faq__zeichen .icon { width: 1rem; height: 1rem; }
.faq__eintrag[open] .faq__zeichen { transform: rotate(45deg); background-color: var(--weiss-16); }
@media (hover: hover) { .faq__frage:hover .faq__zeichen { background-color: var(--weiss-16); } }
.faq__antwort { padding: 0 1.15rem 1.1rem; color: var(--text-2); }
.faq__antwort p { max-width: 42rem; }
@media (prefers-reduced-motion: reduce) { .faq__zeichen, .faq__eintrag { transition: none; } }

@media (max-width: 419px) {
  .rg-branche { gap: .75rem; padding-inline: .85rem .9rem; }
  .rg-branche__icon { width: 40px; height: 40px; }
  .bl { padding-inline: .8rem; }
  .bl__name { font-size: .875rem; }
}

/* Feinheiten (Runde 5 Region, nach der ersten Ansicht) */
/* Titelzeile darf umbrechen ("in ganz / Oesterreich" auf schmalen Telefonen) */
.hero__zeile.hero__zeile--umbruch { white-space: normal; }
.rg-abschnitt .kopfzeile + .branchen-chips { margin-top: 0; }
.rg-chips--gross { margin: 0 0 1.25rem; }
.rg-chips--gross .rg-chip { min-height: 40px; padding-inline: 1rem; font-size: .875rem; }
.rg-weitere { padding-block: calc(var(--abschnitt) * .45) 0; }
.faq__antwort a { color: var(--hell-100); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.faq__antwort a:is(:hover, :focus-visible) { color: #ffffff; }
.faq__raster .kopfzeile .textlink { margin-top: .5rem; }
/* keine einzelnen Woerter in der letzten Zeile auch in Span-Texten (WebKit-Messung: "vor." / "Start." / "Bergbahnen.") */
.rg-schritt__text, .rg-schritt__titel, .rg-branche__text, .rg-bezirk__text, .rg-saisonkarte__text, .rg-karte__text, .bl__stadt { text-wrap: pretty; }