/* Clear glass surfaces. Optical refraction is progressively enhanced by material.js. */
:root {
  --glass-tint: rgba(255,255,255,.12);
  --glass-veil: rgba(255,255,255,.62);
  --glass-edge: rgba(20,22,20,.18);
  --glass-white: rgba(255,255,255,.98);
  --glass-highlight: rgba(255,255,255,.75);
  --glass-inner: rgba(15,18,15,.3);
  --glass-shadow: 0 8px 24px rgba(17,17,17,.1), 0 2px 5px rgba(17,17,17,.08);
  --glass-selection: rgba(255,255,255,.46);
  --glass-ease: cubic-bezier(.22,.8,.24,1);
}
:root[data-theme="dark"] {
  --glass-tint: rgba(32,32,32,.12);
  --glass-veil: rgba(22,22,22,.72);
  --glass-edge: rgba(255,255,255,.19);
  --glass-white: rgba(255,255,255,.7);
  --glass-highlight: rgba(255,255,255,.24);
  --glass-inner: rgba(0,0,0,.5);
  --glass-shadow: 0 8px 24px rgba(0,0,0,.28), 0 2px 5px rgba(0,0,0,.2);
  --glass-selection: rgba(255,255,255,.12);
}
.quick-nav, .shooting-header nav, .carousel-controls, .theme-toggle,
.shooting-button, .form-submit, .primary-action, .dialog-return, .dialog-close {
  isolation: isolate;
  border: 1px solid var(--glass-edge);
  color: var(--ink);
  background: linear-gradient(180deg,var(--glass-tint),var(--glass-veil) 28%,var(--glass-veil) 72%,var(--glass-tint));
  box-shadow: inset 0 2px 1px -1px var(--glass-white), inset 0 -2px 1px -1px var(--glass-white),
    inset 2px 0 5px -2px var(--glass-highlight), inset -2px 0 5px -2px var(--glass-highlight),
    inset 0 0 3px 1px var(--glass-inner), var(--glass-shadow);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: var(--glass-optics,blur(2px));
}
.quick-nav, .shooting-header nav, .shooting-button, .form-submit { position: relative; }
.quick-nav, .shooting-header nav, .carousel-controls, .shooting-button, .form-submit, .dialog-return { border-radius: 999px; }
.theme-toggle, .dialog-close { border-radius: 50%; }
.quick-nav::after, .shooting-header nav::after, .carousel-controls::after, .theme-toggle::after,
.shooting-button::after, .form-submit::after, .primary-action::after, .dialog-return::after, .dialog-close::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at 28% 0%,var(--glass-highlight),transparent 65%);
  opacity: .55;
}
@supports (mask-composite: exclude) {
  .quick-nav::after, .shooting-header nav::after, .carousel-controls::after, .theme-toggle::after,
  .shooting-button::after, .form-submit::after, .primary-action::after, .dialog-return::after, .dialog-close::after {
    z-index: 2; padding: 1.5px; opacity: 1;
    background: conic-gradient(from -35deg,transparent,var(--glass-white) 36deg,transparent 85deg,var(--glass-inner) 130deg,var(--glass-white) 215deg,transparent 265deg,var(--glass-inner) 315deg,transparent);
    mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite: exclude;
  }
  /* A fixed bevel plus a local reflection avoids a rotating highlight that flips at the centre. */
  .quick-nav::before, .shooting-header nav::before, .carousel-controls::before,
  .theme-toggle::before, .shooting-button::before, .form-submit::before, .primary-action::before {
    content:""; position:absolute; inset:0; z-index:3; padding:1.5px; border-radius:inherit; pointer-events:none;
    background:radial-gradient(ellipse 150px 85px at var(--light-x,28%) var(--light-y,0%),var(--glass-white),transparent 75%);
    mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;
    opacity:0; transition:opacity 220ms ease;
  }
  [data-light-active]::before { opacity:.85; }
}
.quick-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.2rem; width:max-content; max-width:calc(100% - 2 * var(--page-edge)); margin:1.5rem auto .5rem; padding:.4rem; z-index:20; }
.shooting-header nav { align-items:center; gap:.2rem; padding:.4rem; }
.quick-nav a, .shooting-header nav a { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; min-height:44px; padding:.55rem 1rem; border-radius:999px; color:var(--ink); font-size:.8rem; line-height:1.25; letter-spacing:0; text-decoration:none; white-space:nowrap; transition:background 180ms ease; }
.quick-nav a:last-child, .shooting-header nav a:last-child { background:var(--glass-selection); color:var(--ink); font-weight:700; }
.quick-nav a:hover, .quick-nav a:last-child:hover, .shooting-header nav a:hover { background:var(--glass-selection); color:var(--ink); }
.nav-droplet { position:absolute; z-index:0; top:0; left:0; display:block; overflow:visible; pointer-events:none; opacity:0; transition:opacity 160ms ease; filter:drop-shadow(0 1px 2px rgba(17,17,17,.1)); }
.nav-droplet[data-visible] { opacity:1; }
.nav-droplet__body { fill:var(--glass-selection); stroke:var(--glass-edge); stroke-width:1.2; }
.nav-droplet__shine { stroke:var(--glass-highlight); stroke-width:.55; }
.nav-droplet__light { stop-color:var(--glass-white); stop-opacity:.75; }
.nav-droplet__clear { stop-color:var(--glass-white); stop-opacity:.02; }
.nav-droplet__rim { stop-color:var(--glass-white); stop-opacity:.3; }
.is-fluid-nav a:not(:last-child):hover { background:transparent; }
@media (min-width:721px) {
  .quick-nav { position:sticky; top:1rem; }
  #arbeiten, #hauptinhalt { scroll-margin-top:7rem; }
  .site-index { display:grid; align-items:center; }
}
.shooting-button, .form-submit { display:inline-flex; align-items:center; justify-content:center; gap:.8rem; min-height:52px; padding:.8rem 1.2rem; color:var(--ink); font-weight:600; line-height:1.4; text-decoration:none; transition:box-shadow 180ms ease; }
.shooting-button:hover, .form-submit:hover:not(:disabled), .form-submit:focus-visible { color:var(--ink); background:linear-gradient(180deg,var(--glass-tint),var(--glass-veil) 28%,var(--glass-veil) 72%,var(--glass-tint)); }
.shooting-button:active, .form-submit:active { box-shadow:inset 0 0 6px var(--glass-inner),inset 0 1px 2px var(--glass-white),0 2px 5px rgba(17,17,17,.08); }
.quick-nav a:last-child > span, .shooting-button > span[aria-hidden] { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:50%; background:var(--ink); color:var(--paper); line-height:0; }
.quick-nav a:last-child > span svg, .shooting-button > span[aria-hidden] svg { width:16px; height:16px; }
.ui-icon { display:block; flex-shrink:0; }
.carousel-controls { width:max-content; max-width:100%; gap:.2rem; margin-inline:auto; padding:.35rem; }
.carousel-controls button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-width:44px; min-height:44px; padding:.55rem .85rem; border:1px solid transparent; border-radius:999px; background:transparent; color:var(--ink); line-height:1.2; }
.carousel-controls button:hover { background:var(--glass-selection); border-color:var(--glass-edge); }
.carousel-controls [data-carousel-action="toggle"] { min-width:7.4rem; }
.carousel-controls .ui-icon { width:18px; height:18px; }
.project-gallery__navigation button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:999px; background:var(--paper); }
.project-gallery { border-radius:16px; }
.project-gallery__stage { border-radius:9px; }
.project-gallery__thumb { border-radius:7px; }
.project-gallery__thumb img { border-radius:3px; }
.project-gallery__count { font-variant-numeric:tabular-nums; }
.theme-toggle { top:1.5rem; width:44px; height:44px; line-height:0; }
.theme-icon { width:22px; height:22px; z-index:1; }
.site-kicker, .site-index { top:1.5rem; min-height:44px; }
.site-kicker { display:grid; align-items:center; }
.dialog-close .ui-icon { width:20px; height:20px; }
.dialog-close { --glass-tint:var(--glass-veil); }
.dialog-close:hover { background:var(--glass-veil); color:var(--ink); }
.dialog-return { width:min(26rem,calc(100% - 2rem)); min-height:3.6rem; margin:.7rem auto max(.7rem,env(safe-area-inset-bottom)); padding:.7rem 1.4rem; line-height:1.6; }
.dialog-return:hover, .dialog-return:focus-visible { background:linear-gradient(180deg,var(--glass-tint),var(--glass-veil) 28%,var(--glass-veil) 72%,var(--glass-tint)); color:var(--ink); letter-spacing:.15em; }
.primary-actions { gap:1rem; padding:.75rem; border:0; border-radius:32px; background:linear-gradient(125deg,transparent 16%,rgba(90,90,90,.13) 24%,rgba(232,232,232,.6) 29%,transparent 35%,transparent 61%,rgba(75,75,75,.1) 70%,transparent 78%),var(--paper); }
:root[data-theme="dark"] .primary-actions { background:linear-gradient(125deg,transparent 16%,rgba(255,255,255,.12) 24%,rgba(255,255,255,.03) 29%,transparent 35%,transparent 61%,rgba(255,255,255,.1) 70%,transparent 78%),var(--paper); }
.primary-action { --glass-veil:rgba(255,255,255,.2); --glass-tint:rgba(255,255,255,.03); position:relative; min-height:18rem; gap:1.4rem; padding:clamp(1.7rem,3vw,3.25rem); border-radius:25px; overflow:hidden; transition:box-shadow 180ms ease; }
:root[data-theme="dark"] .primary-action { --glass-veil:rgba(26,26,26,.24); --glass-tint:rgba(26,26,26,.06); }
.primary-action + .primary-action { border:1px solid var(--glass-edge); }
.primary-actions .primary-action:hover, .primary-actions .primary-action:focus-visible { color:var(--ink); background:linear-gradient(180deg,var(--glass-tint),var(--glass-veil) 28%,var(--glass-veil) 72%,var(--glass-tint)); }
.primary-action__meta { padding-right:3.2rem; font-size:.68rem; line-height:1.5; }
.primary-action__title { max-width:12ch; font-size:clamp(2.4rem,4.3vw,5.2rem); line-height:.98; letter-spacing:-.05em; text-wrap:balance; }
.primary-action__copy { line-height:1.5; }
:root:not([data-theme="dark"]) .primary-action { --muted:#514f4b; }
.primary-action:hover .primary-action__title, .primary-action:focus-visible .primary-action__title,
.primary-action:hover .primary-action__copy, .primary-action:focus-visible .primary-action__copy { transform:none; }
.primary-action:hover .primary-action__copy, .primary-action:focus-visible .primary-action__copy { color:var(--muted); }
.primary-action__arrow { position:absolute; top:clamp(1.7rem,3vw,3.25rem); right:clamp(1.7rem,3vw,3.25rem); display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--glass-edge); border-radius:50%; color:var(--ink); line-height:0; }
.primary-action--contact .primary-action__arrow { background:var(--ink); color:var(--paper); }
.primary-action__arrow .ui-icon { width:18px; height:18px; }
.shooting-link { gap:.7rem; }
.shooting-link:hover { color:var(--ink); }
.shooting-link span[aria-hidden] { display:block; }
.shooting-page h1 { letter-spacing:-.05em; line-height:1.06; }
.interest-form input:not([type="checkbox"]):not([type="hidden"]), .interest-form select, .interest-form textarea { min-height:52px; padding:.85rem 1rem; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:color-mix(in srgb,var(--paper) 96%,transparent); }
.interest-form select { padding-right:2.5rem; }
.interest-form .form-field [aria-invalid="true"] { border-color:#a51d1d; }
.interest-form input:focus, .interest-form select:focus, .interest-form textarea:focus { border-color:var(--ink); background:var(--paper); }
.interest-form input[type="checkbox"] { accent-color:var(--ink); }
.privacy-notice { border-radius:20px; box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow); }
.privacy-notice__actions button, .privacy-notice__actions a { border-radius:999px; }
@media (max-width:800px) {
  .shooting-header nav { max-width:100%; width:max-content; gap:.1rem; border-radius:24px; justify-content:center; }
  .shooting-header nav a { font-size:.72rem; padding:.5rem .7rem; }
}
@media (max-width:720px) {
  .theme-toggle, .site-kicker { top:1rem; }
  .quick-nav { width:min(25rem,calc(100% - 2 * var(--page-edge))); max-width:calc(100% - 2 * var(--page-edge)); gap:.2rem; margin:1rem auto .5rem; border-radius:28px; }
  .quick-nav a:not(:last-child) { flex:1 1 auto; padding:.5rem; font-size:.73rem; }
  .quick-nav a:last-child { flex:1 0 100%; min-width:0; margin:0; padding:.55rem 1rem; }
  .primary-actions { gap:.8rem; padding:.4rem; border-radius:26px; }
  .primary-action { min-height:15rem; padding:1.7rem; border-radius:22px; }
  .primary-action__title { font-size:clamp(2.25rem,9vw,3.5rem); line-height:1; }
  .primary-action__arrow { top:1.4rem; right:1.4rem; width:36px; height:36px; }
  .dialog-return { min-height:3.3rem; }
  .privacy-notice { border-radius:16px; background:var(--paper); }
}
@media (max-width:520px) {
  .shooting-header nav { width:100%; }
  .shooting-header nav a:not(:last-child) { flex:1 1 auto; }
  .shooting-header nav a:last-child { flex:1 0 100%; }
}
@media (prefers-reduced-motion:reduce) {
  .nav-droplet { transition:none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .quick-nav, .shooting-header nav, .carousel-controls, .theme-toggle, .shooting-button, .form-submit, .primary-action, .dialog-return, .dialog-close { background:var(--paper) !important; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .quick-nav::before, .shooting-header nav::before, .carousel-controls::before, .theme-toggle::before, .shooting-button::before, .form-submit::before, .primary-action::before { display:none; }
  .quick-nav, .shooting-header nav, .carousel-controls, .theme-toggle, .shooting-button, .form-submit, .primary-action, .dialog-return, .dialog-close { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--paper) !important; border-color:var(--ink); box-shadow:none; }
  .quick-nav::after, .shooting-header nav::after, .carousel-controls::after, .theme-toggle::after, .shooting-button::after, .form-submit::after, .primary-action::after, .dialog-return::after, .dialog-close::after { display:none; }
  .primary-actions, :root[data-theme="dark"] .primary-actions { background:var(--paper); }
  .nav-droplet { display:none; }
}
@media (forced-colors:active) {
  .quick-nav::before, .shooting-header nav::before, .carousel-controls::before, .theme-toggle::before, .shooting-button::before, .form-submit::before, .primary-action::before { display:none; }
  .quick-nav, .shooting-header nav, .carousel-controls, .theme-toggle, .shooting-button, .form-submit, .primary-action, .dialog-return, .dialog-close { color:CanvasText !important; background:Canvas !important; border:1px solid CanvasText; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .quick-nav::after, .shooting-header nav::after, .carousel-controls::after, .theme-toggle::after, .shooting-button::after, .form-submit::after, .primary-action::after, .dialog-return::after, .dialog-close::after { display:none; }
  .primary-actions, :root[data-theme="dark"] .primary-actions { background:Canvas; }
  .primary-action__copy, .primary-action:hover .primary-action__copy { color:CanvasText; }
}
