/* Claude's approved contrast concept, scoped to the landing-page component. */
@font-face{font-family:Caveat;src:url('../fonts/caveat-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
.ps-section{
  --paper:#fcf8f5;--ink:#40323a;--muted:#725d68;--line:#e5d5db;--rose:#f1e2e5;--berry:#79364c;--night:#391e2e;--light:#fff4f7;--soft:#e8cfd8;--accent:#efb4c6;
  --ps-mauve:#a97d8f;--ps-table:#f6ecee;--ps-table-line:#dcc3cd;--ps-dash:#c4a2b0;
  --ps-chat-in:#fff;--ps-chat-out:#d9fdd3;--ps-chat-ink:#111b21;--ps-chat-time:#5b6a73;--ps-chat-ticks:#0f8fc7;
  --ps-sender-1:#087b66;--ps-sender-2:#a14c35;--ps-sender-3:#5b4bb7;
  --ps-pen-blue:#2b3f73;--ps-pen-red:#b3263e;
  --display:Cormorant,Georgia,serif;--body:Manrope,Arial,sans-serif;
  --ps-hand:Caveat,'Segoe Print','Bradley Hand',cursive;
  --ps-chat-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color-scheme:light;
  margin:0;padding:0 0 clamp(72px,6vw,96px);
  background:linear-gradient(180deg,var(--paint-landing-tone-14) 0,var(--night) clamp(180px,22vw,280px),var(--night) 100%);
  font:15px/1.6 var(--body);color:var(--ink)
}
/* Like Blossom Dusk: the hero's last sky tone flows into a full-width night. */
.ps-followup{position:relative;z-index:1;margin-top:-36px;padding-top:clamp(64px,7vw,96px);border-radius:36px 36px 0 0;background:var(--paper)}
.ps :where(h2,h3,h4,p){margin:0;max-width:none}
.ps :where(button){font:inherit;cursor:pointer;touch-action:manipulation}
.ps :where(svg){display:block;fill:initial;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter}
.ps :where(button,a):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.ps-disclaimer{margin:16px 24px 0;color:var(--soft);font-size:12px;text-align:center}

/* Sektion */
.ps{position:relative;isolation:isolate;overflow:clip;width:min(1184px,calc(100% - clamp(12px,2vw,24px) * 2));margin-inline:auto;padding:clamp(104px,11vw,150px) clamp(18px,4.4vw,56px) clamp(32px,4vw,52px);color:var(--light)}
.ps button:focus-visible{outline-color:var(--accent)}
.ps__watermark{position:absolute;top:40%;left:-10%;z-index:-1;width:62%;height:auto;opacity:.045;pointer-events:none}
.ps__intro{max-width:820px;margin:0 auto;text-align:center}
.ps__title{font-family:var(--display);font-size:clamp(34px,5.6vw,74px);font-weight:500;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.ps__story{max-width:65ch;margin:clamp(22px,3vw,32px) auto 0;color:var(--soft);font-size:clamp(16px,1.4vw,17px);line-height:1.75;text-align:left}
.ps__story p+p{margin-top:16px}
.ps__story strong{color:var(--light);font-weight:700}
.ps__recognition{margin-top:22px;color:var(--accent);font-family:var(--ps-hand);font-size:clamp(27px,3vw,34px);font-weight:600;line-height:1.3;text-wrap:balance}
.ps__solution-intro{max-width:820px;margin:clamp(32px,5vw,60px) auto 0;padding-top:clamp(28px,4vw,44px);border-top:1px solid rgba(255,244,247,.2);text-align:center}
.ps__solution-title{max-width:30ch;margin:0 auto;font-family:var(--display);font-size:clamp(30px,4vw,50px);font-weight:500;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
.ps__lead{max-width:65ch;margin:16px auto 0;color:var(--soft);font-size:clamp(16px,1.4vw,17px);line-height:1.65}

/* Fragen als Tabs */
.ps__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,12px);max-width:720px;margin:clamp(26px,3vw,34px) auto clamp(30px,4vw,52px)}
.ps__tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:88px;padding:14px 10px;border:1px solid rgba(255,244,247,.22);border-radius:20px;background:rgba(255,244,247,.05);color:var(--light);font-size:clamp(13px,1.25vw,15px);font-weight:600;line-height:1.25;text-align:center;text-wrap:balance;transition:background-color .2s,border-color .2s,color .2s}
.ps__tab:hover{border-color:rgba(255,244,247,.42);background:rgba(255,244,247,.1)}
.ps__tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent);color:var(--night)}
.ps__tab-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Bühne: links ohne, rechts mit WedPlanning */
.ps__stage{display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1.12fr);align-items:start;gap:32px}
.ps__problem{min-width:0;padding-top:clamp(24px,3vw,34px)}
.ps__tagrow{max-width:420px;margin:0 auto 18px;padding:0 12px}
.ps__tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:99px;font-size:13px;font-weight:700;line-height:1.3}
.ps__tag--without{border:1.5px dashed rgba(255,244,247,.5);color:var(--light)}
.ps__tag--with{padding-left:11px;border:1.5px solid var(--berry);background:var(--berry);color:var(--light)}
.ps__tag--with img{width:24px;height:auto}
.ps__caption{color:var(--soft);font-size:14px;text-align:center}
.ps__bridge{display:grid;place-items:center;align-self:center;width:52px;height:52px;border:1px solid rgba(255,244,247,.26);border-radius:50%;background:rgba(255,244,247,.06);color:var(--accent)}
.ps__bridge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ps__solution{min-width:0;padding:clamp(24px,3vw,34px) clamp(20px,3vw,36px) clamp(26px,3vw,32px);border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:0 30px 60px rgba(16,6,12,.35)}

