/* =====================================================================
   alpen-wetter.com — shared design system ("AlpenBlick" look)
   Deep alpine blue, frosted glass panels, one warm orange signal.
   Used by all sub-pages; the AlpenBlick 3D home has its own inline copy
   of the same tokens.
===================================================================== */
:root{
  --ink:        #081b30;                 /* deep alpine blue           */
  --ink-2:      #0c2440;                 /* slightly lifted background */
  --glass:      rgba(11, 30, 52, .84);
  --glass-soft: rgba(11, 30, 52, .62);
  --line:       rgba(150, 200, 240, .18);
  --text:       #eaf2fb;
  --muted:      #8fabc8;
  --sun:        #f3a642;                 /* alpen-wetter orange        */
  --sunset:     #ff7a4d;
  --cool:       #59bdf2;                 /* glacier blue accent        */
  --radius:     14px;
  --font-ui:    "Inter", system-ui, sans-serif;
  --font-brand: "Bricolage Grotesque", "Inter", sans-serif;
  --font-data:  "IBM Plex Mono", ui-monospace, monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh;
  font-family:var(--font-ui); color:var(--text);
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(89,189,242,.10), transparent 60%),
    radial-gradient(900px 420px at 10% 0%, rgba(243,166,66,.07), transparent 55%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 45%);
  background-attachment:fixed;
}
a{ color:var(--cool); }
a:hover{ color:#8fd4ff; }

/* ---- pano header ---------------------------------------------------- */
.aw-hero{
  position:relative; height:210px; overflow:hidden;
  background:url("/_MG_4260-Pano_2.jpg") center 42% / cover no-repeat;
}
.aw-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,27,48,.28) 0%, rgba(8,27,48,.05) 40%, rgba(8,27,48,.88) 92%, var(--ink-2) 100%);
}
@media (max-width:640px){ .aw-hero{ height:140px; } }

/* ---- navbar ---------------------------------------------------------- */
.aw-nav{
  position:relative; z-index:5; margin:-46px auto 0; max-width:1080px;
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  background:var(--glass); border:1px solid var(--line); border-radius:var(--radius);
  padding:9px 14px; backdrop-filter:blur(12px);
  box-shadow:0 10px 32px rgba(0,0,0,.35);
}
.aw-nav .brand{
  font-family:var(--font-brand); font-weight:700; font-size:18px;
  letter-spacing:.3px; text-decoration:none; margin-right:14px; white-space:nowrap;
}
.aw-nav .brand .a{ color:var(--text); }
.aw-nav .brand .b{ color:var(--sun); }
.aw-nav .links{ display:flex; gap:2px; flex-wrap:wrap; }
.aw-nav .links a{
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:6px 11px; border-radius:9px; transition:background .15s, color .15s;
  white-space:nowrap;
}
.aw-nav .links a:hover{ color:var(--text); background:rgba(233,238,245,.08); }
.aw-nav .links a.active{ color:#231600; background:var(--sun); font-weight:600; }
@media (max-width:900px){
  .aw-nav{ margin:-28px 10px 0; }
}

/* ---- page body -------------------------------------------------------- */
.aw-wrap{ max-width:1080px; margin:0 auto; padding:26px 14px 40px; }
.aw-wrap h1{
  font-family:var(--font-brand); font-weight:700; font-size:30px;
  letter-spacing:.3px; margin:14px 0 6px;
}
.aw-wrap h1 .accent{ color:var(--sun); }
.aw-lede{ color:var(--muted); font-size:14.5px; margin:0 0 22px; max-width:70ch; }

/* frosted card for text content */
.aw-card{
  background:var(--glass-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:20px 24px; backdrop-filter:blur(8px);
  margin-bottom:18px;
}
.aw-card h2{ font-size:19px; margin:6px 0 10px; }
.aw-card h3{ font-size:15.5px; margin:16px 0 6px; color:var(--sun); }
.aw-card p, .aw-card li{ font-size:14px; line-height:1.65; color:var(--text); }
.aw-card .muted{ color:var(--muted); }

/* light "app surface" for embedded tools (leaflet, iframes, plots) */
.aw-app{
  background:#f4f7fb; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 10px 32px rgba(0,0,0,.35);
}
.aw-app iframe{ display:block; width:100%; border:0; }

/* ---- footer ----------------------------------------------------------- */
.aw-footer{
  max-width:1080px; margin:14px auto 0; padding:16px 14px 30px;
  border-top:1px solid var(--line);
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  font-size:12.5px; color:var(--muted);
}
.aw-footer a{ color:var(--muted); text-decoration:none; }
.aw-footer a:hover{ color:var(--text); text-decoration:underline; }
.aw-footer .spacer{ flex:1; }