/*
 * Patrick Krisch Website
 * Datei: assets/css/layout.css
 * Bereich: Siteweites Layout
 * Stand: 2026-08-20
 *
 * Enthält gemeinsame Layout-Komponenten:
 * - Header / Desktop-Navigation
 * - Mobile Navigation / Drawer
 * - Footer
 */

/* === Header / Desktop Navigation === */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-bottom:1px solid rgba(218,229,240,.9)}
.header-inner{height:65px;display:flex;align-items:center;justify-content:space-between;gap:26px;position:relative}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-mark{width:48px;height:48px;border:2px solid #0b5fb1;border-radius:var(--radius);display:grid;place-items:center;font-weight:800;letter-spacing:-.08em;color:#0b5fb1;position:relative}
.brand-mark:after{content:"";position:absolute;width:30px;height:2px;background:var(--cyan);transform:rotate(-45deg)}
.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy strong{font-size:16px}.brand-copy small{font-size:10px;letter-spacing:.03em;margin-top:5px}
.main-nav{display:flex;align-items:center;justify-content:center;gap:28px;font-size:14px;font-weight:650;min-width:0}.main-nav>a{position:relative}.main-nav>a:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:.2s}.main-nav>a:hover:after,.main-nav>a.is-active:after{width:100%}.desktop-nav-disabled{color:#7f8ca1;text-decoration:line-through;text-decoration-thickness:1px;text-underline-offset:3px;cursor:not-allowed;user-select:none}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:max-content}.header-project-check,.header-phone{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;font-weight:750}.header-project-check{position:relative;min-height:38px;padding:0 13px;border:1px solid #9eb7d2;border-radius:var(--radius-button);background:var(--surface);color:var(--navy);box-shadow:0 5px 16px rgba(7,31,77,.05);transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease}.header-project-check:hover{transform:translateY(-1px);border-color:var(--blue);background:var(--soft);box-shadow:0 8px 20px rgba(14,100,216,.10)}.header-project-check.is-active{border-color:#0799ab;background:#f7fcfd}.header-project-check.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:-10px;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--blue))}.header-project-check .ui-icon,.header-phone .ui-icon{width:16px;height:16px}.header-phone{min-height:38px;padding-block:0}
.language-switch{display:flex;gap:6px;align-items:center;font-size:12px}.language-switch span{color:#9aa6b9}
.nav-toggle{display:none;background:none;border:0;padding:8px}.nav-toggle span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}
.header-inner.logo-hidden{justify-content:flex-end}.header-inner.logo-hidden .nav-toggle{margin-left:auto}

.desktop-nav-group{position:relative;display:flex;align-items:center;height:65px}.desktop-nav-parent{position:relative;display:inline-flex;align-items:center;gap:4px}.desktop-nav-parent:after{content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:.2s}.desktop-nav-group:hover .desktop-nav-parent:after,.desktop-nav-group:focus-within .desktop-nav-parent:after,.desktop-nav-parent.is-active:after{width:100%}.desktop-nav-chevron{width:13px;height:13px;transition:transform .2s ease}.desktop-service-subnav{position:absolute;top:54px;left:50%;min-width:210px;padding:8px;background:rgba(255,255,255,.985);border:1px solid #e1eaf3;border-radius:var(--radius);box-shadow:0 18px 46px rgba(7,31,77,.14);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:70}.desktop-service-subnav a{display:block;padding:9px 11px;border-radius:8px;font-size:13px;font-weight:650;white-space:nowrap}.desktop-service-subnav a:hover,.desktop-service-subnav a:focus-visible,.desktop-service-subnav a.is-active{background:#f2f7fc;color:#007582}.desktop-nav-group:hover .desktop-service-subnav,.desktop-nav-group:focus-within .desktop-service-subnav{opacity:1;visibility:visible;transform:translate(-50%,0)}.desktop-nav-group:hover .desktop-nav-chevron,.desktop-nav-group:focus-within .desktop-nav-chevron{transform:rotate(180deg)}

@media(min-width:821px){.header-inner{display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;align-items:center;gap:clamp(18px,2vw,32px)}.header-inner>.brand{position:static;z-index:2}.header-inner>.main-nav{width:auto;justify-self:stretch;justify-content:center;padding:0}.header-inner>.header-actions{position:static;justify-self:end}.header-inner.logo-hidden>.main-nav{margin-left:0}}
@media(max-width:1120px) and (min-width:821px){.header-inner{gap:14px}.main-nav{gap:15px;font-size:12px}.header-project-check{padding-inline:10px;font-size:11px}.header-phone{padding-inline:12px;font-size:11px}.header-actions{gap:6px}}

/* === Mobile Navigation === */
.mobile-nav-backdrop,.mobile-nav-drawer{display:none}
@media(max-width:820px){
  html{overflow-x:clip}body{overflow-x:clip}
  .site-header{position:sticky!important;top:0;z-index:1000}.header-inner{height:65px}.brand-copy strong{font-size:14px}.brand-copy small{font-size:9px}.brand-mark{width:42px;height:42px}.nav-toggle{display:block}
  .header-inner.logo-hidden{justify-content:flex-end}.header-inner.logo-hidden .main-nav{margin-left:0}.main-nav{display:none!important;top:65px}.header-actions{display:none}.desktop-nav-group{display:none}
  .site-header,main,.site-footer{transition:transform .48s cubic-bezier(.2,.72,.2,1),filter .48s ease;transform-origin:left center;will-change:transform}
  body.mobile-nav-open{overflow:hidden}body.mobile-nav-open .site-header,body.mobile-nav-open main,body.mobile-nav-open .site-footer{transform:perspective(1050px) translateX(-18vw) rotateY(8deg) scale(.94);filter:brightness(.72) saturate(.9)}
  .nav-toggle{z-index:1102}.mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:1190;background:linear-gradient(90deg,rgba(5,25,55,.18),rgba(5,25,55,.46));opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;backdrop-filter:blur(1px)}body.mobile-nav-open .mobile-nav-backdrop{opacity:1;visibility:visible}
  .mobile-nav-drawer{position:fixed;z-index:1200;top:0;right:0;width:65vw;max-width:430px;height:100dvh;background:rgba(255,255,255,.985);box-shadow:-22px 0 60px rgba(4,35,77,.18);transform:translateX(104%);transition:transform .46s cubic-bezier(.2,.72,.2,1);display:flex;flex-direction:column;color:var(--navy);overflow-y:auto;overscroll-behavior:contain;border-radius:0}body.mobile-nav-open .mobile-nav-drawer{transform:translateX(0)}
  .mobile-nav-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border:0;background:transparent;color:var(--navy);display:grid;place-items:center;cursor:pointer}.mobile-nav-close .ui-icon{width:28px;height:28px}.mobile-nav-content{padding:66px 0 18px;display:flex;flex-direction:column;min-height:100%}.mobile-nav-main{display:flex;flex-direction:column}
  .mobile-nav-item,.mobile-nav-toggle{min-height:48px;width:100%;padding:0 18px;display:grid;grid-template-columns:34px minmax(0,1fr) 20px;align-items:center;gap:10px;border:0;border-bottom:1px solid #edf2f7;background:transparent;color:var(--navy);text-align:left;font:inherit;font-size:15px;font-weight:750;text-decoration:none;cursor:pointer}.mobile-nav-item .ui-icon,.mobile-nav-toggle .ui-icon{width:21px;height:21px;color:var(--blue)}.mobile-nav-item .nav-chevron,.mobile-nav-toggle .nav-chevron{width:16px;height:16px;color:var(--blue);justify-self:end}.mobile-nav-item:hover,.mobile-nav-toggle:hover{background:var(--soft)}.mobile-nav-item.is-active,.mobile-nav-toggle.is-active{background:#f2f7fc;color:#0b6fc8;box-shadow:inset 3px 0 0 #0799ab}.mobile-nav-item.is-disabled{color:#8b98aa;cursor:not-allowed;text-decoration:line-through;text-decoration-thickness:1px}.mobile-nav-item.is-disabled .ui-icon{color:#9ba9b9}
  .mobile-nav-toggle[aria-expanded="true"]{background:#f2f7fc;color:#0b6fc8;border-bottom-color:transparent}.mobile-nav-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg)}.mobile-service-subnav{display:grid;grid-template-rows:0fr;background:#f2f7fc;transition:grid-template-rows .32s ease}.mobile-service-subnav.is-open{grid-template-rows:1fr}.mobile-service-subnav-inner{overflow:hidden}.mobile-service-subnav a{min-height:38px;padding:0 16px 0 56px;display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:8px;color:#18345f;text-decoration:none;border-top:1px solid rgba(211,224,237,.72);font-size:13.5px;font-weight:600}.mobile-service-subnav a:first-child{border-top:0}.mobile-service-subnav a:hover,.mobile-service-subnav a.is-active{background:#eaf3fb;color:#006f83}.mobile-service-subnav .ui-icon{width:15px;height:15px;color:var(--blue)}
  .mobile-nav-spacer{flex:1;min-height:18px}.mobile-project-check,.mobile-phone{margin-inline:18px;min-height:50px;border-radius:var(--radius-button);text-decoration:none;display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800;font-size:15px}.mobile-project-check{margin-top:18px;border:1px solid #9eb7d2;background:var(--surface);color:var(--navy);box-shadow:0 8px 22px rgba(7,31,77,.06)}.mobile-project-check.is-active{border-color:#0799ab;background:#f2fbfc;box-shadow:0 8px 22px rgba(7,153,171,.12)}.mobile-project-check .ui-icon{width:20px;height:20px;color:var(--blue)}.mobile-phone{margin-top:8px;margin-bottom:12px;background:linear-gradient(100deg,#08a99d,#0b6fd7);box-shadow:0 12px 30px rgba(11,111,215,.2);color:var(--surface)}.mobile-phone .ui-icon{width:21px;height:21px}.mobile-nav-legal{margin:0 18px;padding-top:10px;border-top:1px solid #dce6ef;display:grid;grid-template-columns:1fr 1fr 42px;align-items:center;gap:4px}.mobile-nav-legal a,.mobile-cookie-button{min-height:38px;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:transparent;color:#17345f;text-decoration:none;font:inherit;font-size:11.5px;font-weight:650;cursor:pointer}.mobile-nav-legal a+a,.mobile-cookie-button{border-left:1px solid #dce6ef}.mobile-nav-legal .ui-icon{width:16px;height:16px}
}
@media(max-width:620px){body.mobile-nav-open .site-header,body.mobile-nav-open main,body.mobile-nav-open .site-footer{transform:perspective(900px) translateX(-20vw) rotateY(9deg) scale(.93)}.mobile-nav-drawer{width:65vw}.mobile-nav-item,.mobile-nav-toggle{min-height:46px;padding-inline:14px;grid-template-columns:30px minmax(0,1fr) 18px;gap:8px;font-size:14px}.mobile-nav-item .ui-icon,.mobile-nav-toggle .ui-icon{width:19px;height:19px}.mobile-service-subnav a{min-height:36px;padding-left:46px;font-size:12.5px}.mobile-project-check,.mobile-phone{margin-inline:14px;font-size:14px}.mobile-nav-legal{margin-inline:14px}.mobile-nav-legal a,.mobile-cookie-button{font-size:10.5px}}

/* === Footer === */
.site-footer{position:relative;overflow:hidden;background:linear-gradient(90deg,#061d43,#072d65);color:var(--surface)}.site-footer:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(73,225,222,.72),rgba(67,139,255,.62),transparent);pointer-events:none}
.footer-inner{min-height:65px;display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-brand{display:flex;align-items:center;gap:16px}.brand-mark-footer{border-color:var(--surface);color:var(--surface);width:42px;height:42px}.footer-brand p{margin:0;font-size:12px;line-height:1.45}.site-footer .footer-brand.is-config-hidden+.pk-footer-nav{margin-left:auto}
.pk-footer-nav{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:0;font-size:12px}.pk-footer-nav__item{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;transition:opacity .18s ease}.pk-footer-nav__item:hover{opacity:.72;text-decoration:underline;text-underline-offset:4px}.pk-footer-nav__item+.pk-footer-nav__item{margin-left:18px;padding-left:18px;border-left:1px solid rgba(255,255,255,.38)}.pk-footer-nav__cookie{appearance:none;-webkit-appearance:none}
.to-top{width:38px;height:38px;border:1px solid rgba(255,255,255,.55);border-radius:50%;display:grid;place-items:center;font-size:20px}.footer-inner>.to-top{margin-left:20px}.to-top:hover{background:rgba(255,255,255,.10);border-color:var(--surface)}
@media(max-width:820px){.footer-inner{min-height:0!important;padding:24px 0 20px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand top" "nav nav";align-items:center!important;gap:18px 20px!important}.footer-brand{grid-area:brand;align-items:center}.footer-brand p{font-size:11px!important;line-height:1.45}.pk-footer-nav{grid-area:nav;width:100%;margin-left:0;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;justify-content:stretch;gap:0;font-size:clamp(9px,1.6vw,11.5px)}.pk-footer-nav__item{min-width:0;padding:3px 4px;text-align:center;white-space:nowrap}.pk-footer-nav__item+.pk-footer-nav__item{margin-left:0;padding-left:4px;border-left-color:rgba(255,255,255,.3)}.to-top{grid-area:top;width:40px;height:40px;justify-self:end;align-self:center;background:rgba(255,255,255,.035)}.footer-inner>.to-top{margin-left:0}}
@media(max-width:620px){.footer-inner{padding:22px 0 18px!important;gap:16px}.pk-footer-nav{grid-template-columns:repeat(4,minmax(0,1fr));font-size:clamp(7.8px,2.15vw,10px)}.pk-footer-nav__item{padding-inline:2px}.pk-footer-nav__item+.pk-footer-nav__item{padding-left:2px;border-left-color:rgba(255,255,255,.28)}.to-top{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.site-header,main,.site-footer,.mobile-nav-backdrop,.mobile-nav-drawer,.mobile-service-subnav,.desktop-service-subnav,.desktop-nav-chevron,.header-project-check,.pk-footer-nav__item,.to-top{transition:none!important}body.mobile-nav-open .site-header,body.mobile-nav-open main,body.mobile-nav-open .site-footer{transform:none;filter:brightness(.72)}}