/* Additive styles for the four information pages. Typography, focus states and
   gold buttons come from the shared seelenreise.css brand system. */
.cp-page{max-width:1240px;margin-inline:auto;padding:24px clamp(20px,4vw,52px) 58px}
.cp-page p,.cp-page a,.cp-page h1,.cp-page h2,.cp-page h3{overflow-wrap:break-word}
.cp-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:18px}
.cp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,68px);padding-block:20px 55px}
.cp-hero>*{min-width:0}
.cp-copy h1{font-size:clamp(48px,5.3vw,72px);margin-bottom:20px;line-height:1.05}
.cp-copy>p:not(.eyebrow):not(.cp-status):not(.cp-lead){max-width:560px}
.cp-lead{font:400 clamp(30px,3.2vw,43px)/1.15 'Instrument Serif',Georgia,serif;margin-bottom:24px}
.cp-status{display:inline-block;border:1px solid var(--antique);border-radius:3px;padding:7px 10px;color:var(--antique);font-size:11px;line-height:1.6;letter-spacing:.08em;font-weight:750;margin-bottom:20px}
.cp-page .button{max-width:100%;font-size:22px;gap:14px;text-align:center;margin-top:8px}
.cp-visual{width:100%;margin:0}
.cp-visual>img,.cp-device-art{width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;border-radius:4px}
.cp-page figcaption{font-size:12px;line-height:1.6;color:#645a4f;margin-top:12px}
.cp-section{padding-block:40px;border-top:1px solid var(--cashmere)}
.cp-section>.eyebrow{margin-bottom:15px}
.cp-section h2,.cp-announcement h2{font-size:clamp(36px,4vw,51px);line-height:1.1;margin-bottom:24px}
.cp-intro{max-width:760px}
.cp-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 45px;margin-block:28px}
.cp-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cp-columns h3{font-size:30px;line-height:1.12;margin-bottom:15px}
.cp-columns p{margin:0}
.cp-note,.cp-price-note{padding:22px 24px;border-left:3px solid var(--antique);background:var(--pearl);font-size:15px;margin-block:24px 0}
.cp-price-note strong{display:block;margin-bottom:6px}
.cp-note a{text-underline-offset:4px}
.cp-announcement{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding-block:40px 10px;border-top:1px solid var(--cashmere)}
.cp-announcement .eyebrow{margin-bottom:14px}
.cp-announcement h2{margin-bottom:18px}
.cp-announcement p:last-child{max-width:680px;margin-bottom:0}
.cp-announcement>.button{justify-self:start;max-width:290px}
.cp-announcement a[href^="mailto:"]{overflow-wrap:anywhere}
.cp-about{grid-template-columns:minmax(0,1fr) minmax(220px,.65fr)}
.cp-portrait{max-width:290px;justify-self:center;margin:0}
.cp-portrait>img{width:100%;height:auto;border-radius:4px}
/* Preserve the original image proportions and original logo overlays. */
.cp-device{position:relative;isolation:isolate;aspect-ratio:3/2;min-height:0}
.cp-laptop-logo{position:absolute;left:46.5%;top:19%;width:7%;height:auto;filter:drop-shadow(0 0 3px #fff9)}
.cp-phone-ui{position:absolute;left:37%;top:14%;width:26%;height:68%;display:flex;align-items:center;flex-direction:column;gap:4%;color:#67512b;overflow:hidden;container-type:inline-size}
.cp-phone-ui>img{width:29%;height:auto;object-fit:contain}
.cp-phone-brand{font:400 clamp(7px,3cqw,13px) 'Instrument Serif',Georgia,serif;letter-spacing:.04em}
.cp-phone-greeting{font:400 10cqw 'Instrument Serif',Georgia,serif;line-height:1.1;margin:3% 0}
.cp-phone-tile{width:91%;background:#efe5d0;border:1px solid #ded0ae;border-radius:2px;text-align:center;font-size:6cqw;line-height:1.3;padding:5% 0}
.cp-phone-ui small{font-size:5cqw;letter-spacing:.03em;margin-top:auto}
@media(max-width:850px){
  .cp-hero{grid-template-columns:1fr;gap:30px;padding-block:14px 38px}
  .cp-visual{max-width:660px;justify-self:center}
  .cp-copy>p:not(.eyebrow):not(.cp-status):not(.cp-lead){max-width:680px}
  .cp-announcement{grid-template-columns:1fr;gap:20px}
  .cp-about{grid-template-columns:minmax(0,1fr) minmax(180px,.55fr);gap:30px}
  .cp-three{grid-template-columns:1fr;gap:24px}
}
@media(max-width:600px){
  .cp-page{padding-top:14px;padding-bottom:38px}
  .cp-copy h1{font-size:clamp(43px,11vw,58px)}
  .cp-lead{font-size:32px}
  .cp-columns,.cp-about{grid-template-columns:1fr}
  .cp-columns{gap:25px;margin-block:25px}
  .cp-section{padding-block:30px}
  .cp-section h2,.cp-announcement h2{font-size:37px}
  .cp-note,.cp-price-note{padding:18px}
  .cp-announcement{padding-top:30px}
  .cp-page .button{font-size:21px;padding-inline:16px;min-height:54px}
  .cp-portrait{max-width:220px;justify-self:start}
}