/* Ortsseiten Kanton Glarus – Foto-Hero und Regionslisten */
.region-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--header-height) + clamp(56px, 8vw, 104px)) 0 clamp(56px, 7vw, 92px);
  background: #071322;
}
.region-hero__media {
  position: absolute; inset: 0; z-index: 0; display: block;
  background-image: url("../img/region-sunrise-1800.jpg");
  background-size: cover; background-position: 50% 56%; background-repeat: no-repeat;
}
@media (max-width: 900px) { .region-hero__media { background-image: url("../img/region-sunrise-900.jpg"); } }
.region-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(4, 11, 20, .94) 0%, rgba(4, 11, 20, .84) 34%, rgba(4, 11, 20, .52) 62%, rgba(4, 11, 20, .12) 100%),
    linear-gradient(180deg, rgba(4, 11, 20, .6) 0%, rgba(4, 11, 20, 0) 16%, rgba(4, 11, 20, 0) 62%, rgba(5, 13, 24, .8) 100%);
}
.region-hero__inner { position: relative; z-index: 2; max-width: 800px; }
.region-hero h1 { max-width: 18ch; margin-bottom: 20px; }
.region-hero .lead { color: #dae5f2; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.region-hero .breadcrumbs { margin-bottom: 22px; align-items: center; }
.region-hero .breadcrumbs a + a::before { content: "/"; margin-right: 8px; color: #7f93aa; }
.region-hero .breadcrumbs a { color: #cfdcea; }
.region-hero .breadcrumbs a:hover { color: #fff; }
.region-hero__proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; padding-top: 24px; border-top: 1px solid rgba(210, 228, 246, .22); }
.region-hero__proof span { display: inline-flex; align-items: center; gap: 9px; color: #e3ecf7; font-size: .9rem; font-weight: 600; }
.region-hero__proof i {
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  color: #04101b; background: var(--green); font-style: normal; font-size: .66rem; font-weight: 800;
}
.faq-list { display: grid; gap: 10px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .022); overflow: hidden; transition: border-color .25s, background .25s; }
.faq-item[open] { border-color: rgba(81, 222, 244, .3); background: rgba(81, 222, 244, .045); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-size: 1.02rem; font-weight: 650; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: 0 0 auto; color: var(--page-b); font-size: 1.3rem; transition: transform .25s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 22px 22px; max-width: 74ch; color: var(--text-soft); font-size: .97rem; }
.region-links { display: flex; flex-wrap: wrap; gap: 10px; }
.region-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft);
  background: rgba(255, 255, 255, .03); font-size: .9rem; font-weight: 600;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--ease);
}
.region-links a:hover { color: #fff; border-color: rgba(81, 222, 244, .42); background: rgba(81, 222, 244, .09); transform: translateY(-2px); }
.region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.region-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .022); color: var(--text); }
.region-card strong { font-size: 1.02rem; font-weight: 650; }
.region-card span { color: var(--muted); font-size: .84rem; }
.region-card .link-arrow { margin-top: 8px; font-size: .86rem; }
@media (max-width: 900px) {
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-hero__media img { object-position: 58% 56%; }
  .region-hero { padding-top: calc(var(--header-height) + 220px); }
  .region-hero::after { background: linear-gradient(180deg, rgba(4, 11, 20, .5) 0%, rgba(4, 11, 20, 0) 14%, rgba(4, 11, 20, 0) 34%, rgba(5, 13, 24, .82) 52%, rgba(5, 13, 24, .96) 74%); }
}
@media (max-width: 620px) { .region-grid { grid-template-columns: 1fr; } }


/* Regionsvarianten des Hero-Bildes. Solange keine eigenen See-/Stadtmotive
   freigegeben sind, wird bewusst das vorhandene Landschaftsbild verwendet. */
