/* blog-neu-kopf.css - Stile von Kopf, Mobilmenue und Fusszeile (erzeugt von tools/blog-neu-bauen.cjs). Eigene Datei: sie wird erst mit dem neuen Markup eingebunden. */
/* ═══ Kopf, Mobilmenue und Fusszeile (Schablone master/neu) ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:500;font-size:15px;letter-spacing:.04em;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));color:#1a1206;box-shadow:0 10px 40px -10px rgba(var(--gold-rgb),.6)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 18px 50px -12px rgba(var(--gold-rgb),.8)}
.btn-ghost{border-color:rgba(255,255,255,.22);color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--gold);transform:translateY(-2px)}
.btn svg{width:18px;height:18px;flex-shrink:0}
.nav{position:sticky;top:0;z-index:110;transition:background-color .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(var(--bg-rgb),.78);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line)}
.nav:not(.solid){background:linear-gradient(180deg,rgba(var(--bg-rgb),.78),rgba(var(--bg-rgb),.42) 55%,rgba(var(--bg-rgb),0))}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.logo img{width:118px;height:auto}
.eq-mini{display:flex;align-items:flex-end;gap:2px;height:18px}
.eq-mini i{width:3px;height:100%;background:var(--gold);border-radius:2px;transform-origin:bottom;animation:eqm 1s ease-in-out infinite alternate}
.eq-mini i:nth-child(2){animation-delay:-.4s;animation-duration:.8s}
.eq-mini i:nth-child(3){animation-delay:-.7s;animation-duration:1.2s}
.eq-mini i:nth-child(4){animation-delay:-.2s;animation-duration:.9s}
@keyframes eqm{from{transform:scaleY(.2)}to{transform:scaleY(1)}}
.nav-links{display:none;gap:4px;list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font-size:14px;letter-spacing:.06em;color:var(--muted);border-radius:999px;transition:color .25s,background-color .25s}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-cta{display:none}
.burger{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);display:grid;place-items:center;cursor:pointer}
.burger span{display:block;width:20px;height:1.5px;background:var(--text);position:relative;transition:transform .3s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:1.5px;background:var(--text);transition:transform .3s}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.menu-open .burger span{background:transparent}
.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:105;background:rgba(var(--bg-rgb),.97);display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 40px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu-open .mmenu{opacity:1;visibility:visible}
.mmenu a{font-family:var(--font-head);font-size:clamp(40px,12vw,64px);line-height:1.1;text-decoration:none;color:var(--text);padding:4px 0}
.mmenu a:hover{color:var(--gold)}
.mmenu .btn{margin-top:28px;padding:0 28px;font-family:var(--font-body);font-size:16px;align-self:flex-start}
.lang{display:flex;padding:3px;border-radius:999px;border:1px solid var(--line);margin-left:auto}
.lang button{min-width:44px;min-height:44px;border:0;border-radius:999px;background:none;cursor:pointer;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.lang button.on{background:rgba(var(--gold-rgb),.16);color:var(--gold-2)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:999px;font-size:12px;letter-spacing:.1em;color:var(--muted);text-decoration:none;transition:background-color .3s,color .3s}
.lang a:hover,.lang a:focus-visible{color:var(--text)}
.lang a.on{background:rgba(var(--gold-rgb),.16);color:var(--gold-2)}
.nav-ig{display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;background:rgba(var(--gold-rgb),.16);color:var(--gold-2);text-decoration:none;margin-left:auto;transition:color .25s,background-color .25s}
.nav-ig:hover,.nav-ig:focus-visible{background:rgba(var(--gold-rgb),.30)}
.nav-ig+.lang{margin-left:0}
.nav:not(.solid) .nav-ig{background:rgba(var(--gold-rgb),.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (min-width:560px){.nav-ig{display:inline-flex}}
@media (min-width:1200px){.nav-ig{margin-left:0}}
@media (min-width:1200px){
  .nav-links{display:flex}.nav-cta{display:inline-flex}.burger{display:none}.lang{margin-left:0}
}
footer{padding:70px 0 120px;border-top:1px solid var(--line);margin-top:clamp(80px,10vw,140px);background:var(--bg-2)}
.fgrid{display:grid;gap:36px}
.fbrand img{width:160px;margin-bottom:16px}
.fgrid p{color:var(--muted);font-size:14px;margin:0;max-width:340px}
.fgrid h3{font-size:14px;letter-spacing:.04em;color:var(--gold);font-weight:500;margin:0 0 10px}
.fgrid nav,.fgrid>div:not(.fbrand):not(.fqr){display:flex;flex-direction:column}
.fgrid nav a,.fgrid>div a{display:flex;align-items:center;min-height:40px;text-decoration:none;color:var(--muted);font-size:14px}
.fgrid a:hover{color:var(--gold-2)}
.fqr img{width:120px;height:120px;border-radius:12px;background:#fff;padding:6px;margin-bottom:10px}
.fbottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}
.fbottom small{color:var(--dim);font-size:13px}
.fbottom nav{display:flex;flex-wrap:wrap;gap:0 6px}
.fbottom a,.fbottom button{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;text-decoration:none;color:var(--muted);font-size:13px;background:none;border:0;cursor:pointer}
.fbottom a:hover,.fbottom button:hover{color:var(--gold-2)}
@media (min-width:700px){.fgrid{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.fgrid{grid-template-columns:1.3fr 1.2fr 1fr .9fr}.fgrid nav{display:grid;grid-template-columns:1fr 1fr;column-gap:18px;align-content:start}.fgrid nav h3{grid-column:1/-1}footer{padding-bottom:70px}}
.nav:not(.solid) .lang{background:rgba(var(--bg-rgb),.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nav:not(.solid) .lang button,.nav:not(.solid) .lang a{color:rgba(255,255,255,.82)}
.nav:not(.solid) .lang a.on{color:var(--gold-2)}
.ki-foot{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--dim);display:flex;gap:8px;align-items:flex-start}
.ki-foot svg{width:13px;height:13px;flex:none;margin-top:3px;color:var(--gold-2)}
.nav-links a.aktiv{color:var(--gold-2)}
.cookie-ok #cookie,.cookie-ok #cookie-backdrop{display:none !important}
.nav .nav-ig{opacity:1}
.nav .nav-ig svg{width:20px;height:20px}
.nav .nav-ig:hover,.nav .nav-ig:focus-visible{transform:none}
.menu-open .mmenu{opacity:1;visibility:visible}
.fbrand img,.fqr img{height:auto}
@media (pointer:coarse),(max-width:899px){#mmenu a,footer a,.footer a,footer nav a{display:flex;align-items:center;min-height:44px!important}}
#nav{height:auto;background:transparent}#nav.solid{height:auto}
#nav.nav{position:sticky;top:0;left:auto;right:auto;padding:0;z-index:110}
#nav.nav,#nav.nav:not(.scrolled){height:auto!important}
#nav.nav .nav-links{gap:4px;font-size:inherit;letter-spacing:normal;text-transform:none}
#nav.nav .nav-links a,#nav.nav:not(.scrolled) .nav-links a{position:static;color:var(--muted);font-weight:300;text-shadow:none}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:ease}
.nav{view-transition-name:kopf}
.nav .logo{view-transition-name:kopf-logo}
.nav .nav-links{view-transition-name:kopf-links}
.nav .nav-ig{view-transition-name:kopf-ig}
.nav .lang{view-transition-name:kopf-sprache}
.nav .nav-cta{view-transition-name:kopf-cta}
.lang a.on{view-transition-name:sprachmarke}
::view-transition-group(kopf){animation:none}
::view-transition-old(kopf){display:none}
::view-transition-new(kopf){animation:none}
::view-transition-group(kopf-logo),::view-transition-group(kopf-links),::view-transition-group(kopf-ig),::view-transition-group(kopf-sprache),::view-transition-group(kopf-cta),::view-transition-group(sprachmarke){animation-duration:.3s;animation-timing-function:ease}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
#nav.nav{display:block}
@media (max-width:1024px){#nav.nav:not(.solid){background:linear-gradient(180deg,rgba(var(--bg-rgb),.78),rgba(var(--bg-rgb),.42) 55%,rgba(var(--bg-rgb),0))!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:1px solid transparent!important}#nav.nav.solid{background:rgba(var(--bg-rgb),.78)!important;-webkit-backdrop-filter:blur(16px) saturate(1.3)!important;backdrop-filter:blur(16px) saturate(1.3)!important;border-bottom:1px solid var(--line)!important}}
#nav.nav .nav-links a::after{display:none}
#nav.nav .nav-links a:hover{color:var(--text)}
#nav.nav .nav-links a.aktiv,#nav.nav:not(.scrolled) .nav-links a.aktiv{color:var(--gold-2)}
/* WhatsApp-Knopf wie .btn-gold */
#wa-float{width:54px !important;height:54px !important;background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep)) !important;box-shadow:0 10px 40px -10px rgba(var(--gold-rgb),.6) !important;transition:transform .3s,box-shadow .3s !important}
#wa-float:hover{transform:translateY(-3px) !important;box-shadow:0 14px 44px -10px rgba(var(--gold-rgb),.8) !important}
#wa-float svg{width:26px;height:26px;fill:#1a1206}
/* Knoepfe im Artikel und Cookie-Knopf wie Anfragen-Knopf bzw. Zweitknopf */
.btn-gold,.cookie-btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep)) !important;color:#1a1206 !important;border-color:transparent !important;box-shadow:0 10px 40px -10px rgba(var(--gold-rgb),.6)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,255,255,.22) !important;background:rgba(255,255,255,.03)}
.btn-outline:hover{border-color:var(--gold) !important;transform:translateY(-2px)}