/* Metallbau Walter – Basis-Styles.
   Layout steht bewusst inline am Element; hier liegen Farbrollen (hell/dunkel),
   Grundlagen, Hover-Zustände und der Bildbetrachter. */
:root {
  --surf-soft: rgba(255,255,255,.045);
  --surf-softer: rgba(255,255,255,.04);
  --surf: rgba(255,255,255,.05);
  --surf-2: rgba(255,255,255,.06);
  --surf-3: rgba(255,255,255,.08);
  --hover-2: rgba(255,255,255,.15);
  --hover-3: rgba(255,255,255,.18);
  --hover-1: rgba(255,255,255,.1);
  --line: rgba(255,255,255,.12);
  --line-2: rgba(255,255,255,.13);
  --line-3: rgba(255,255,255,.14);
  --line-5: rgba(255,255,255,.24);
  --line-6: rgba(255,255,255,.28);
  --line-4: rgba(255,255,255,.2);
  --line-7: rgba(255,255,255,.5);
  --nav-link: rgba(255,255,255,.76);
  --text-40: rgba(245,248,249,.4);
  --text-55: rgba(245,248,249,.55);
  --text-58: rgba(245,248,249,.58);
  --text-62: rgba(245,248,249,.62);
  --text-66: rgba(245,248,249,.66);
  --text-60: rgba(245,248,249,.6);
  --text-72: rgba(245,248,249,.72);
  --text-74: rgba(245,248,249,.74);
  --text-78: rgba(245,248,249,.78);
  --text-70: rgba(245,248,249,.7);
  --text: #f5f8f9;
  --bg: #071018;
  --bg-deep: #05080d;
  --panel: #0c1620;
  --panel-hi: #132433;
  --link: #4bb8e8;
  --link-hover: #8fd8f5;
  --btn-fg: #14105b;
  --hero-a: rgba(7,16,24,.97);
  --hero-b: rgba(20,16,91,.9);
  --hero-c: rgba(0,143,208,.48);
  --tint-a: rgba(20,16,91,.82);
  --tint-b: rgba(20,16,91,.6);
  --card-glass: rgba(5,8,13,.78);
  --shadow: rgba(0,0,0,.4);
  --btn-bg: #ffffff;
    --head-bg: rgba(5,8,13,.94);
  }
  html[data-theme="light"] {
  --surf-soft: rgba(14,26,36,.045);
  --surf-softer: rgba(14,26,36,.04);
  --surf: rgba(14,26,36,.05);
  --surf-2: rgba(14,26,36,.06);
  --surf-3: rgba(14,26,36,.08);
  --hover-2: rgba(14,26,36,.14);
  --hover-3: rgba(14,26,36,.16);
  --hover-1: rgba(14,26,36,.09);
  --line: rgba(14,26,36,.13);
  --line-2: rgba(14,26,36,.14);
  --line-3: rgba(14,26,36,.15);
  --line-5: rgba(14,26,36,.28);
  --line-6: rgba(14,26,36,.3);
  --line-4: rgba(14,26,36,.24);
  --line-7: rgba(14,26,36,.45);
  --nav-link: rgba(14,26,36,.72);
  --text-40: rgba(14,26,36,.5);
  --text-55: rgba(14,26,36,.6);
  --text-58: rgba(14,26,36,.62);
  --text-62: rgba(14,26,36,.66);
  --text-66: rgba(14,26,36,.7);
  --text-60: rgba(14,26,36,.64);
  --text-72: rgba(14,26,36,.74);
  --text-74: rgba(14,26,36,.76);
  --text-78: rgba(14,26,36,.8);
  --text-70: rgba(14,26,36,.72);
  --text: #0e1a24;
  --bg: #f2f6f9;
  --bg-deep: #ffffff;
  --panel: #ffffff;
  --panel-hi: #e9f0f6;
  --link: #0a6ea3;
  --link-hover: #0d557d;
  --btn-fg: #ffffff;
  --hero-a: rgba(245,249,252,.95);
  --hero-b: rgba(203,224,238,.88);
  --hero-c: rgba(0,143,208,.3);
  --tint-a: rgba(206,226,240,.85);
  --tint-b: rgba(206,226,240,.7);
  --card-glass: rgba(255,255,255,.86);
  --shadow: rgba(14,26,36,.16);
  --btn-bg: #0e1a24;
    --head-bg: rgba(255,255,255,.93);
  }
  html { scroll-behavior: smooth; scroll-padding-top: 118px; }
  body { margin: 0; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; line-height: 1.6; }
  img { display: block; max-width: 100%; }
  a { color: var(--link); text-decoration: none; }
  a:hover { color: var(--link-hover); }
  @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }
  html[data-theme="light"] [data-theme-dark] { display: none; }
  html:not([data-theme="light"]) [data-theme-light] { display: none; }
  #themeToggle:hover { background: var(--hover-1); }

  #navToggle { display: none; }
  @media (max-width: 940px) {
    #navToggle { display: inline-flex !important; }
    #navMain { display: none !important; }
    #navMain[data-open="true"] { display: flex !important; flex: 1 1 100% !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; padding-top: 6px; border-top: 1px solid var(--line); font-size: 1.02rem; }
    #navMain[data-open="true"] a { min-height: 48px; display: flex; align-items: center; padding-block: 0; }
    #headPhone { flex: 1 1 auto !important; justify-content: center !important; }
  }

