/*
Theme Name: SPD Wedding FoldFlow Safe
Theme URI: https://spdwedding.de/
Author: SPD Wedding
Description: WordPress-Theme mit exakt gesicherter FoldFlow-Hauptseite und separatem Unterseitenlayout.
Version: 1.0.9
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: spd-wedding-foldflow
*/

:root{
  --spd-red:#e3000f;
  --red:#e3000f;
  --ink:#141414;
  --paper:#fff;
  --soft:#f4f1ed;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,Arial,"Helvetica Neue",Helvetica,sans-serif;
}

body.spdff-page-template{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--sans);
  overflow-x:hidden;
}
.spdff-subpage{background:#fff}
.spdff-page-hero{
  min-height:100svh;
  position:relative;
  isolation:isolate;
  color:#fff;
  display:grid;
  align-items:end;
  padding:clamp(132px,15vw,190px) clamp(24px,6vw,92px) clamp(58px,8vw,104px);
  overflow:hidden;
  background:#111;
}
.spdff-page-hero::before{content:"";position:absolute;inset:-4%;background:var(--hero) center/cover no-repeat;z-index:-3;filter:saturate(1.05);transform:scale(1.04)}
.spdff-page-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,var(--hero-overlay,.34));z-index:-2}
.spdff-page-fold{position:absolute;inset:0 auto 0 0;width:var(--fold-width,38%);background:var(--spd-red);clip-path:polygon(0 0,84% 0,100% 100%,0 100%);z-index:-1}
.spdff-page-hero.is-fold-right .spdff-page-fold{left:auto;right:0;clip-path:polygon(16% 0,100% 0,100% 100%,0 100%)}
.spdff-page-hero.is-fold-white .spdff-page-fold{background:#fff}
.spdff-page-hero.is-fold-soft .spdff-page-fold{background:var(--soft)}
.spdff-page-hero.is-no-fold .spdff-page-fold{display:none}
.spdff-page-hero-copy{position:relative;z-index:2;max-width:900px}
.spdff-page-kicker{margin:0 0 18px;font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.spdff-page-hero h1{margin:0;font-family:var(--serif);font-size:clamp(58px,10vw,148px);font-weight:400;line-height:.9;text-wrap:balance}
.spdff-page-hero p{max-width:680px;margin:26px 0 0;font-size:clamp(18px,2vw,28px);line-height:1.25;font-weight:800;hyphens:auto;overflow-wrap:break-word}
.spdff-page-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:28px;min-height:48px;border-radius:999px;padding:13px 22px 12px;background:#fff;color:var(--spd-red);font-weight:950;letter-spacing:.045em;text-transform:uppercase;font-size:13px;box-shadow:0 18px 42px rgba(0,0,0,.16);text-decoration:none}
.spdff-page-cta:hover{background:rgba(255,255,255,.78)}
.spdff-page-content{padding:clamp(58px,8vw,116px) clamp(24px,6vw,92px);display:grid;grid-template-columns:minmax(0,760px) minmax(240px,380px);gap:clamp(34px,7vw,100px);align-items:start}
.spdff-page-article{font-size:clamp(18px,1.55vw,23px);line-height:1.52;font-weight:630;hyphens:auto;overflow-wrap:break-word}
.spdff-page-article h2,.spdff-page-article h3{font-family:var(--serif);font-weight:400;line-height:1;text-wrap:balance}
.spdff-page-article h2{font-size:clamp(42px,5.8vw,94px)}
.spdff-page-note{position:sticky;top:110px;border-left:8px solid var(--spd-red);background:var(--soft);padding:clamp(22px,3vw,36px);font-weight:850;line-height:1.42}
.spdff-page-note strong{display:block;margin:0 0 14px;font-family:var(--serif);font-size:clamp(28px,3vw,46px);font-weight:400;line-height:.98}
.spdff-page-note p{margin:0;font-size:clamp(16px,1.2vw,19px);line-height:1.45}
@media (max-width:860px){
  .spdff-page-content{grid-template-columns:1fr}
  .spdff-page-hero{min-height:88svh;padding:116px 22px 52px}
  .spdff-page-hero h1{font-size:clamp(42px,13vw,76px)}
  .spdff-page-hero p{font-size:clamp(17px,4.7vw,21px);line-height:1.35}
  .spdff-page-note{position:relative;top:auto}
}
body.menu-open{overflow:hidden}
.scroll-status{position:fixed;top:0;left:0;right:0;z-index:6000;height:6px;background:rgba(227,0,15,.24);pointer-events:none}
.scroll-status span{display:block;width:0%;min-width:42px;height:100%;background:var(--red);box-shadow:0 0 18px rgba(227,0,15,.28)}
.site-header{position:fixed;top:0;left:0;right:0;z-index:5000;width:100%;height:92px;transform:none;background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);border:0;border-radius:0;box-shadow:none;backdrop-filter:none;transition:all .5s cubic-bezier(.2,.8,.2,1)}
.nav-inner{width:min(calc(100% - 60px),1180px);height:100%;margin:auto;padding:0;display:flex;align-items:center;justify-content:space-between;gap:28px;transition:all .5s cubic-bezier(.2,.8,.2,1)}
.brand{display:flex;align-items:center;gap:14px;min-width:300px;font-weight:950;letter-spacing:-.035em;transform-origin:left center;transition:all .42s cubic-bezier(.2,.8,.2,1);color:#fff;text-decoration:none}
.brand img{width:50px;height:50px;object-fit:contain;flex:0 0 auto}
.brand span{line-height:1.08}.brand small{display:block;margin-top:2px;color:rgba(255,255,255,.66);font-size:.74rem;font-weight:800;letter-spacing:0}
.main-nav{display:none}
.main-nav a{position:relative;padding:10px 12px;border-radius:999px;font-size:.94rem;font-weight:900;color:#fff;white-space:nowrap;text-decoration:none;transition:color .24s cubic-bezier(.2,.8,.2,1),background .24s cubic-bezier(.2,.8,.2,1)}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,.13)}
.menu-toggle{position:relative;z-index:2;border:1px solid rgba(255,255,255,.55);border-radius:999px;min-width:auto;width:108px;height:46px;padding:0 20px;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;gap:11px;font-weight:950;cursor:pointer;box-shadow:none;transition:all .5s cubic-bezier(.2,.8,.2,1),background .24s cubic-bezier(.2,.8,.2,1)}
.menu-toggle:hover{background:rgba(255,255,255,.13);box-shadow:none}
.menu-icon{width:22px;height:15px;position:relative;display:inline-block;flex:0 0 auto}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:22px;height:2px;border-radius:999px;background:#fff;transition:top .25s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.2,.8,.2,1)}
.menu-icon::before{top:3px}.menu-icon::after{top:10px}
.menu-label{display:inline-block;max-width:80px;overflow:hidden;white-space:nowrap;transition:opacity .25s cubic-bezier(.2,.8,.2,1),max-width .25s cubic-bezier(.2,.8,.2,1)}
body.menu-open .menu-icon::before{top:7px;transform:rotate(45deg)}
body.menu-open .menu-icon::after{top:7px;transform:rotate(-45deg)}
body.nav-collapsed .site-header{top:18px;left:auto;right:22px;width:64px;height:64px;transform:none;border-radius:50%;background:transparent;border:0;box-shadow:none;backdrop-filter:none;overflow:visible}
body.nav-collapsed .nav-inner{width:64px;height:64px;margin:0;padding:0;gap:0}
body.nav-collapsed .brand,body.nav-collapsed .main-nav{opacity:0;filter:blur(5px);pointer-events:none;width:0;min-width:0;overflow:hidden}
body.nav-collapsed .menu-toggle{width:64px;min-width:64px;height:64px;border-radius:50%;padding:0;margin:0;font-size:0;background:#fff;border:0;box-shadow:0 18px 42px rgba(0,0,0,.18)}
body.nav-collapsed .menu-toggle .menu-icon,body.nav-collapsed .menu-toggle .menu-label{display:none}
body.nav-collapsed .menu-toggle::before{content:"";width:50px;height:50px;display:block;background:url("assets/spd-rose.png") center/contain no-repeat}
body.admin-bar .scroll-status{top:32px}
body.admin-bar .site-header{top:32px}
body.admin-bar.nav-collapsed .site-header{top:50px}
.menu-overlay{position:fixed;inset:0;z-index:4600;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s cubic-bezier(.2,.8,.2,1),visibility 0s linear .28s;overflow:hidden;isolation:isolate}
.menu-overlay::before{content:"";position:absolute;inset:0;background:rgba(20,10,12,.36);backdrop-filter:blur(5px);opacity:0;transition:opacity .38s cubic-bezier(.2,.8,.2,1)}
body.menu-open .menu-overlay{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s cubic-bezier(.2,.8,.2,1),visibility 0s}
body.menu-open .menu-overlay::before{opacity:1}
.fold-panel{position:absolute;top:0;bottom:0;width:50%;background:#fff;box-shadow:0 20px 58px rgba(227,0,27,.09),0 12px 32px rgba(0,0,0,.06);transition:transform .72s cubic-bezier(.2,.8,.2,1)}
.fold-panel.left{left:0;transform:translateX(-104%) skewX(-4deg);clip-path:polygon(0 0,92% 0,100% 100%,0 100%)}
.fold-panel.right{right:0;transform:translateX(104%) skewX(4deg);background:#fff5f6;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%)}
body.menu-open .fold-panel{transform:translateX(0) skewX(0)}
.overlay-content{position:absolute;inset:0;width:min(calc(100% - 44px),1180px);margin:0 auto;padding:128px 0 58px;display:grid;grid-template-columns:.92fr 1.08fr;gap:54px;align-items:end;opacity:0;transform:translateY(30px);transition:opacity .38s cubic-bezier(.2,.8,.2,1),transform .38s cubic-bezier(.2,.8,.2,1)}
body.menu-open .overlay-content{opacity:1;transform:translateY(0);transition-delay:.25s}
.overlay-content h2{margin:0 0 18px;max-width:650px;font-size:clamp(2.5rem,6.4vw,6.7rem);line-height:.88;letter-spacing:-.075em;font-weight:950}
.overlay-content p{margin:0;max-width:540px;color:#555;font-size:1.08rem;line-height:1.65}
.overlay-kicker{margin:0 0 18px;color:var(--red);font-size:.82rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.overlay-links{display:grid;gap:12px}
.overlay-links a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:18px 0;border-bottom:1px solid rgba(23,20,18,.14);font-size:clamp(1.7rem,4.6vw,4.8rem);font-weight:950;line-height:.95;letter-spacing:-.055em;color:var(--ink);text-decoration:none}
.overlay-links span{color:var(--red);font-size:.82rem;letter-spacing:.12em}
@media (max-width:860px){
  .site-header{top:14px;width:calc(100% - 24px);height:68px}
  .nav-inner{padding:0 8px 0 14px;gap:10px}
  .brand{min-width:0}.brand img{width:50px;height:50px}.brand small{display:none}
  .main-nav{display:none}
  .menu-toggle{min-width:58px;width:58px;height:58px;border-radius:50%;padding:0}.menu-toggle .menu-label{display:none}
  body.nav-collapsed .site-header{top:14px;right:14px;width:58px;height:58px}
  body.nav-collapsed .nav-inner,body.nav-collapsed .menu-toggle{width:58px;min-width:58px;height:58px}
  body.nav-collapsed .menu-toggle::before{width:46px;height:46px}
  body.admin-bar .scroll-status{top:46px}
  body.admin-bar .site-header{top:60px}
  body.admin-bar.nav-collapsed .site-header{top:60px}
  .overlay-content{grid-template-columns:1fr;width:calc(100% - 32px);padding:104px 0 36px;gap:24px}
}