.region-hero--see .region-hero__media {
  background-image: url("../img/region-sunrise-1800.jpg");
  background-position: 50% 56%;
}
.region-hero--stadt .region-hero__media {
  background-image: url("../img/region-sunrise-1800.jpg");
  background-position: 50% 50%;
}
@media (max-width: 900px) {
  .region-hero--see .region-hero__media { background-image: url("../img/region-sunrise-900.jpg"); }
  .region-hero--stadt .region-hero__media { background-image: url("../img/region-sunrise-900.jpg"); }
}


/* ============================================================
   Navigation: Stile für das aktuelle Menü-Markup (.mega).
   Bewusst mit festen Werten statt Variablen, damit die Seiten
   auch dann korrekt aussehen, wenn eine ältere styles.css
   auf dem Server liegt.
   ============================================================ */
.desktop-nav { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.nav-item { position: relative; }
.nav-item:hover .nav-chevron, .nav-item:focus-within .nav-chevron { transform: rotate(180deg); }
.mega {
  position: absolute; z-index: 40; isolation: isolate; overflow: hidden;
  top: calc(100% + 11px); left: 50%; width: min(720px, 91vw); padding: 18px;
  border: 1px solid rgba(178, 207, 237, .22); border-radius: 22px; color: #eaf1f9;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 95, 122, .11), transparent 34%),
    radial-gradient(circle at 88% 5%, rgba(81, 222, 244, .12), transparent 36%),
    linear-gradient(155deg, rgba(9, 24, 42, .985), rgba(5, 16, 30, .99));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .5), 0 0 46px rgba(80, 168, 248, .07);
  backdrop-filter: blur(24px);
  opacity: 0; visibility: hidden; transform: translate(-50%, 12px);
  transition: opacity .2s cubic-bezier(.22, .61, .36, 1), transform .2s cubic-bezier(.22, .61, .36, 1), visibility .2s;
}
.mega::before {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .48;
  background-image: radial-gradient(rgba(122, 207, 255, .34) .7px, transparent .7px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 74%);
  mask-image: linear-gradient(to bottom, #000, transparent 74%);
}
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.mega-link {
  --mega-color: #50a8f8; --mega-rgb: 80, 168, 248;
  position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 13px;
  min-height: 76px; padding: 12px; overflow: hidden;
  border: 1px solid rgba(var(--mega-rgb), .08); border-radius: 16px; background: rgba(255, 255, 255, .018);
  transition: background .2s, border-color .2s, transform .2s cubic-bezier(.22, .61, .36, 1), box-shadow .2s;
}
.mega-link[href$="automatisierung.html"] { --mega-color: #57e3b2; --mega-rgb: 87,227,178; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9a4 4 0 0 1 0 8H6'/%3E%3Cpath d='m8 4-4 3 4 3M9 12l4 3-4 3'/%3E%3Ccircle cx='19' cy='18' r='2'/%3E%3C/svg%3E"); }
.mega-link[href$="ale.html"] { --mega-color: #50a8f8; --mega-rgb: 80,168,248; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M8 13h3M8 16h6M15 13h1'/%3E%3C/svg%3E"); }
.mega-link[href$="branchen.html"] { --mega-color: #a98bff; --mega-rgb: 169,139,255; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M3 12h18M10 12v2h4v-2'/%3E%3C/svg%3E"); }
.mega-link[href$="kmu.html"] { --mega-color: #51def4; --mega-rgb: 81,222,244; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M6 21V7l6-4 6 4v14M9 10h.01M9 14h.01M9 18h.01M15 10h.01M15 14h.01M15 18h.01'/%3E%3C/svg%3E"); }
.mega-link[href$="referenzen.html"] { --mega-color: #ffc857; --mega-rgb: 255,200,87; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m16 8-2.4 5.6L8 16l2.4-5.6L16 8z'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
.mega-link[href$="inspiration.html"] { --mega-color: #ffc857; --mega-rgb: 255,200,87; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.3.3.5.7.5 1.1h6c0-.4.2-.8.5-1.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.mega-link[href$="neugruender.html"] { --mega-color: #ff6685; --mega-rgb: 255,102,133; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5c3.5-3.5 6.5-3 7-3 0 .5.5 3.5-3 7l-4 4-5-5 5-3z'/%3E%3Cpath d='m9 8-4 1-3 3 6 1M14 13l1 6-3 3-1-5M6 17c-2 1-3 4-3 4s3-1 4-3'/%3E%3Ccircle cx='15.5' cy='6.5' r='1.5'/%3E%3C/svg%3E"); }
.mega-link[href$="ratgeber.html"] { --mega-color: #a98bff; --mega-rgb: 169,139,255; --mega-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h5v18H6a2 2 0 0 1-2-2z'/%3E%3Cpath d='M11 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7'/%3E%3Cpath d='M14 8h3M14 12h3'/%3E%3C/svg%3E"); }
.mega-link:hover, .mega-link:focus-visible {
  background: linear-gradient(135deg, rgba(var(--mega-rgb), .095), rgba(255, 255, 255, .025));
  border-color: rgba(var(--mega-rgb), .34); transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22), 0 0 26px rgba(var(--mega-rgb), .08);
}
.mega-link .mega-icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 50px; height: 50px; font-size: 0;
  border: 1px solid rgba(var(--mega-rgb), .34); border-radius: 15px; color: var(--mega-color);
  background: linear-gradient(145deg, rgba(var(--mega-rgb), .23), rgba(var(--mega-rgb), .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), box-shadow .22s, border-color .22s;
}
.mega-link .mega-icon::before {
  content: ""; width: 23px; height: 23px; background: currentColor;
  -webkit-mask: var(--mega-icon) center / contain no-repeat; mask: var(--mega-icon) center / contain no-repeat;
}
.mega-link:hover .mega-icon {
  transform: translateY(-1px) scale(1.05); border-color: rgba(var(--mega-rgb), .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 26px rgba(var(--mega-rgb), .28);
}
.mega-link > div { position: relative; z-index: 1; min-width: 0; }
.mega-link > div > strong { display: block; margin-bottom: 3px; color: #f7fbff; font-size: .93rem; font-weight: 650; line-height: 1.25; }
.mega-link > div > span { display: block; color: #94a7bd; font-size: .76rem; line-height: 1.42; }
.mega-feature {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 12px; padding: 15px 17px; border: 1px solid rgba(81, 222, 244, .24); border-radius: 15px;
  background: linear-gradient(115deg, rgba(80, 168, 248, .16), rgba(81, 222, 244, .075));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mega-feature:hover, .mega-feature:focus-visible { border-color: rgba(81, 222, 244, .46); box-shadow: 0 0 30px rgba(81, 222, 244, .12); transform: translateY(-1px); }
.mega-feature strong { color: #f7fbff; font-size: .9rem; font-weight: 650; }
.mega-feature em { color: #51def4; font-style: normal; font-size: .8rem; font-weight: 780; text-shadow: 0 0 13px rgba(81, 222, 244, .34); }
@media (max-width: 1080px) {
  .desktop-nav, .mega { display: none; }
}


/* Navigationsknöpfe (.nav-link / .nav-toggle) – feste Werte, damit sie
   auch mit einer älteren styles.css auf dem Server korrekt aussehen. */
.desktop-nav .nav-link,
.desktop-nav .nav-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  min-height: 40px; padding: 8px 12px; margin: 0;
  border: 0; border-radius: 11px; background: transparent; box-shadow: none;
  color: #c8d6e6; font: inherit; font-size: .9rem; font-weight: 600; line-height: 1;
  letter-spacing: 0; text-align: left; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color .2s ease, background .2s ease;
}
.desktop-nav .nav-link:hover,
.desktop-nav .nav-toggle:hover,
.nav-item:hover .nav-toggle,
.nav-item:focus-within .nav-toggle { color: #fff; background: rgba(255, 255, 255, .055); }
.desktop-nav .nav-link:focus-visible,
.desktop-nav .nav-toggle:focus-visible { outline: 2px solid #51def4; outline-offset: 3px; }
.desktop-nav .nav-chevron { width: 10px; height: 7px; flex: 0 0 auto; opacity: .8; transition: transform .2s ease; }