/* ASTOX: the established DMCG layout, with a restrained blue action accent. */
:root {
  --action: #0071e3;
  --action-hover: #0066cc;
  --action-soft: #eef5ff;
  --action-ink: #005bb5;
  --control-radius: 999px;
}
::selection { background: #d4e7ff; color: #163354; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }

/* One familiar navigation, with its own opaque space above the content. */
.site-header {
  top: 0; left: 0; right: 0; height: 88px;
  padding: 14px max(32px, 4vw); align-items: center;
  background: var(--bg); border-bottom: 1px solid var(--line);
  pointer-events: auto; letter-spacing: 0;
}
.site-header > .identity {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); margin: 0; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  opacity: 1 !important; pointer-events: auto !important;
  font-size: 10px; line-height: 14px; letter-spacing: 0;
}
.site-header .identity-logo { width: 110px; margin: 0 0 4px; }
.site-header .identity > span { margin: 0; }
.site-header .nav-left, .site-header .nav-right { gap: 12px; margin: 0; }
.site-header .nav-left a, .site-header .nav-right a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 9px; border-radius: 10px;
  font-size: 14px; line-height: 22px; opacity: 1;
  transition: background-color 160ms, color 160ms;
}
.site-header .nav-left a:hover, .site-header .nav-right a:hover { color: var(--action-ink); opacity: 1; }
.site-header .nav-right a.current { border-color: var(--line); background: transparent; color: inherit; }
.site-header .nav-right .nav-contact { color: var(--action); border-color: var(--action); }
@media (min-width: 901px) {
  .site-header { height: 72px; padding: 10px max(32px,4vw); align-items: flex-start; border-bottom: 0; }
  .site-header > .identity { top: 12px; transform: translateX(-50%); }
  .site-header .identity-logo { width: 100px; margin-bottom: 2px; }
  .site-header .nav-left, .site-header .nav-right { gap: 24px; }
  .site-header .nav-left a, .site-header .nav-right a { padding: 8px 0; font-size: 13px; }
  /* The service chooser sits in the header band, above its opaque surface. */
  .portfolio-motion-layer[data-mode="service"] { z-index: 80; }
  body[data-page="service"][data-portfolio-dock="arriving"] .site-header > .identity,
  body[data-page="service"][data-portfolio-dock="open"] .site-header > .identity,
  body[data-page="service"][data-portfolio-dock="opening"] .site-header > .identity,
  body[data-page="service"][data-portfolio-dock="closing"] .site-header > .identity,
  body[data-page="service"][data-portfolio-dock="returning"] .site-header > .identity {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none !important;
  }
  body[data-page="service"][data-portfolio-dock="closed"] .site-header > .identity { transition: none; }
}
@media (min-width: 901px) and (max-width: 1100px) {
  /* Leave clear space around the centered logo when all main links are visible. */
  .site-header .nav-right { gap: 16px; }
}
.mobile-contact, .site-header .tray-toggle { display: none !important; }
.edge-top { pointer-events: none; }
.footer-legal, .menu-legal { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-legal a, .menu-legal a { display: inline-flex; min-height: 44px; align-items: center; font-size: 12px; }
.menu-legal { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; }
.menu-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.mobile-menu { animation-duration: 260ms; padding: 80px 24px 14px; border-radius: 24px; }
.mobile-menu .dialog-head .identity-logo { width: 88px; }
.mobile-menu .dialog-head .identity > span { font-size: 9px; line-height: 11px; }
.mobile-menu .menu-modes { grid-template-columns: repeat(2,minmax(0,132px)); gap: 14px; padding: 0 0 20px; }
.mobile-menu .menu-mode { min-height: 82px; gap: 10px; }
.mobile-menu .menu-mode svg { width: 62px; height: 43px; }
.mobile-menu .menu-links a { font-size: 12px; line-height: 16px; height: 44px; min-height: 44px; justify-content: center; letter-spacing: .04em; }
.mobile-menu .menu-links a span { display: none; }
.mobile-menu .menu-emergency { display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 11px; line-height: 16px; text-decoration: underline !important; text-underline-offset: 3px; }
.mobile-menu .menu-emergency:hover { color: var(--action-ink); }
.mobile-menu .menu-legal { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; border-top: 0; padding: 0; margin-top: 6px; }
.mobile-menu .menu-legal a { justify-content: center; font-size: 10px; line-height: 14px; white-space: nowrap; }
.mobile-menu .menu-links a:hover { color: var(--action); }
/* Pointer opening keeps focus for accessibility without a stray touch ring. */
dialog[data-pointer-opened=true] .dialog-close:focus { outline: none; }

/* All inquiry controls share a clear silhouette and a comfortable touch target. */
.home-story-links a,
a.inline-link[href^="/kontakt"],
.contact-button,
.request-button,
.package-offer .inline-link[href^="/kontakt"],
.home-offer .inline-link[href^="/kontakt"],
.standard-offer .inline-link[href^="/kontakt"],
.case-description > .inline-link[href^="/kontakt"],
.about-panel .inline-link[href^="/kontakt"],
.text-page-inner > .inline-link[href^="/kontakt"],
.guide-support .inline-link {
  border: 1px solid var(--action) !important;
  border-radius: var(--control-radius); background: transparent; color: var(--action-ink);
  min-height: 44px; padding: 10px 18px; font-size: 14px; line-height: 22px;
  justify-content: center; text-align: center; font-weight: 500;
  letter-spacing: 0; opacity: 1; box-shadow: none;
  transition: background-color 160ms, color 160ms, transform 140ms;
}
.home-story-links a:hover, .contact-button:hover, .request-button:hover,
.package-offer .inline-link[href^="/kontakt"]:hover, .home-offer .inline-link[href^="/kontakt"]:hover,
.standard-offer .inline-link[href^="/kontakt"]:hover, .case-description > .inline-link[href^="/kontakt"]:hover,
.about-panel .inline-link[href^="/kontakt"]:hover, .text-page-inner > .inline-link[href^="/kontakt"]:hover,
.guide-support .inline-link:hover { background: var(--action-soft); color: var(--action-ink); opacity: 1; }
.home-story-links a:first-child, .emergency-contact .contact-button:first-child, .request-button,
.case-description > a.inline-link[href^="/kontakt"], .guide-support a.inline-link[href^="/kontakt"] {
  background: var(--action); color: #fff; border-color: var(--action) !important;
}
.home-story-links a:first-child:hover, .emergency-contact .contact-button:first-child:hover, .request-button:hover,
.case-description > a.inline-link[href^="/kontakt"]:hover, .guide-support a.inline-link[href^="/kontakt"]:hover {
  background: var(--action-hover); color: #fff;
}
.emergency-contact .contact-button[href^="tel:"] { background: var(--action, #0071e3) !important; color: #fff !important; }
.emergency-contact .contact-button[href^="tel:"]:hover { background: var(--action-hover, #0066cc) !important; }
.home-story-links a:active, .contact-button:active, .request-button:active { transform: scale(.98); }
.mobile-menu .menu-contact .contact-button { border: 1px solid #111 !important; border-radius: var(--control-radius); background: #fff; color: #111; min-width: 0; min-height: 44px !important; width: 100%; font-size: 12px; line-height: 16px; padding: 10px 6px; letter-spacing: 0; }
.mobile-menu .menu-contact .contact-button:first-child { background: #111; color: #fff; }
.mobile-menu .menu-contact .contact-button:hover { background: #f2f2f2; color: #111; }
.mobile-menu .menu-contact .contact-button:first-child:hover { background: #303030; color: #fff; }
.mobile-menu .menu-contact .contact-button svg { display: none; }
.home-story-links { gap: 12px; margin-top: 24px; }
.home-more-prices { color: var(--action); text-decoration: underline !important; text-underline-offset: 5px; }
.home-more-prices:hover { color: var(--action-hover); }
.home-visit-offer .visit-price{display:grid;gap:7px;margin-top:0}
.home-visit-offer .visit-price span{display:block}
.home-visit-offer .visit-price strong{font-size:1.22em;line-height:1.2;font-variant-numeric:tabular-nums}
.home-visit-offer .visit-price span:nth-child(2) strong:last-child{font-size:1em}
.home-visit-offer .area-link,.visit-offers .area-link{
  display:inline-flex;align-items:center;justify-content:center;gap:14px;
  min-height:44px;margin-top:10px;padding:10px 17px;
  border:1px solid var(--action);border-radius:var(--control-radius);
  color:var(--action-ink);font-size:14px;font-weight:600;line-height:1.5;
  text-align:center;transition:background-color 160ms,color 160ms;
}
.home-visit-offer .area-link:hover,.visit-offers .area-link:hover{background:var(--action-soft);color:var(--action-ink)}
.home-visit-offer .area-link::after,.visit-offers .area-link::after{
  content:'';display:block;flex:none;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.terms-link{display:inline-flex;align-items:center;min-height:44px;color:var(--action-ink);font-size:13px;font-weight:500;line-height:1.5;text-decoration:underline!important;text-underline-offset:4px}
.terms-link:hover{color:var(--action-hover);text-decoration-thickness:2px!important}
.home-visit-offer .home-offers-note{margin:14px 0 0}
.quarter-rate{font-size:1.08em;font-weight:700;font-variant-numeric:tabular-nums}
.hourly-note{font-size:.9em;color:color-mix(in srgb,var(--fg) 76%,var(--bg))}
.contact-button[href^="https://wa.me"],.contact-button[href^="mailto:"]{border-color:var(--action)!important;color:var(--action-ink);background:transparent}
.contact-button[href^="https://wa.me"]:hover,.contact-button[href^="mailto:"]:hover{background:var(--action-soft);color:var(--action-ink)}
.contact-button .contact-label-short{display:none}
.mobile-menu .menu-bottom,.mobile-menu .menu-bottom .contact-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:360px;margin-inline:auto;width:100%}
.mobile-menu .menu-bottom{padding-top:10px}
.mobile-menu .menu-bottom .contact-buttons{grid-column:1/-1;margin:0}
.mobile-menu .menu-bottom>a:first-child{justify-content:center;background:#111;color:#fff;border:1px solid #111!important;border-radius:var(--control-radius);text-align:center}
.menu-bottom a[href^="https://wa.me"],.menu-bottom a[href^="mailto:"]{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 5px;border:1px solid #111;border-radius:var(--control-radius);
  color:#111;font-size:12px;font-weight:500;line-height:1.4;
}
.menu-bottom a[href^="https://wa.me"]:hover,.menu-bottom a[href^="mailto:"]:hover{background:var(--action-soft)}
@media(max-width:900px){.case-contact .contact-button[href^="tel:"],.catalog-contact .contact-button[href^="tel:"]{display:none!important}}
@media(max-width:600px){.case-contact .contact-label-wide,.catalog-contact .contact-label-wide{display:none}.case-contact .contact-label-short,.catalog-contact .contact-label-short{display:inline}}
.menu-contact .contact-label-wide{display:none}
.menu-contact .contact-label-short{display:inline}
.home-view .gallery-piece .service-card-action {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-top: 8px;
  font-size: 13px; line-height: 20px; color: var(--action);
}
.service-card-action::after {
  content: ''; width: 6px; height: 6px; border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor; transform: rotate(45deg);
}

/* Article titles are navigation controls, including on touch screens. */
.guide-list h2 a {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px;
}
.guide-list h2 a::after {
  content: ''; width: 7px; height: 7px; flex: 0 0 7px;
  border-top: 1.5px solid var(--action-ink);
  border-right: 1.5px solid var(--action-ink);
  transform: rotate(45deg);
}
.home-other-services a:hover { color: var(--action); }
.package-featured { background: #f1f3f5; }
.emergency-contact { margin-top: 24px !important; }

/* A visible selected tab and field focus carry the same action color. */
.contact-view .contact-switch { background: #e9e9eb; border-radius: var(--control-radius); }
.contact-view .contact-switch button { border-radius: var(--control-radius); }
.contact-view .contact-switch button[aria-selected=true] { color: var(--action-ink); background: transparent; box-shadow: none; }
.astox-contact-form { --contact-focus: var(--action); }
.contact-submit { background: var(--action); color: #fff; border-radius: var(--control-radius); }
.contact-submit:hover { background: var(--action-hover); }
.astox-contact-form a, .contact-info a { color: var(--action-ink); }
.contact-view .contact-switch button:focus-visible, .request-button:focus-visible,
.home-story-links a:focus-visible, .contact-button:focus-visible,
.inline-link[href^="/kontakt"]:focus-visible { outline-color: var(--action); }

/* Keep the assistant's familiar light, secondary action. */
.assistant .assistant-launcher {
  width: 100px; height: 44px; border: 1px solid #d8d8d6;
  border-radius: var(--control-radius); background: #fafaf8; color: #3f3f3d; box-shadow: none;
}
.assistant .assistant-launcher:hover { background: #f2f2f0; }
.assistant .assistant-launcher-mark { flex-direction: column; gap: 0; padding: 0 10px; }
.assistant .assistant-launcher-title { font-size: 13px; line-height: 18px; font-weight: 500; }
.assistant .assistant-launcher-subtitle { font-size: 11px; line-height: 14px; font-weight: 400; color: #686866; }
.assistant .assistant-launcher:focus-visible, .assistant :focus-visible { outline-color: var(--action); }
.assistant .assistant-send { background: var(--action); border-color: var(--action); box-shadow: none; }
.assistant .assistant-send:hover { background: var(--action-hover); }
.assistant-composer:focus-within { border-color: var(--action); }
.assistant .assistant-message-user p { background: var(--action-soft); color: #163354; }
.assistant .assistant-contact { color: var(--action-ink); }
@media (min-width: 901px) {
  .assistant:has(.assistant-panel[hidden]) { bottom: max(92px,env(safe-area-inset-bottom)); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .home-story .home-offer .inline-link { margin-top: 12px; }
}

@media (max-width: 900px) {
  .site-header {
    position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    gap: 10px; height: auto; min-height: calc(76px + env(safe-area-inset-top));
    padding: calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));
    border-bottom: 0;
  }
  .site-header > .identity { position: static; transform: none; grid-column: 2; grid-row: 1; margin: 0; font-size: 9px; line-height: 12px; }
  .site-header .identity-logo { width: 100px; margin-bottom: 2px; }
  .site-header .nav-left, .site-header .nav-right { display: none; }
  .site-header .mobile-contact { display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 14px; border: 1px solid #111; border-radius: var(--control-radius);
    background: #111; color: #fff; font-size: 13px; line-height: 20px; grid-column: 3; grid-row: 1; justify-self: end;
  }
  .site-header .mobile-contact:hover { background: #292929; border-color: #292929; }
  .site-header .menu-toggle {
    position: static; display: inline-flex; flex-direction: row; gap: 6px; grid-column: 1; grid-row: 1; justify-self: start;
    width: auto; height: 44px; padding: 8px; border-radius: var(--control-radius);
    color: #252525;
  }
  .site-header .menu-toggle svg { width: 20px; height: 20px; stroke-width: 1.5; }
  .site-header .menu-toggle b { font-size: 13px; line-height: 20px; font-weight: 500; }
  .site-header .menu-toggle:hover { background: var(--action-soft); }
  .home-story h1 { font-size: clamp(28px,7.6vw,34px); line-height: 1.12; }
  .home-view .gallery { gap: 32px; padding-top: 48px; }
  .home-story-links { gap: 10px; }
  .home-story-links a { padding-inline: 16px; font-size: 14px; }
  .corners { flex-wrap: wrap; align-items: center; column-gap: 16px; row-gap: 2px; }
  .corners .footer-legal { order: 3; flex-basis: 100%; }
  .corners #corner-right { margin-left: auto; }
}
@media (max-width: 359px) {
  .site-header { gap: 4px; padding-inline: 14px; }
  .site-header .identity-logo { width: 90px; }
  .site-header > .identity > span { display: none; }
  .site-header .mobile-contact { padding-inline: 12px; }
  .home-story-links a { padding-inline: 13px; font-size: 13px; }
  .mobile-menu { padding-inline: 16px; }
  .mobile-menu .menu-modes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .mobile-menu .menu-contact .contact-button { padding-inline: 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-story-links a, .contact-button, .request-button, .site-header .nav-right a { transition: none; }
  .home-story-links a:active, .contact-button:active, .request-button:active { transform: none; }
}
@media (forced-colors: active) {
  :root { --action: LinkText; --action-hover: LinkText; --action-soft: Canvas; --action-ink: LinkText; }
  .home-story-links a:first-child, .request-button, .contact-submit, .assistant .assistant-send { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .assistant .assistant-launcher { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .site-header .mobile-contact, .site-header .mobile-contact:hover { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
}

/* Service tabs use the same familiar segmented control as the contact page. */
.detail-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; border: 0; border-radius: var(--control-radius); background: #e9e9eb; }
.detail-tabs button { min-height: 44px; padding: 10px 8px; border-radius: var(--control-radius); opacity: 1; color: #404040; font-size: 14px; line-height: 22px; transition: background-color 160ms,color 160ms; }
.detail-tabs button[aria-selected=true] { background: #fff; color: var(--action-ink); }
.detail-tabs button[aria-selected=true]::after { display: none; }
.service-legal { max-width: 541px; width: calc(100% - 72px); margin: 24px auto 0; }
.service-legal .legal-nav { margin: 0; }
html[data-theme="daten-sicherheit"] .identity-logo { padding: 0; background: transparent; border-radius: 0; }
@media(max-width:900px) { .case-hero { height: 190px; margin-bottom: 24px; } .service-legal { width: calc(100% - 48px); } }

.guide-footer { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--line); }
.guide-footer .legal-nav { margin: 0; }
@media(max-width:900px) {
  .emergency-contact .contact-button[href^="tel:"] { display: none !important; }
  .case-contact .contact-button[href^="tel:"],
  .catalog-contact .contact-button[href^="tel:"] { display: none !important; }
  .emergency-contact .contact-button { padding-inline: 12px; font-size: 13px; }
  .emergency-contact .contact-button:first-child { background: transparent; color: var(--action-ink); }
  .emergency-contact .contact-button:first-child:hover { background: var(--action-soft); color: var(--action-ink); }
}