/* Bildbetrachter */
#viewer{ position:fixed; inset:0; z-index:90; display:grid; grid-template-rows:auto 1fr auto; gap:12px; padding:clamp(12px,1.8vw,22px); background:rgba(3,6,10,.94); backdrop-filter:blur(10px); }
#viewer[hidden]{ display:none; }
#viewer .vHead{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:space-between; }
#viewer .vTitle{ display:block; font-size:clamp(1.02rem,1.7vw,1.3rem); line-height:1.2; font-weight:700; }
#viewer .vSub{ display:block; margin-top:2px; color:rgba(245,248,249,.58); font-size:.88rem; }
#viewer .vClose{ display:inline-flex; align-items:center; min-height:46px; padding:10px 18px; background:rgba(255,255,255,.08); color:#f5f8f9; border:1px solid rgba(255,255,255,.24); border-radius:10px; font:inherit; font-weight:800; cursor:pointer; }
#viewer .vClose:hover{ background:rgba(255,255,255,.18); }
#viewer .vStage{ position:relative; display:grid; place-items:center; min-height:0; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:14px; background:#05080d; background-image:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:34px 34px,34px 34px; }
#viewer .vStage img{ position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); object-fit:contain; touch-action:pan-y; user-select:none; }
#viewer .vHint{ position:absolute; left:0; right:0; bottom:12px; display:flex; justify-content:center; pointer-events:none; }
#viewer .vHint span{ padding:6px 12px; background:rgba(5,8,13,.82); border:1px solid rgba(255,255,255,.18); border-radius:999px; color:rgba(245,248,249,.78); font-size:.85rem; font-weight:700; }
#viewer .vNav{ position:absolute; top:50%; display:grid; place-items:center; width:52px; height:52px; margin-top:-26px; background:rgba(5,8,13,.8); color:#f5f8f9; border:1px solid rgba(255,255,255,.24); border-radius:999px; font:inherit; font-size:1.3rem; font-weight:900; cursor:pointer; transition:background-color 180ms ease; }
#viewer .vNav:hover{ background:#008fd0; }
#viewer .vPrev{ left:14px; } #viewer .vNext{ right:14px; }
#viewer .vFoot{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; }
#viewer .vCount{ color:rgba(245,248,249,.6); font-size:.85rem; font-weight:700; }
#viewer .vThumb{ width:58px; height:58px; padding:0; overflow:hidden; background:#05080d; border:2px solid rgba(255,255,255,.2); border-radius:10px; opacity:.5; cursor:pointer; transition:opacity 180ms ease,border-color 180ms ease; }
#viewer .vThumb img{ width:100%; height:100%; object-fit:cover; }
#viewer .vThumb[aria-current="true"]{ border-color:#008fd0; opacity:1; }


