/* ppwr.ch — Landingpage-Styles (Designsystem: Broadsheet-Familie / templates/ppwr.ch) */
:root{
  --bg:#fdf0d5; --surface:#f6e3bf; --surface2:#fffaf0; --ink:#003049;
  --cta:#c1121f; --cta-dk:#8a0000; --badge:#780000;
  --cta-400:#df5c66; --cta-400-dk:#c93c47;
  --cta-600:#9e0f1a; --cta-600-dk:#7a0b13;
  --blue:#386c8c; --blue-lt:#eef5f9; --blue-dk:#14374a;
  --muted:#6c6452; --line:#e4d7b8; --sand:#ddd2b3;
  --heading:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6}
h1,h2,h3{font-family:var(--heading);font-weight:700;line-height:1.15;letter-spacing:-.01em}
a{color:var(--cta-dk)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(22px,5vw,56px)}

/* Topbar */
.topbar{background:var(--surface2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar-in{max-width:1080px;margin:0 auto;padding:14px clamp(22px,5vw,56px);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo-badge{width:36px;height:36px;flex:none;background:var(--badge);display:grid;grid-template-columns:1fr 1fr;place-items:center}
.logo-badge i{font-style:normal;font-family:var(--heading);font-weight:700;font-size:11px;color:#fffaf0;line-height:1}
.logo-badge.sm{width:28px;height:28px}.logo-badge.sm i{font-size:8px}
.brand-mark{font-family:var(--heading);font-weight:700;font-size:22px;color:var(--ink);text-decoration:none}
.brand-mark b{color:var(--cta)}
.topnav{margin-left:auto;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.topnav a{font-size:14.5px;color:var(--ink);text-decoration:none;font-weight:500}
.topnav a:hover{color:var(--cta)}
.topnav a.btn-primary{color:#fff}
.topnav a.btn-primary:hover{color:#fff}

/* Buttons */
.btn{display:inline-block;font-family:var(--heading);font-weight:600;font-size:15.5px;
  padding:14px 28px;border-radius:10px;text-decoration:none;border:1px solid transparent;transition:all .15s}
/* Ein Rot, zwei Helligkeiten: 600 (dunkler) fuer alles Kostenpflichtige,
   400 (heller) fuer alles Kostenlose — .free auf .btn-primary umschalten. */
.btn-primary{background:var(--cta-600);color:#fff}
.btn-primary:hover{background:var(--cta-600-dk)}
.btn-primary.free{background:var(--cta-400);color:#fff}
.btn-primary.free:hover{background:var(--cta-400-dk)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{border-color:var(--cta);color:var(--cta)}
.btn-lg{font-size:17px;padding:16px 36px}

/* Dezentes Einblenden beim Scrollen (siehe assets/ppwr.js) */
.fade-in-ready{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.fade-in-visible{opacity:1;transform:none}

/* Hero */
/* Nur oben und unten setzen — die Kurzform wuerde den seitlichen Abstand
   aus .wrap auf 0 zuruecksetzen (der Hero traegt beide Klassen). */
.hero{padding-top:88px;padding-bottom:64px}
.eyebrow{font-family:'IBM Plex Mono',monospace,var(--body);font-size:13px;letter-spacing:2px;
  text-transform:uppercase;color:var(--cta);font-weight:600;margin-bottom:18px}
.hero h1{font-size:clamp(34px,5.5vw,54px);max-width:780px;margin-bottom:22px}
.hero p.lead{font-size:19px;color:var(--muted);max-width:640px;margin-bottom:34px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-note{font-size:13.5px;color:var(--muted)}

/* Hero, zweispaltig: Text/Vertrauensliste links, interaktiver Rollen-Check-
   Kasten rechts — spart vertikalen Platz gegenueber dem fruoheren, rein
   gestapelten Aufbau und zeigt sofort, was das Tool tut. */
.hero-split{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:start}
@media(max-width:860px){.hero-split{grid-template-columns:1fr;gap:32px}}
.hero-main .lead{margin-bottom:22px}

/* Vertrauensliste: kompakter als die fruoheren Pillen, praesenter als reiner
   Fliesstext — ein Haaekchen je Zeile, kein Kasten-Hintergrund. */
.trustlist{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:4px}
.trustlist li{font-size:14px;color:var(--muted);padding-left:24px;position:relative;line-height:1.5}
.trustlist li::before{content:"✓";position:absolute;left:0;top:0;color:var(--blue);font-weight:700}

.hero-box-col{display:flex;flex-direction:column;gap:18px}
.hero-box-sm{padding:20px 24px;gap:2px;animation:none;box-shadow:none;border-width:1.5px;
  border-color:var(--sand);background:var(--bg)}
.hero-box-tag-alt{background:transparent;color:var(--cta-600);padding:0;text-transform:none;
  letter-spacing:0;font-family:var(--heading);font-size:15.5px;font-weight:700;margin-bottom:6px}
.hero-box-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;
  margin-bottom:16px}
.hero-box-list li{font-size:12.5px;color:var(--muted);padding-left:16px;position:relative}
.hero-box-list li::before{content:"✓";position:absolute;left:0;color:var(--cta-600);font-weight:700}
@media(max-width:420px){.hero-box-list{grid-template-columns:1fr}}
.hero-box{background:var(--surface2);border:2px solid var(--cta-400);border-radius:18px;
  padding:30px 28px;display:flex;flex-direction:column;gap:6px;
  box-shadow:0 0 0 0 rgba(193,18,31,.18);animation:heroBoxPulse 3.5s ease-in-out infinite}
@keyframes heroBoxPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(193,18,31,.14)}
  50%{box-shadow:0 0 0 10px rgba(193,18,31,0)}
}
.hero-box-tag{display:inline-block;align-self:flex-start;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--cta-600);
  padding:4px 11px;border-radius:999px;margin-bottom:8px}
.hero-box-title{font-size:21px;margin-bottom:4px}
.hero-box-sub{font-size:14px;color:var(--muted);margin-bottom:18px}
.hero-box-form{display:flex;flex-direction:column;gap:12px}
.hero-box-input{width:100%;padding:13px 15px;font-size:15px;font-family:inherit;
  border:1.5px solid var(--line);border-radius:10px;background:#fdfcf9;color:var(--ink);
  outline:none;transition:border-color .15s}
.hero-box-input:focus{border-color:var(--cta-400)}
.hero-box-form .btn{width:100%;text-align:center}
.hero-box-alt{display:block;margin-top:16px;font-size:13px;color:var(--muted);text-decoration:none}
.hero-box-alt:hover{color:var(--cta)}

/* Trustbar */
.trustbar{display:flex;gap:14px;flex-wrap:wrap;margin-top:38px}
.trust{background:var(--surface2);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-size:13.5px;color:var(--blue-dk)}

/* Sections */
section{padding:72px 0}
section.alt{background:var(--surface2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-title{font-size:clamp(26px,3.6vw,36px);margin-bottom:14px}
.sec-sub{font-size:17px;color:var(--muted);max-width:640px;margin-bottom:44px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.steps-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.steps-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps-4{grid-template-columns:1fr}}
.step{background:var(--surface2);border:1px solid var(--line);border-radius:16px;padding:28px}
section.alt .step{background:var(--bg)}
.step .num{font-family:var(--heading);font-weight:700;font-size:15px;color:#fff;background:var(--cta);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-size:19px;margin-bottom:10px}
.step p{font-size:14.5px;color:var(--muted)}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;align-items:stretch}
.plan{background:var(--surface2);border:1px solid var(--line);border-radius:16px;padding:30px;
  display:flex;flex-direction:column;gap:12px}
.plan.hot{border:2px solid var(--cta);position:relative}
.plan .flag{position:absolute;top:-13px;left:24px;background:var(--cta);color:#fff;font-size:11.5px;
  font-weight:600;padding:4px 12px;border-radius:999px;letter-spacing:.5px}
.plan h3{font-size:20px}
.plan .price{font-family:var(--heading);font-size:30px;font-weight:700}
.plan .price small{font-size:14px;color:var(--muted);font-weight:400;white-space:nowrap}
.plan ul{list-style:none;flex:1;display:flex;flex-direction:column;gap:8px}
.plan li{font-size:14.5px;color:var(--muted);padding-left:22px;position:relative}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--blue);font-weight:700}
.plan .btn{text-align:center}

/* Rollenblasen: beantworten auf einen Blick "ist das fuer mich?" */
.plan-rollen{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.plan-rollen span{background:var(--blue-lt);border:1px solid #cfe0ea;color:var(--blue-dk);
  font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:999px;line-height:1.5}

/* Vier Karten, vier Farben: die Oberkante traegt den Akzent, der Grund den Ton.
   Die Sattheit nimmt von links nach rechts zu — kostenlos bis dauerhaft. */
.plans-4 .plan{border-top-width:3px}
.plan-frei{background:#fffaf0;border-top-color:var(--sand)}
.plan-expert{background:#fbefec;border-color:#e8cdc7;border-top-color:var(--cta)}
.plan-direkt{background:#f8f3e4;border-color:#e3d8bd;border-top-color:var(--blue)}
.plan-dauer{background:var(--blue-lt);border-color:#a8cddd;border-top-color:var(--blue-dk)}
section .plan-dauer{background:var(--blue-lt)}
.plan-expert .plan-claim{color:var(--cta-dk)}
.plan-direkt .plan-claim{color:var(--blue-dk)}
.plan-dauer li{color:var(--blue-dk)}
.plan-dauer .plan-claim{color:var(--blue-dk)}
.plan-dauer .plan-rollen span{background:var(--surface2);border-color:#a8cddd}
.plan-dauer h3{line-height:1.2}
.plan-anfragemodul{background:#fffaf0;border-color:var(--sand);border-top-color:var(--badge)}
.plan-anfragemodul .price{color:var(--badge)}
/* Unterseite: Hero ohne die grosse Startseiten-Hoehe */
.hero-sub{padding-top:56px;padding-bottom:40px}
.hero-sub h1{font-size:clamp(30px,4.4vw,44px);max-width:860px}
.hero-sub .lead{max-width:760px}
.hero-sub .plan-rollen{margin:0 0 30px}

/* Anreisser auf der Startseite hebt sich vom Rest ab */
.anfragen-teaser{background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.anfragen-teaser .sec-sub{max-width:780px;margin-bottom:22px}

/* Rollenliste: alle Wirtschaftsakteure in der Reihenfolge der Datenbasis */
.rollenliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.rollenliste>div{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
section.alt .rollenliste>div{background:var(--bg)}
.rollenliste strong{font-family:var(--heading);font-size:16px;color:var(--ink)}
.rollenliste span{font-size:12px;color:#fff;background:var(--blue);border-radius:999px;
  padding:2px 9px;margin-left:8px;vertical-align:2px}
.rollenliste p{font-size:14px;color:var(--muted);margin-top:6px}

/* Flussbild */
.flussbild{background:var(--surface2);border:1px solid var(--line);border-radius:16px;
  padding:22px 18px;overflow-x:auto}
section.alt .flussbild{background:var(--bg)}
.flussbild svg{width:100%;min-width:840px;height:auto;display:block}

/* Das Antwortpaket */
.paket{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:960px}
@media(max-width:760px){.paket{grid-template-columns:1fr}}
.pkt{display:flex;gap:16px;background:var(--surface2);border:1px solid var(--line);
  border-radius:14px;padding:18px 20px}
.pkt-hell{background:var(--blue-lt);border-color:#a8cddd}
.pkt-nr{font-family:var(--heading);font-weight:700;font-size:15px;color:#fff;
  background:var(--blue-dk);width:34px;height:34px;border-radius:8px;display:grid;
  place-items:center;flex:none}
.pkt-hell .pkt-nr{background:var(--cta)}
.pkt strong{font-family:var(--heading);font-size:15.5px;color:var(--ink)}
.pkt em{font-size:13px;color:var(--muted);font-style:normal}
.pkt p{font-size:14px;color:var(--muted);margin-top:5px}

.plan-fuss{font-size:12.5px;color:var(--blue-dk);opacity:.85;line-height:1.5;margin-top:-2px}
.rollen-gross{margin:-24px 0 34px}
.wahl{margin-top:26px;background:var(--surface2);border:1px solid var(--line);border-radius:12px;padding:16px 22px;font-size:15px;color:var(--muted);max-width:820px}
.wahl strong{color:var(--ink)}
section.alt .wahl{background:var(--bg)}
.rollen-gross span{font-size:13px;padding:5px 13px}

/* Karte: kostenloses Kit als zweite Tuer unter dem freien Check */
.plans-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

/* Zwei Zeilen, aber ein gemeinsames Spaltenraster: linke Spalte (Check,
   Direkt) und rechte Spalte (Expert Check, Begleitet) gleich breit
   uebereinander — Begleitet/Expert Check breiter, weil dort mehr Inhalt
   (und bei Begleitet zusaetzlich das Anfragemodul) Platz braucht. */
.plans-row{display:grid;gap:18px;align-items:stretch;margin-bottom:18px}
.plans-row-top,.plans-row-bottom{grid-template-columns:5fr 7fr}
@media(max-width:760px){.plans-row-top,.plans-row-bottom{grid-template-columns:1fr}}
.plans-row-quad{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.plans-row-quad{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.plans-row-quad{grid-template-columns:1fr}}
.plans-row .plan{padding:28px 26px;height:100%}
.plans-row .plan h3{font-size:19px}
.plans-row .plan .price{font-size:27px}
.plans-row .plan li{font-size:14px}
.plan-claim{font-size:14.5px;color:var(--blue-dk);font-weight:500;margin-top:-4px}
.plan-includes{font-size:13px;color:var(--muted);font-weight:600;margin-top:2px}

/* Erweiterung innerhalb der Karte (Kit in PPWR Check, Anfragemodul in
   DataFlow begleitet) — kein eigener Kasten, sondern Teil derselben Karte,
   durch eine Trennlinie abgesetzt und bewusst grosszuegig, damit sie nicht
   untergeht. */
.plan-extra-inline{margin-top:18px;padding-top:20px;border-top:2px solid var(--line);
  font-size:15px;color:var(--muted);line-height:1.65;display:flex;flex-direction:column;gap:10px}
.plan-extra-inline h4{font-family:var(--heading);font-size:19px;color:var(--ink)}
.plan-extra-inline .price-sm{font-family:var(--heading);font-size:21px;font-weight:700;color:var(--blue-dk)}
.plan-extra-inline .price-sm small{font-size:13px;color:var(--muted);font-weight:400}
.plan-extra-inline p{font-size:14.5px;color:var(--muted)}
.plan-extra-inline .btn{align-self:flex-start;margin-top:6px}
.plan-dauer .plan-extra-inline{border-top-color:#a8cddd}


/* DataFlow: Detailsektion */
.sub-title{font-family:var(--heading);font-size:22px;margin:52px 0 18px}
.freeline a{color:var(--cta-dk);font-weight:600;margin-left:6px}
.freeline{margin-top:22px;background:var(--bg);border:1px solid var(--sand);border-radius:12px;
  padding:16px 22px;font-size:15.5px;color:var(--ink);font-weight:500}
section.alt .freeline{background:var(--surface2)}
.cta-zeile{margin-top:34px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cta-zeile span{font-size:14.5px;color:var(--muted)}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.tier{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px}
section.alt .tier{background:var(--bg)}
.tier-price{font-family:var(--heading);font-weight:700;font-size:28px;color:var(--cta)}
.tier h4{font-family:var(--heading);font-size:17px;margin:6px 0 8px}
.tier p{font-size:14.5px;color:var(--muted)}
.tier-note{margin-top:18px;font-size:14.5px;color:var(--muted);max-width:760px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.cols2{grid-template-columns:1fr}}
.col{border-radius:16px;padding:26px 28px;border:1px solid var(--line);background:var(--bg)}
.col h4{font-family:var(--heading);font-size:17px;margin-bottom:14px}
.col p{font-size:14.5px;color:var(--muted)}
.col ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.col li{font-size:14.5px;color:var(--muted);padding-left:24px;position:relative}
.col-yes{border-color:#a8cddd}
.col-yes li::before{content:"\2713";position:absolute;left:0;color:var(--blue);font-weight:700}
.col-no{border-color:var(--sand)}
.col-no li::before{content:"\2014";position:absolute;left:0;color:var(--badge);font-weight:700}

/* Circulaya-Band vor dem Footer */
.partner{background:var(--surface);border-top:1px solid var(--line)}
.partner-in{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:center;margin-bottom:12px}
@media(max-width:760px){.partner-in{grid-template-columns:1fr}}
.partner .sec-title{font-size:clamp(23px,3vw,30px);margin-bottom:14px}
.partner .sub-title{margin-top:48px}
.partner .sec-sub{margin-bottom:28px}
.partner .plan{background:var(--surface2)}
.partner .tier-note{margin-top:20px}
.partner p{font-size:16px;color:var(--muted);max-width:620px}
.partner-list{list-style:none;display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.partner-list li{background:var(--surface2);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-size:13.5px;color:var(--blue-dk)}
.partner-cta{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.partner-link{font-size:14.5px;color:var(--blue);text-decoration:none}
.partner-link:hover{text-decoration:underline}

/* Deadline band */
.deadline{background:var(--ink);color:var(--surface2)}
.deadline .sec-title{color:var(--surface2)}
.deadline p{color:#cfdde6;max-width:640px;font-size:16.5px;margin-bottom:26px}
.deadline .date{font-family:var(--heading);font-weight:700;color:#ffd166;font-size:18px}

/* About */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:760px){.about-grid{grid-template-columns:1fr}}
.about p{font-size:15.5px;color:var(--muted);margin-bottom:14px}
.about strong{color:var(--ink)}

/* FAQ */
.faq{max-width:760px}
.faq details{background:var(--surface2);border:1px solid var(--line);border-radius:12px;
  padding:18px 22px;margin-bottom:12px}
.faq summary{font-family:var(--heading);font-weight:600;font-size:16px;cursor:pointer}
.faq details p{margin-top:12px;font-size:14.5px;color:var(--muted)}

/* Footer */
.footer{background:var(--surface2);border-top:1px solid var(--line);padding:44px 0 36px}
.footer-in{max-width:1080px;margin:0 auto;padding:0 clamp(22px,5vw,56px);display:flex;justify-content:space-between;
  gap:24px;flex-wrap:wrap;align-items:flex-start}
.footer .fcol{font-size:13.5px;color:var(--muted);line-height:1.8}
.footer a{color:var(--blue);text-decoration:none}
.footer a:hover{text-decoration:underline}

/* Inhaltsseiten (Impressum, Datenschutz) */
.page-content{max-width:760px;margin:0 auto;padding:64px clamp(22px,5vw,56px) 96px}
.page-content h1{font-size:34px;margin-bottom:28px}
.page-content h2{font-size:21px;margin:34px 0 12px}
.page-content p,.page-content li{font-size:15px;color:var(--ink);line-height:1.7;margin-bottom:10px}
.page-content ul{padding-left:22px}
.todo{background:#fff3cd;border:1px solid #e8d9a8;border-radius:8px;padding:10px 14px;
  font-size:13.5px;color:#7a5c00;margin:10px 0}

/* Blog: Übersicht (home.php) */
.blog-index{padding:64px 0 96px}
.blog-index-sub{max-width:640px;font-size:16px;color:var(--muted);margin:8px 0 40px}
.blog-index-empty{color:var(--muted);font-size:15px}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.blog-card{background:var(--surface2);border:1px solid var(--line);border-radius:14px;
  transition:border-color .15s,transform .15s}
.blog-card:hover{border-color:var(--cta);transform:translateY(-2px)}
.blog-card-link{display:block;padding:24px;text-decoration:none;color:inherit}
.blog-card-date{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.blog-card-title{font-size:19px;margin-bottom:10px}
.blog-card-excerpt{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.blog-card-more{font-family:var(--heading);font-weight:600;font-size:13.5px;color:var(--cta-dk)}
.blog-pagination{display:flex;justify-content:space-between;margin-top:48px;
  font-family:var(--heading);font-weight:600;font-size:14.5px}
.blog-pagination a{color:var(--cta-dk);text-decoration:none}

/* Blog: Einzelartikel (single.php) */
.blog-back{display:inline-block;font-family:var(--heading);font-weight:600;font-size:14px;
  color:var(--muted);text-decoration:none;margin-bottom:18px}
.blog-back:hover{color:var(--cta-dk)}
.blog-post-date{display:block;font-family:'IBM Plex Mono',monospace;font-size:12px;
  letter-spacing:1px;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.blog-post-cta{background:var(--surface2);border:1px solid var(--line);border-radius:14px;
  padding:28px;margin-top:48px;text-align:center}
.blog-post-cta p{margin-bottom:16px}