/* Problem: Nachrichten im WhatsApp-Stil */
.ps__chats{display:flex;flex-direction:column;gap:20px;max-width:420px;margin:26px auto 24px;padding:0 12px;font-family:var(--ps-chat-font)}
.ps__msg{position:relative;align-self:flex-start;max-width:84%;padding:7px 10px 7px 11px;border-radius:0 10px 10px 10px;background:var(--ps-chat-in);color:var(--ps-chat-ink);font-size:clamp(15px,1.3vw,16px);line-height:1.36;box-shadow:0 1px 1px rgba(0,0,0,.2),0 16px 30px rgba(10,3,7,.35)}
.ps__msg::before{content:"";position:absolute;top:0;left:-8px;width:9px;height:13px;background:inherit;clip-path:polygon(0 0,100% 0,100% 100%)}
.ps__msg--out{align-self:flex-end;border-radius:10px 0 10px 10px;background:var(--ps-chat-out)}
.ps__msg--out::before{right:-8px;left:auto;clip-path:polygon(0 0,100% 0,0 100%)}
.ps__msg:nth-child(1){margin-left:2%;transform:rotate(-3deg)}
.ps__msg:nth-child(2){margin-right:2%;transform:rotate(2.2deg)}
.ps__msg:nth-child(3){margin-left:14%;transform:rotate(-1.2deg)}
.ps__msg-author{display:block;margin-bottom:1px;font-size:13px;font-weight:600;line-height:1.35}
.ps__sender--1{color:var(--ps-sender-1)}
.ps__sender--2{color:var(--ps-sender-2)}
.ps__sender--3{color:var(--ps-sender-3)}
.ps__msg-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:flex-end;column-gap:12px}
.ps__msg-row p{flex:1 1 auto}
.ps__msg-meta{display:inline-flex;align-items:center;gap:3px;padding-bottom:1px;color:var(--ps-chat-time);font-size:11px;line-height:1;white-space:nowrap}
.ps__msg-meta svg{width:17px;height:11px;fill:none;stroke:var(--ps-chat-ticks);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Problem: Sitzplan-Skizze */
.ps__sketch{max-width:420px;margin:30px auto 24px;padding:0 14px}
.ps__sketch-paper{position:relative;padding:10px 10px 8px;border-radius:3px;background-color:#fdfdf9;background-image:linear-gradient(rgba(70,110,170,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(70,110,170,.14) 1px,transparent 1px);background-size:16px 16px;box-shadow:0 2px 2px rgba(0,0,0,.18),0 18px 34px rgba(10,3,7,.4);transform:rotate(-2deg)}
.ps__sketch-tape{position:absolute;top:-11px;left:50%;width:96px;height:24px;margin-left:-48px;background:rgba(241,226,229,.7);box-shadow:0 1px 2px rgba(0,0,0,.15);transform:rotate(-4deg)}
.ps__sketch svg{width:100%;height:auto;overflow:visible;font-family:var(--ps-hand)}

/* Problem: Notizzettel */
.ps__notes{display:flex;flex-direction:column;max-width:420px;margin:26px auto 24px;padding:6px 12px 0;font-family:var(--ps-hand)}
.ps__note{position:relative;border-radius:2px;color:var(--ps-pen-blue);box-shadow:0 2px 2px rgba(0,0,0,.18),0 18px 30px rgba(10,3,7,.38)}
.ps__note--yellow::before,.ps__note--pink::before{content:"";position:absolute;top:0;right:0;left:0;height:14px;background:rgba(0,0,0,.04)}
.ps__note--yellow{align-self:flex-start;width:50%;min-height:104px;margin-left:2%;padding:16px 16px 14px;background:#f7e8a4;transform:rotate(-4deg)}
.ps__note--lined{align-self:flex-end;width:56%;min-height:96px;margin-top:-48px;margin-right:2%;padding:12px 14px 12px 32px;background-color:#fffdf7;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 25px,rgba(43,63,115,.2) 25px,rgba(43,63,115,.2) 26px);background-position:0 10px;transform:rotate(2.5deg)}
.ps__note--lined::before{content:"";position:absolute;top:0;bottom:0;left:22px;width:1px;background:rgba(196,72,96,.5)}
.ps__note--pink{align-self:flex-start;width:62%;min-height:88px;margin-top:-14px;margin-left:12%;padding:14px 16px;background:#f6d3de;color:#5a1f35;transform:rotate(-1.5deg)}
.ps__note-label{font-size:22px;font-weight:500;line-height:1.1}
.ps__note-amount{margin-top:2px;font-size:clamp(30px,2.8vw,36px);font-weight:700;line-height:1.05}
.ps__note-line{font-size:23px;font-weight:500;line-height:26px}
.ps__note-line--strong{font-weight:700}
.ps__note-line svg{display:inline-block;width:20px;height:20px;vertical-align:-3px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ps__note-question{font-size:clamp(24px,2.2vw,27px);font-weight:700;line-height:1.12}

/* Lösung */
.ps__panel-title{margin:16px 0 18px;color:var(--night);font-family:var(--display);font-size:clamp(32px,3.5vw,44px);font-weight:500;line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.ps__panel-note{margin-top:16px;color:var(--muted);font-size:13px}
.ps__guests{margin:0;padding:0;list-style:none}
.ps__guest{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;column-gap:clamp(10px,1.2vw,14px);padding:11px 0;border-top:1px solid var(--line);font-size:15px}
.ps__guest:last-child{border-bottom:1px solid var(--line)}
.ps__guest-detail{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.ps__avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--rose);color:var(--berry);font-size:12px;font-weight:700}
.ps__avatar--open{border:1.5px dashed var(--ps-dash);background:transparent}
.ps__count{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-variant-numeric:tabular-nums}
.ps__count svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ps__status{justify-self:end;padding:3px 11px;border-radius:99px;background:var(--berry);color:var(--light);font-size:12px;font-weight:700;line-height:1.5;white-space:nowrap}
.ps__status--open{padding:2px 10px;border:1px solid var(--ps-dash);background:transparent;color:var(--berry)}
.ps__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ps__tables{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px clamp(40px,6vw,72px);padding:26px 0 22px}
.ps__table{position:relative;display:grid;place-items:center;flex:0 0 auto;width:108px;height:108px;border:1.5px solid var(--ps-table-line);border-radius:50%;background:var(--ps-table);color:var(--muted);font-size:13px;font-weight:600}
.ps__seat{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--ps-mauve)}
.ps__seat--n{translate:0 -60px}
.ps__seat--ne{translate:52px -30px}
.ps__seat--se{translate:52px 30px}
.ps__seat--s{translate:0 60px}
.ps__seat--sw{translate:-52px 30px}
.ps__seat--nw{translate:-52px -30px}
.ps__seat--free{border:1.5px dashed var(--ps-mauve);background:transparent}
.ps__seat--lea{background:var(--berry);box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--berry)}
.ps__seat--lea::after{content:"";position:absolute;inset:-5px;border:2px solid var(--berry);border-radius:50%;opacity:0}
.ps__legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;color:var(--muted);font-size:13px}
.ps__legend span{display:inline-flex;align-items:center;gap:8px}
.ps__legend-dot{width:12px;height:12px;border-radius:50%;background:var(--ps-mauve)}
.ps__legend-dot--lea{background:var(--berry);box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--berry)}
.ps__legend-dot--free{border:1.5px dashed var(--ps-mauve);background:transparent}
.ps__bar{display:flex;gap:4px;height:12px;margin:4px 0 18px}
.ps__bar span{border-radius:99px;transform-origin:left center}
.ps__bar-paid{flex:0 0 31.25%;background:var(--ps-table-line)}
.ps__bar-open{flex:1 1 auto;background:var(--berry)}
.ps__costs{margin:0}
.ps__cost{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.ps__cost dt{display:flex;align-items:center;gap:10px}
.ps__cost dd{margin:0;font-variant-numeric:tabular-nums}
.ps__cost--open{border-bottom:1px solid var(--line);color:var(--berry);font-weight:700}
.ps__dot{width:10px;height:10px;border-radius:50%}
.ps__dot--paid{background:var(--ps-table-line)}
.ps__dot--open{background:var(--berry)}

/* Button */
.ps__cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 18px;margin-top:clamp(28px,4vw,48px)}
.ps__button{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:min(100%,520px);min-height:54px;padding:14px 24px;border:0;border-radius:99px;background:var(--accent);color:var(--night);font-size:16px;font-weight:700;white-space:normal;text-align:center;text-decoration:none;box-shadow:0 10px 26px rgba(239,180,198,.18);transition:background-color .2s}
.ps__button:hover{background:var(--light);text-decoration:none}
.ps__button span{min-width:0}
.ps__button svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Animationen: links kommt das Durcheinander herein, rechts baut sich die Lösung auf */
.ps__msg,.ps__note,.ps__sketch-paper{animation:psMsg .36s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.ps__panel{animation:psPanel .3s ease-out both}
.ps__guest,.ps__cost{animation:psRow .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.ps__status{animation:psPop .4s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0ms)}
.ps__seat{animation:psPop .32s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d,0ms)}
.ps__seat--lea{animation:psLand .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:var(--d,0ms)}
.ps__seat--lea::after{animation:psRing 1s ease-out forwards;animation-delay:calc(var(--d,0ms) + 550ms)}
.ps__bar span{animation:psGrow var(--t,.7s) cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.ps__legend,.ps__panel-note{animation:psFade .4s ease-out both;animation-delay:var(--d,0ms)}
.ps.is-enhanced:not(.is-visible) :is(.ps__msg,.ps__note,.ps__sketch-paper,.ps__panel,.ps__guest,.ps__cost,.ps__status,.ps__seat,.ps__bar span,.ps__legend,.ps__panel-note),
.ps.is-enhanced:not(.is-visible) .ps__seat--lea::after{animation-play-state:paused}
@keyframes psMsg{from{opacity:0;translate:0 12px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes psPanel{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes psRow{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes psPop{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
@keyframes psLand{0%{opacity:0;scale:2.6}55%{opacity:1}100%{opacity:1;scale:1}}
@keyframes psRing{from{opacity:.75;scale:1}to{opacity:0;scale:2.6}}
@keyframes psGrow{from{scale:0 1}to{scale:1 1}}
@keyframes psFade{from{opacity:0}to{opacity:1}}

@media (max-width:899px){
  .ps__stage{grid-template-columns:minmax(0,1fr);gap:18px}
  .ps__problem{padding-top:0}
  .ps__chats{gap:12px;margin:16px auto 14px}
  .ps__sketch{max-width:280px;margin:20px auto 14px}
  .ps__notes{max-width:320px;margin:16px auto 14px}
  .ps__bridge{justify-self:center;width:36px;height:36px}
  .ps__bridge svg{transform:rotate(90deg)}
}
/* Keep names and handwritten amounts readable on the narrowest phones. */
@media (max-width:380px){
  .ps__guest{grid-template-columns:28px minmax(0,1fr) auto;column-gap:8px;row-gap:6px}
  .ps__avatar{grid-row:1 / 3;width:28px;height:28px}
  .ps__count{grid-column:3;grid-row:1}
  .ps__status{grid-column:2 / -1;justify-self:start}
  .ps__note--yellow{width:58%}
  .ps__note--lined{width:64%}
  .ps__note--pink{width:76%}
  .ps__note-line{font-size:21px}
  .ps__cost{gap:8px;font-size:14px}
  .ps__cost dd{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .ps *,.ps *::before,.ps *::after{animation:none!important;transition:none!important}
}