/* Hover-Zustände der Kacheln, Karten und Buttons */
.hv1:hover{background:var(--line-3) !important}
.hv2:hover{color:var(--text) !important;background:var(--hover-1) !important}
.hv3:hover{transform:translate(-1px,-1px) !important}
.hv4:hover{transform:translate(-1px,-1px) !important;box-shadow:10px 10px 0 #008fd0 !important}
.hv5:hover{background:var(--hover-2) !important}
.hv6:hover{background:rgba(0,110,165,.88) !important;border-color:rgba(0,143,208,.95) !important}
.hv7:hover{transform:translateY(-8px) !important;border-color:rgba(0,143,208,.65) !important;background:rgba(0,143,208,.1) !important}
.hv8:hover{transform:translateY(-7px) !important;border-color:rgba(0,143,208,.6) !important}
.hv9:hover{border-color:rgba(0,143,208,.6) !important;background:rgba(0,143,208,.08) !important}
.hv10:hover{transform:scale(1.06) !important}
.hv11:hover{background:var(--panel-hi) !important}
.hv12:hover{color:var(--link) !important}
.hv13:hover{color:var(--text) !important}
.hv14:hover{background:rgba(0,143,208,.12) !important}


/* Footer-Links */
a.fl:hover{ color:var(--text); }

[data-rv] { opacity: 0; translate: 0 26px; will-change: opacity, translate; }
[data-rv="in"] { opacity: 1; translate: 0 0; }
[data-rv="out"] { opacity: .3; translate: 0 10px; }
[data-rv] img { scale: 1.05; }
[data-rv="in"] img { scale: 1; }
#scrollProgress { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--scrollp, 0%); background: #008fd0; transition: width 120ms linear; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  [data-rv] { opacity: 1 !important; translate: none !important; }
  [data-rv] img { scale: none !important; }
}

@keyframes introLogoIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes introLineIn { from { width: 0; } to { width: 100%; } }
@keyframes introLift { to { transform: translateY(-101%); } }
#intro { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: #f5f9fc; will-change: transform; }
#intro > div { display: grid; justify-items: center; gap: 20px; }
#intro img { width: min(300px, 58vw); height: auto; padding: 10px 14px; background: #fff; border-radius: 12px; box-shadow: 7px 7px 0 rgba(0,143,208,.34); animation: introLogoIn .62s cubic-bezier(.22,.61,.36,1) both; }
#intro span { display: block; width: min(300px, 58vw); height: 3px; background: #008fd0; animation: introLineIn .52s cubic-bezier(.76,0,.24,1) .34s both; }
html[data-intro="run"] { overflow: hidden; }
html[data-intro="run"] #intro { animation: introLift .66s cubic-bezier(.76,0,.24,1) 1.08s forwards; }
html[data-intro="skip"] #intro, html[data-intro="done"] #intro { display: none; }
html[data-hero="hold"] [data-hi] { opacity: 0; translate: 0 20px; }
[data-hi] { transition: opacity .75s cubic-bezier(.22,.61,.36,1), translate .75s cubic-bezier(.22,.61,.36,1); transition-delay: var(--hd, 0ms); }
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  html[data-hero="hold"] [data-hi] { opacity: 1 !important; translate: none !important; }
}

main { overflow-x: clip; }
[data-rv][data-rvx] { translate: var(--rvx, 60vw) 0; }
[data-rv="in"][data-rvx] { translate: 0 0; }
[data-rv="out"][data-rvx] { translate: var(--rvx, 60vw) 0; opacity: 0; }


@media (max-width: 620px) {
  footer nav[aria-label="Rechtliches"] { grid-column: 1 / -1 !important; justify-items: center !important; justify-self: center !important; text-align: center !important; }
}