/* Kladde – Lehrerkalender. Marketing-Seite unter visionflow-portal.de/lehrerkalender/.
   Papier-Optik: beiger Grund, Pastellflächen, Washi-Tape-Etiketten, Klebezettel.
   Akzente aus dem App-Icon: Waldgrün, Gold, Terrakotta-Lesebändchen.
   Bewusst ohne externe Schriften oder Skripte (keine Drittanbieter-Anfragen). */
/* Schriften – lokal gehostet (SIL Open Font License), keine Anfragen an Dritte. */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500 700;font-display:swap;src:url(assets/fonts/CormorantGaramond-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(assets/fonts/CormorantGaramond-italic.woff) format("woff")}
@font-face{font-family:"Playwrite DE Grund";font-style:normal;font-weight:100 400;font-display:swap;src:url(assets/fonts/PlaywriteDEGrund.woff2) format("woff2")}
@font-face{font-family:"Fredericka the Great";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/FrederickatheGreat-normal.woff2) format("woff2")}
@font-face{font-family:"Schoolbell";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/Schoolbell-normal.woff2) format("woff2")}
:root{
  --paper:#f6f0e6;
  --cream:#fbf8f2;
  --sand:#ece3d3;
  --ink:#2e3b33;
  --muted:#6b6f66;
  --line:rgba(46,59,51,.12);
  --forest:#2f4a3e;
  --forest2:#3d5c4d;
  --gold:#c6a25a;
  --terra:#b8684a;
  --sage:#d5e3d0;  --sage-d:#557562;
  --blush:#f4d9d3; --blush-d:#b0604f;
  --lav:#e1dcf0;   --lav-d:#6e62a0;
  --butter:#f7ebbd;--butter-d:#9a7a26;
  --sky:#d6e6ef;   --sky-d:#4a7690;
  --serif:"Cormorant Garamond","New York",ui-serif,Georgia,serif;
  --script:"Playwrite DE Grund","Bradley Hand",cursive;
  --chalk:"Fredericka the Great","Chalkduster",fantasy;
  --chalkhand:"Schoolbell","Chalkboard SE",cursive;
  --slate:#2f3d36;--chalkwhite:#f3f1e8;--wood:#a8784a;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --radius:28px;
  --max:1220px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 1px 0 rgba(255,255,255,.7) inset,0 20px 50px -24px rgba(70,55,30,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;line-height:1.02;margin:0}
h2{font-size:clamp(40px,5.6vw,66px)}
h2 em,h1 em{font-family:var(--script);font-style:normal;font-weight:400;font-size:.8em;letter-spacing:0;line-height:1.3;color:var(--forest2)}
h3{font-size:25px;line-height:1.15}
p{margin:0}
.hand{font-family:var(--script);font-size:22px;line-height:1.4;color:var(--terra)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:8px}

.scroll-progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--gold),var(--terra));z-index:300}

/* ---------- Angebotsband ---------- */
.offer-band{position:relative;z-index:120;background:var(--forest);color:#f3ead8;text-align:center;font-size:14px;padding:9px 16px 10px;letter-spacing:.01em}
.offer-band b{color:#fff}
.offer-band a{color:var(--gold);font-weight:700;margin-left:6px;white-space:nowrap}


/* ---------- Navigation ---------- */
.nav{position:sticky;top:12px;z-index:100;margin:12px auto 0;width:min(calc(100% - 32px),1180px);padding:7px 7px 7px 10px;border:1px solid rgba(255,255,255,.8);border-radius:999px;background:rgba(251,248,242,.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 14px 40px -18px rgba(70,55,30,.4),0 0 0 1px var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--script);font-size:21px;line-height:1;white-space:nowrap;color:var(--forest)}
.brand img{width:36px;height:36px;border-radius:9px;box-shadow:0 4px 12px -4px rgba(47,74,62,.6)}
.nav-links{display:flex;gap:2px}
.nav-links a{font-size:14px;padding:9px 13px;border-radius:999px;color:var(--muted);white-space:nowrap;transition:background .2s,color .2s}
.nav-links a:hover,.nav-links a.active{background:var(--sand);color:var(--ink)}
.nav-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:10px 16px;border-radius:999px;white-space:nowrap;transition:transform .25s var(--ease),background .2s}
.nav-btn:hover{transform:translateY(-1px);background:var(--forest)}
.nav-btn .apple{width:14px;height:16px;fill:currentColor}
.nav-btn .short{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;padding:15px 24px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s,background .2s;cursor:pointer;border:0;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:rgba(255,255,255,.65);border:1px solid var(--line);color:var(--ink)}
.btn.dark{background:var(--ink);color:#fff;box-shadow:0 14px 30px -14px rgba(46,59,51,.7)}
.btn.dark:hover{background:var(--forest)}
.btn.light{background:var(--cream);color:var(--ink);border:1px solid var(--line)}
.btn.small{font-size:14px;padding:11px 16px}
.play-dot{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blush);color:var(--blush-d)}
.play-dot svg{width:12px;height:12px;fill:currentColor;margin-left:2px}
.store-badge{display:inline-flex;align-items:center;gap:11px;background:#111;color:#fff;border-radius:14px;padding:10px 20px 10px 16px;min-height:58px;box-shadow:0 16px 34px -16px rgba(0,0,0,.6);transition:transform .25s var(--ease)}
.store-badge:hover{transform:translateY(-2px)}
.store-badge svg{width:26px;height:30px;fill:#fff}
.store-badge span{display:flex;flex-direction:column;line-height:1.05}
.store-badge small{font-size:12px;opacity:.9}
.store-badge b{font-size:23px;font-weight:600;letter-spacing:-.01em}
.store-badge.soon{background:#3b3b3b}

/* ---------- Hero ---------- */
.hero{position:relative;padding:70px 24px 90px;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(50px);opacity:.75;z-index:0;animation:drift 18s ease-in-out infinite alternate}
.b1{width:520px;height:520px;background:var(--sage);top:-120px;right:-80px}
.b2{width:420px;height:420px;background:var(--blush);bottom:-160px;left:-120px;animation-delay:-6s}
.b3{width:300px;height:300px;background:var(--lav);top:40%;left:46%;animation-delay:-11s}
@keyframes drift{to{transform:translate(40px,30px) scale(1.08)}}
.hero-grid{position:relative;z-index:1;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(50px,7vw,92px);margin:22px 0 22px}
.lead{font-size:20px;color:var(--muted);max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:32px}
.hero-note{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:14px;color:var(--muted)}
.pulse{width:9px;height:9px;border-radius:50%;background:#6aa57d;box-shadow:0 0 0 0 rgba(106,165,125,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(106,165,125,0)}100%{box-shadow:0 0 0 0 rgba(106,165,125,0)}}

.tape{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 16px;transform:rotate(-1.5deg);background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px),var(--sage);color:var(--sage-d);clip-path:polygon(2% 0,98% 4%,100% 50%,97% 100%,1% 96%,0 50%)}

.hero-stage{position:relative;justify-self:center;width:min(100%,460px)}
.ipad{position:relative;background:#1c1c1e;border-radius:38px;padding:13px;box-shadow:0 0 0 1px #3a3a3c inset,0 0 0 2px #d9d4cb,0 50px 90px -40px rgba(60,45,20,.55),0 18px 40px -20px rgba(60,45,20,.4)}
.ipad video,.ipad img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:26px;background:var(--cream)}
.hero-ipad{transform:rotate(2deg);transition:transform .8s var(--ease)}
.hero-stage:hover .hero-ipad{transform:rotate(0deg) scale(1.01)}
.note{position:absolute;z-index:2;background:var(--butter);padding:16px 18px 14px;border-radius:4px 4px 16px 4px;box-shadow:0 18px 30px -16px rgba(70,55,30,.5);display:flex;flex-direction:column;min-width:150px;animation:bob 6s ease-in-out infinite}
.note small{font-size:12px;color:var(--butter-d);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.note b{font-family:var(--serif);font-size:32px;font-weight:600}
.note-tape{position:absolute;top:-10px;left:50%;width:70px;height:20px;transform:translateX(-50%) rotate(-4deg);background:rgba(213,227,208,.85)}
.note.n1{left:-70px;top:14%;transform:rotate(-5deg)}
.note.n2{right:-56px;bottom:18%;background:var(--blush);animation-delay:-3s}
.note.n2 small{color:var(--blush-d)}
.note.n2 .note-tape{background:rgba(225,220,240,.9)}
.note.n3{left:-40px;bottom:-46px;background:none;box-shadow:none;min-width:0;padding:0;font-size:22px;animation:none;transform:rotate(-5deg);flex-direction:row;align-items:center;gap:6px}
.note.n3 svg{width:54px;height:40px;fill:none;stroke:var(--terra);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes bob{50%{translate:0 -10px}}

/* ---------- Ticker ---------- */
.ticker{background:var(--slate);border-block:6px solid var(--wood);overflow:hidden;padding:16px 0;transform:rotate(-1deg);margin:0 -10px;position:relative;z-index:2}
.ticker-track{display:flex;width:max-content;animation:ticker 48s linear infinite}
.ticker span{font-family:var(--chalkhand);font-size:25px;padding:0 26px;white-space:nowrap;color:var(--chalkwhite);text-shadow:0 0 1px rgba(255,255,255,.6)}
.ticker span::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#f4d9d3;margin-left:52px;vertical-align:middle;opacity:.85}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- Abschnitte ---------- */
.section{padding:120px 24px;position:relative}
.wrap{max-width:var(--max);margin:0 auto}
.wrap.center{text-align:center;max-width:860px}
.paper-dots{background-color:var(--cream);background-image:radial-gradient(rgba(46,59,51,.13) 1.1px,transparent 1.2px);background-size:22px 22px}
.tint-sage{background:linear-gradient(180deg,#e7efe3,#dde9d8)}
.tint-lav{background:linear-gradient(180deg,#ebe7f5,#e3def0)}
.tint-blush{background:linear-gradient(180deg,#f8e6e1,#f4dcd5)}
.tint-sand{background:var(--sand)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.kicker .num{font-family:var(--script);font-size:19px;line-height:1;letter-spacing:0;text-transform:none;color:var(--terra)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;margin-bottom:60px}
.intro{font-size:19px;color:var(--muted)}
.center .intro{margin:24px auto 0;max-width:680px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split-copy .intro{margin-top:24px}
.checks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.checks li{position:relative;padding-left:34px}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--forest)}
.checks li::after{content:"";position:absolute;left:8px;top:8px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- Video-Player ---------- */
.player{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.player-stage{position:relative;justify-self:center;width:min(100%,470px)}
.player-stage::before{content:"";position:absolute;inset:8% -10% -6% -10%;background:radial-gradient(closest-side,var(--sage),transparent);z-index:-1}
.sound-hint{position:absolute;right:26px;bottom:26px;width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(251,248,242,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;color:var(--ink);box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.sound-hint .pic{width:20px;height:20px;stroke-width:2}
.chapters{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.chapters button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;padding:14px 18px;border-radius:20px;background:rgba(255,255,255,.55);border:1px solid var(--line);transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.chapters button:hover{background:#fff;transform:translateX(4px)}
.chapters button.on{background:#fff;box-shadow:var(--shadow);border-color:transparent}
.chapters button:focus-visible{outline:3px solid var(--gold)}
.c-ico{grid-row:span 2;width:46px;height:46px;border-radius:14px;display:grid;place-items:center}
.pic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c-sage{background:var(--sage);color:var(--sage-d)}.c-sky{background:var(--sky);color:var(--sky-d)}.c-lav{background:var(--lav);color:var(--lav-d)}.c-butter{background:var(--butter);color:var(--butter-d)}.c-blush{background:var(--blush);color:var(--blush-d)}
.c-txt{display:flex;flex-direction:column}
.c-txt b{font-size:17px}
.c-txt small{font-size:14px;color:var(--muted);line-height:1.45;display:none}
.chapters button.on small{display:block}
.bar{grid-column:2;height:3px;border-radius:3px;background:var(--line);overflow:hidden;display:none}
.chapters button.on .bar{display:block}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--terra))}

/* ---------- Karten ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:30px 28px;border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-5px) rotate(-.4deg)}
.card .ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:22px}
.card .ico .pic{width:28px;height:28px}
.card.c-sage .ico{background:var(--sage);color:var(--sage-d)}.card.c-sky .ico{background:var(--sky);color:var(--sky-d)}.card.c-lav .ico{background:var(--lav);color:var(--lav-d)}.card.c-butter .ico{background:var(--butter);color:var(--butter-d)}.card.c-blush .ico{background:var(--blush);color:var(--blush-d)}
.card.c-sage,.card.c-sky,.card.c-lav,.card.c-butter,.card.c-blush{color:var(--ink)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:16px}

/* ---------- Video-Duo ---------- */
.video-duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.ipad.small{border-radius:28px;padding:9px}
.ipad.small video{border-radius:20px}
.tilt-l{transform:rotate(-3deg) translateY(30px)}
.tilt-r{transform:rotate(3deg)}

/* ---------- Personalisierung ---------- */
.theme-board{background:#fff;border-radius:34px;padding:34px;box-shadow:var(--shadow);display:grid;gap:30px}
.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.swatches span{aspect-ratio:1;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--line) inset,0 8px 16px -10px rgba(0,0,0,.4);transition:transform .3s var(--ease)}
.swatches span:hover{transform:scale(1.12)}
.icons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.icons figure{margin:0;text-align:center;font-size:13px;color:var(--muted)}
.icons img{border-radius:22%;box-shadow:0 12px 24px -12px rgba(0,0,0,.45);margin-bottom:8px;transition:transform .35s var(--ease)}
.icons figure:hover img{transform:translateY(-6px) rotate(-3deg)}
.fonts{display:flex;flex-wrap:wrap;gap:10px}
.fonts span{padding:9px 16px;border-radius:999px;background:var(--paper);font-size:18px}
.fonts .f1{font-family:var(--script);font-size:17px}.fonts .f2{font-family:var(--serif);font-weight:600;font-size:21px}.fonts .f3{font-family:var(--sans);font-weight:600}.fonts .f4{font-family:var(--chalkhand);font-size:21px}

/* ---------- Tafel (Warum Kladde) ---------- */
.board{position:relative;max-width:var(--max);margin:0 auto;padding:64px 60px 78px;border-radius:18px;color:var(--chalkwhite);
  background:radial-gradient(ellipse at 18% 22%,rgba(255,255,255,.08),transparent 42%),radial-gradient(ellipse at 78% 68%,rgba(255,255,255,.06),transparent 46%),radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.18),transparent 60%),var(--slate);
  border:16px solid var(--wood);border-image:linear-gradient(135deg,#b88a5a,#8f6238 40%,#b4865a 60%,#7f5531) 1;box-shadow:0 40px 70px -40px rgba(40,30,15,.8),inset 0 0 60px rgba(0,0,0,.35)}
.board::after{content:"";position:absolute;left:8%;right:8%;bottom:-16px;height:14px;background:linear-gradient(#9a6c40,#6f4a28);border-radius:0 0 6px 6px;box-shadow:0 10px 18px -8px rgba(0,0,0,.5)}
.chalk-pieces{position:absolute;bottom:-12px;right:14%;display:flex;gap:10px;z-index:2}
.chalk-pieces i{display:block;width:46px;height:10px;border-radius:3px;background:#f6f3ea;box-shadow:inset -4px 0 0 rgba(0,0,0,.08)}
.chalk-pieces i:nth-child(2){width:30px;background:#f4d9d3}.chalk-pieces i:nth-child(3){width:38px;background:#d5e3d0}
.board .kicker{color:rgba(243,241,232,.7);font-family:var(--chalkhand);font-size:20px;letter-spacing:.04em;text-transform:none}
.board .kicker .num{color:#f4d9d3}
.board h2{font-family:var(--chalk);font-weight:400;letter-spacing:.01em;line-height:1.12;color:var(--chalkwhite);filter:url(#chalk)}
.board h2 em{font-family:var(--chalkhand);font-size:1em;line-height:1.12;color:#f4d9d3}
.board .intro{color:rgba(243,241,232,.78);font-family:var(--chalkhand);font-size:22px;line-height:1.45}
.board .section-head{margin-bottom:44px}
.board .compare{background:none;box-shadow:none;border-radius:0;font-family:var(--chalkhand);font-size:21px}
.board .compare .row{border-top:2px dashed rgba(243,241,232,.22);padding:14px 6px}
.board .compare .row.head{background:none;font-family:var(--chalk);font-size:19px;letter-spacing:.06em;color:rgba(243,241,232,.65);text-transform:none}
.board .compare .row span:first-child{font-weight:400;color:var(--chalkwhite)}
.board .compare .row span:nth-child(2){color:rgba(243,241,232,.55);text-decoration-color:rgba(244,217,211,.8);text-decoration-thickness:2px}
.board .compare .k{color:#d9ead3;font-weight:400}
.board .compare .row:not(.head) .k::before{content:"✓ ";color:#bfe0b3;font-weight:400}
.board .compare .row.head .k{color:#f4d9d3}

/* ---------- Vergleich ---------- */
.compare{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.compare .row{display:grid;grid-template-columns:1fr 1.2fr 1.2fr;gap:16px;padding:18px 28px;border-top:1px solid var(--line);align-items:center}
.compare .row span:first-child{font-weight:700}
.compare .row span:nth-child(2){color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(176,96,79,.5)}
.compare .row.head{border-top:0;background:var(--paper);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.compare .row.head span:nth-child(2){text-decoration:none}
.compare .k{color:var(--forest);font-weight:600}
.compare .row:not(.head) .k::before{content:"✓ ";color:#6aa57d;font-weight:800}

/* ---------- Datenschutz ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:50px}
.stat{background:rgba(255,255,255,.7);border-radius:24px;padding:26px 14px}
.stat b{display:block;font-family:var(--serif);font-weight:600;font-size:54px;line-height:1.1;color:var(--lav-d)}
.stat span{font-size:14px;color:var(--muted)}

/* ---------- Preise ---------- */
.prices{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:22px;align-items:stretch}
.price{position:relative;border-radius:32px;padding:36px 30px;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}
.price.c-sage{background:linear-gradient(180deg,#eef4eb,#fff 60%)}
.price.c-blush{background:linear-gradient(180deg,#fbeeea,#fff 60%)}
.price .badge{align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--paper);color:var(--muted)}
.price .amount{font-family:var(--serif);font-size:62px;font-weight:600;line-height:1}
.price .amount small{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted)}
.price p{color:var(--muted);font-size:16px;flex:1}
.price.highlight{background:var(--forest);color:#f6efe2;transform:translateY(-14px);box-shadow:0 40px 70px -30px rgba(47,74,62,.8)}
.price.highlight .badge{background:rgba(255,255,255,.12);color:var(--gold)}
.price.highlight p{color:rgba(246,239,226,.8)}
.price.highlight .amount small{color:rgba(246,239,226,.7)}
.price.highlight .btn{background:var(--gold);color:#2b2414;box-shadow:none}
.price.highlight .btn:hover{background:#d8b56c}
.ribbon{position:absolute;top:22px;right:-8px;background:var(--terra);color:#fff;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:7px 14px 7px 16px;border-radius:6px 0 0 6px;box-shadow:0 8px 16px -8px rgba(0,0,0,.5)}
.ribbon::after{content:"";position:absolute;right:0;bottom:-8px;border-left:8px solid #7f4430;border-bottom:8px solid transparent}
.price-foot{margin-top:34px;text-align:center;font-size:14px;color:var(--muted)}

/* ---------- Teilen ---------- */
.share-wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center}
.share-wrap .intro{margin-top:22px}
.share-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:34px}
.share{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);font-weight:700;font-size:15px;transition:transform .25s var(--ease),background .2s,box-shadow .25s}
.share:hover{transform:translateY(-3px);background:#fff;box-shadow:0 14px 26px -16px rgba(70,40,30,.5)}
.share:focus-visible{outline:3px solid var(--gold)}
.share svg{width:30px;height:30px;padding:6px;border-radius:10px;fill:#fff;flex:none}
.whatsapp svg{background:#25d366}.facebook svg{background:#1877f2}.x svg{background:#111}.instagram svg{background:radial-gradient(circle at 30% 110%,#fdc468,#e1306c 55%,#833ab4)}.telegram svg{background:#29a9eb}.signal svg{background:#3a76f0}.linkedin svg{background:#0a66c2}.pinterest svg{background:#e60023}.mail svg{background:var(--terra)}.copy svg{background:var(--forest)}.native svg{background:var(--lav-d)}
.share-text{margin-top:22px;font-size:14px;color:var(--muted)}
.share-text q{font-style:italic}
.qr-card{position:relative;background:var(--cream);border-radius:30px;padding:34px 30px 30px;text-align:center;box-shadow:0 30px 60px -30px rgba(90,50,40,.5);transform:rotate(1.5deg)}
.qr-tape{position:absolute;top:-14px;left:50%;width:120px;height:28px;transform:translateX(-50%) rotate(-3deg);background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--sage);opacity:.95}
.qr-frame{background:#fff;border-radius:22px;padding:14px;box-shadow:0 0 0 1px var(--line)}
.qr-frame img{width:100%;height:auto;border-radius:10px}
.qr-label{margin-top:16px;font-size:24px}
.qr-card p{font-size:14px;color:var(--muted);margin-top:6px}
.qr-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-list{display:grid;gap:12px}
details{background:#fff;border-radius:22px;box-shadow:var(--shadow);padding:0 24px}
summary{cursor:pointer;list-style:none;padding:20px 30px 20px 0;font-weight:700;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;font-weight:400;color:var(--terra);transition:transform .3s var(--ease)}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 0 22px;color:var(--muted)}
details a{color:var(--forest);text-decoration:underline}

/* ---------- Weitere Apps ---------- */
.app-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.app-card{display:flex;gap:20px;align-items:center;padding:22px;border-radius:26px;background:rgba(255,255,255,.7);transition:transform .3s var(--ease),background .2s}
.app-card:hover{transform:translateY(-4px);background:#fff}
.app-card img{width:76px;height:76px;border-radius:18px;flex:none;box-shadow:0 10px 20px -10px rgba(0,0,0,.45)}
.app-card p{font-size:15px;color:var(--muted);margin:4px 0 8px}
.app-card h3{font-size:19px}
.app-card .more{font-size:14px;font-weight:700;color:var(--forest)}

/* ---------- Schluss ---------- */
.final{padding:130px 24px;text-align:center;background:radial-gradient(ellipse at 50% 0%,var(--sage),transparent 60%),radial-gradient(ellipse at 10% 100%,var(--blush),transparent 50%),radial-gradient(ellipse at 90% 100%,var(--lav),transparent 50%),var(--paper)}
.final-icon{width:130px;height:130px;margin:0 auto 30px;border-radius:30px;box-shadow:0 30px 50px -24px rgba(47,74,62,.8);animation:bob 6s ease-in-out infinite}
.final h2{font-size:clamp(40px,6vw,72px)}
.final p{margin-top:18px;color:var(--muted);font-size:18px}
.final-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center;margin-top:34px}

/* ---------- Footer ---------- */
.footer{background:var(--forest);color:rgba(246,239,226,.8);padding:46px 24px 34px}
.footer-inner{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.footer .brand{color:#fff}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:14px}
.footer nav a:hover{color:#fff;text-decoration:underline}
.credit{max-width:var(--max);margin:26px auto 0;font-size:12px;opacity:.7}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:400;background:var(--ink);color:#fff;padding:14px 20px;border-radius:16px;font-size:15px;max-width:min(92vw,460px);text-align:center;box-shadow:0 20px 40px -16px rgba(0,0,0,.5);transition:opacity .3s,transform .4s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.tilt-l.reveal.visible{transform:rotate(-3deg) translateY(30px)}
.tilt-r.reveal.visible{transform:rotate(3deg)}
.qr-card.reveal.visible{transform:rotate(1.5deg)}

/* ---------- Responsiv ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .hero{padding:48px 16px 80px}
  .hero-grid,.split,.player,.share-wrap,.faq-wrap,.section-head{grid-template-columns:1fr;gap:40px}
  .hero-stage{width:min(82%,400px)}
  .note.n1{left:-34px}.note.n2{right:-30px}
  .section{padding:84px 16px}
  .split.rev>:first-child{order:2}
  .prices{grid-template-columns:1fr}
  .price.highlight{transform:none}
  .app-cards{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .compare .row{grid-template-columns:1fr 1fr;padding:16px 18px}
  .compare .row span:first-child{grid-column:1/-1}
  .board{padding:40px 22px 56px;border-width:10px}
  .board .intro{font-size:20px}
  .board .compare{font-size:19px}
  .qr-card{max-width:380px;margin:0 auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .offer-band{font-size:13px}
  .nav{width:calc(100% - 20px);top:8px}
  .nav-btn .full{display:none}.nav-btn .short{display:inline}
  .lead{font-size:18px}
  .cards{grid-template-columns:1fr}
  .note{min-width:120px;padding:12px 14px 10px}
  .note b{font-size:22px}
  .note.n1{left:-22px}.note.n2{right:-18px}
  .note.n3{left:0;font-size:22px}
  .theme-board{padding:22px}
  .swatches{gap:10px}
  .icons{gap:10px}
  .chapters button{padding:12px 14px}
  .c-ico{width:40px;height:40px;font-size:18px}
  .player-stage{width:min(88%,400px)}
  .video-duo{gap:12px}
  #warum{padding-inline:10px}
  .board h2{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
.fonts .f5{border:1.5px dashed var(--line);background:none;color:var(--muted);font-size:15px}

/* ---------- Neu: Zettel → Text ---------- */
.tint-butter{background:linear-gradient(180deg,#faf3d9,#f6ecc9)}
.tag-neu{display:inline-block;background:var(--terra);color:#fff;font-size:12px;letter-spacing:.1em;padding:4px 10px;border-radius:999px;transform:rotate(-3deg)}
.zt-stage{position:relative;display:grid;grid-template-columns:1fr auto 1.1fr;gap:28px;align-items:center;max-width:1000px;margin:0 auto 60px}
.zt-slip{position:relative;background:#fffdf6;padding:46px 34px 34px;transform:rotate(-4deg);box-shadow:0 24px 40px -22px rgba(80,60,20,.55);background-image:repeating-linear-gradient(transparent 0 37px,rgba(74,118,144,.22) 37px 38px);overflow:hidden;border-radius:3px}
.zt-tape{position:absolute;top:-6px;left:50%;width:110px;height:26px;transform:translateX(-50%) rotate(3deg);background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--blush)}
.zt-hand{font-family:var(--chalkhand);font-size:27px;line-height:38px;margin:0;color:#2d3f70;transform:rotate(-.6deg)}
.zt-hand:nth-child(3){margin-left:14px;transform:rotate(.8deg)}
.zt-beam{position:absolute;left:0;right:0;top:-30%;height:28%;background:linear-gradient(180deg,transparent,rgba(106,165,125,.35) 60%,rgba(106,165,125,.85) 62%,transparent 64%);animation:zt-scan 7s ease-in-out infinite}
.zt-arrow{width:110px;fill:none;stroke:var(--terra);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:180;stroke-dashoffset:180;animation:zt-draw 7s ease-in-out infinite}
.zt-page{position:relative;background:#fff;border-radius:22px;padding:22px 26px 28px;box-shadow:var(--shadow);min-height:230px}
.zt-page-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.zt-type{font-family:var(--script);font-size:22px;line-height:1.7;margin:0;color:var(--forest);opacity:0;transform:translateY(8px);animation:zt-in 7s ease-in-out infinite}
.zt-type:nth-of-type(2){animation-delay:.25s}.zt-type:nth-of-type(3){animation-delay:.5s}
.zt-handle{position:absolute;right:18px;bottom:16px;width:16px;height:16px;border-radius:50%;border:2px solid var(--gold);background:#fff;opacity:0;animation:zt-in 7s ease-in-out infinite;animation-delay:.8s}
@keyframes zt-scan{0%,8%{top:-30%}38%{top:105%}100%{top:105%}}
@keyframes zt-draw{0%,30%{stroke-dashoffset:180}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
@keyframes zt-in{0%,42%{opacity:0;transform:translateY(8px)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
.neu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.neu-card{background:#fff;border-radius:var(--radius);padding:24px 26px 28px;box-shadow:var(--shadow)}
.neu-card h3{margin:18px 0 8px}.neu-card p{color:var(--muted);font-size:16px}
.neu-demo{position:relative;height:130px;border-radius:18px;background:var(--paper);overflow:hidden;background-image:repeating-linear-gradient(transparent 0 25px,rgba(46,59,51,.08) 25px 26px)}
.demo-media span{position:absolute;box-shadow:0 10px 18px -10px rgba(0,0,0,.45);animation:drop 6s ease-in-out infinite}
.m-photo{left:22px;top:22px;width:84px;height:70px;background:linear-gradient(160deg,#9cb7a0,#4f6e5c);border:6px solid #fff;border-bottom-width:16px;transform:rotate(-6deg)}
.m-doc{left:118px;top:16px;width:70px;height:92px;background:#fff repeating-linear-gradient(transparent 0 9px,rgba(46,59,51,.18) 9px 10px);background-clip:content-box;padding:10px 8px;transform:rotate(3deg);animation-delay:.4s!important}
.m-file{right:22px;top:30px;width:58px;height:72px;background:var(--blush);color:var(--blush-d);font-weight:800;font-size:13px;display:grid;place-items:center;border-radius:6px;animation-delay:.8s!important}
@keyframes drop{0%{opacity:0;translate:0 -40px}12%,80%{opacity:1;translate:0 0}100%{opacity:0}}
.demo-gesture{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 26px}
.g-word{font-family:var(--script);font-size:22px;color:var(--forest);position:relative;width:max-content}
.g-del{animation:g-fade 6s ease-in-out infinite}
.g-x{position:absolute;left:22px;top:24px;width:120px;height:40px;fill:none;stroke:#b0604f;stroke-width:3;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:g-x 6s ease-in-out infinite}
.g-line{position:absolute;left:22px;top:100px;width:170px;height:12px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:170;stroke-dashoffset:170;animation:g-u 6s ease-in-out infinite}
@keyframes g-x{0%,10%{stroke-dashoffset:240;opacity:1}35%,45%{stroke-dashoffset:0;opacity:1}55%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes g-fade{0%,42%{opacity:1}55%,85%{opacity:.08}100%{opacity:1}}
@keyframes g-u{0%,55%{stroke-dashoffset:170}75%,95%{stroke-dashoffset:0}100%{stroke-dashoffset:170}}
.demo-plan{padding:16px}
.p-chip{position:absolute;top:16px;padding:6px 12px;border-radius:10px;font-size:13px;font-weight:700;animation:chip 6s ease-in-out infinite}
.p-chip.c1{left:16px;background:var(--sky);color:var(--sky-d)}
.p-chip.c2{left:104px;background:var(--lav);color:var(--lav-d);animation-delay:.3s}
.p-chip.c3{left:182px;background:var(--sage);color:var(--sage-d);animation-delay:.6s}
.p-slot{position:absolute;left:16px;right:16px;bottom:16px;padding:10px 14px;border-radius:12px;border:2px dashed var(--terra);color:var(--terra);font-weight:700;font-size:14px;background:#fff}
@keyframes chip{0%,10%{translate:0 0}40%,70%{translate:0 46px}100%{translate:0 0}}
@media (max-width:900px){
  .zt-stage{grid-template-columns:1fr;gap:12px;max-width:440px}
  .zt-arrow{justify-self:center;transform:rotate(90deg);width:80px}
  .neu-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .zt-type,.zt-handle{opacity:1;transform:none}
  .zt-arrow{stroke-dashoffset:0}
  .zt-beam,.g-x,.g-line{display:none}
}

/* ---------- Neu: weitere Funktionen (Demos) ---------- */
.neu-sub{text-align:center;margin:64px 0 28px;line-height:1}
.neu-sub .hand{font-size:30px}
.neu-card p{line-height:1.55}
/* Termin einmal: Tag / Woche / Monat */
.demo-term{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.t-col{background:#fff;border-radius:12px;padding:8px 10px;box-shadow:0 0 0 1px var(--line) inset;display:flex;flex-direction:column;gap:8px}
.t-col small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.t-ev{display:block;padding:9px 8px;border-radius:8px;background:var(--sage);color:var(--sage-d);font-weight:700;font-size:13px;text-align:center;animation:t-pop 6s ease-in-out infinite}
.t-col:nth-child(2) .t-ev{background:var(--sky);color:var(--sky-d);animation-delay:.35s}
.t-col:nth-child(3) .t-ev{background:var(--blush);color:var(--blush-d);animation-delay:.7s}
@keyframes t-pop{0%,8%{opacity:0;transform:scale(.6)}18%,82%{opacity:1;transform:none}100%{opacity:0}}
/* Schlank-Modus: Schalter */
.demo-lean{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 22px}
.l-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:10px;padding:5px 10px;font-size:13px;font-weight:600;box-shadow:0 0 0 1px var(--line) inset}
.l-sw{position:relative;width:34px;height:20px;border-radius:999px;background:var(--forest);animation:l-bg 6s ease-in-out infinite}
.l-sw::after{content:"";position:absolute;top:2px;left:16px;width:16px;height:16px;border-radius:50%;background:#fff;animation:l-kn 6s ease-in-out infinite}
.l-row:nth-child(2) .l-sw,.l-row:nth-child(2) .l-sw::after{animation-delay:.3s}
.l-row:nth-child(3) .l-sw,.l-row:nth-child(3) .l-sw::after{animation-delay:.6s}
@keyframes l-bg{0%,15%{background:var(--forest)}30%,85%{background:#cfc8b8}100%{background:var(--forest)}}
@keyframes l-kn{0%,15%{left:16px}30%,85%{left:2px}100%{left:16px}}
/* Gespräche */
.demo-talk{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 20px}
.k-search{display:block;background:#fff;border-radius:999px;padding:4px 14px;font-size:13px;color:var(--muted);box-shadow:0 0 0 1px var(--line) inset}
.k-row{display:flex;align-items:center;gap:10px;background:#fff;border-radius:10px;padding:6px 10px;font-size:13px;animation:k-in 6s ease-in-out infinite}
.k-row:nth-of-type(3){animation-delay:.4s}
.k-row b{background:var(--lav);color:var(--lav-d);padding:2px 9px;border-radius:999px;font-size:12px}
.k-row:nth-of-type(3) b{background:var(--butter);color:var(--butter-d)}
.k-row em{font-style:normal;color:var(--muted)}
@keyframes k-in{0%,8%{opacity:0;transform:translateX(-16px)}20%,85%{opacity:1;transform:none}100%{opacity:0}}
/* Schuljahreswechsel */
.demo-year{display:flex;align-items:center;justify-content:center;gap:18px}
.y-from,.y-to{font-family:var(--script);font-size:34px;line-height:1;padding:10px 18px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line) inset;color:var(--forest)}
.y-to{background:var(--sage);animation:y-in 6s ease-in-out infinite}
.y-arrow{width:64px;height:22px;fill:none;stroke:var(--terra);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:110;stroke-dashoffset:110;animation:y-draw 6s ease-in-out infinite}
@keyframes y-draw{0%,10%{stroke-dashoffset:110}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:110}}
@keyframes y-in{0%,35%{opacity:0;transform:scale(.7)}48%,85%{opacity:1;transform:none}100%{opacity:0}}
/* PDF */
.demo-pdf{display:flex;align-items:center;justify-content:center;gap:34px}
.pdf-sheet{display:block;width:78px;height:96px;background:#fff;border-radius:6px;padding:14px 8px;box-shadow:0 10px 18px -10px rgba(0,0,0,.45);transform:rotate(-4deg)}
.pdf-sheet svg{width:100%;fill:none;stroke:#2d3f70;stroke-width:1.8;stroke-linecap:round}
.pdf-file{width:58px;height:72px;background:var(--blush);color:var(--blush-d);font-weight:800;font-size:13px;display:grid;place-items:center;border-radius:6px;box-shadow:0 10px 18px -10px rgba(0,0,0,.45);animation:drop 6s ease-in-out infinite}
/* Sync */
.demo-sync svg{width:100%;height:100%}
.s-dev{fill:#fff;stroke:var(--forest);stroke-width:2.5}
.s-cloud{fill:var(--sky);stroke:var(--sky-d);stroke-width:2;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;transform:scale(1.5);animation:s-bob 4s ease-in-out infinite}
.s-line{fill:none;stroke:var(--terra);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:4 7;animation:s-flow 1.6s linear infinite}
@keyframes s-flow{to{stroke-dashoffset:-22}}
@keyframes s-bob{50%{translate:0 -4px}}

/* ---------- Und unterwegs? (iPhone) ---------- */
.tint-sky{background:linear-gradient(180deg,#e4eef4,#d9e8f0)}
#iphone{overflow:hidden}
#iphone .section-head{align-items:center}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.linkbtn{all:unset;box-sizing:border-box;cursor:pointer;color:var(--forest);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.linkbtn:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.tape-blush{background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 6px,transparent 6px 12px),var(--blush);color:var(--blush-d)}
.role-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.role{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;background:rgba(255,255,255,.7);border-radius:20px;padding:14px 16px}
.role .c-ico{grid-row:span 2}
.role b{font-family:var(--serif);font-size:24px;line-height:1.1}
.role small{font-size:14px;color:var(--muted);line-height:1.3}
#iphone .section-head{margin-bottom:46px}

/* Hero-Hinweis */
.hero-phone{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:9px 16px 9px 12px;border-radius:999px;background:var(--sky);color:var(--sky-d);font-weight:700;font-size:14px;line-height:1.3;box-shadow:0 8px 20px -12px rgba(40,70,90,.6);transition:transform .25s var(--ease),background .2s}
.hero-phone:hover{transform:translateY(-2px);background:#c9deea}
.hero-phone .pic{width:22px;height:22px;flex:none;animation:ph-wiggle 5s ease-in-out infinite;transform-origin:50% 80%}
.hero-phone span[aria-hidden]{transition:transform .25s var(--ease)}
.hero-phone:hover span[aria-hidden]{transform:translateX(4px)}
@keyframes ph-wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-12deg)}94%{transform:rotate(10deg)}98%{transform:rotate(-5deg)}}

/* Demo: Auswahl + Telefon */
.ph-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:start}
.ph-side{display:grid;gap:22px;align-content:start}
.ph-pick{display:grid;gap:22px}
.ph-q{font-size:clamp(32px,4vw,44px)}
.ph-chips{display:flex;flex-wrap:wrap;gap:10px}
.ph-chip{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px 9px 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);font-weight:700;font-size:15px;line-height:1.2;color:var(--ink);transition:transform .25s var(--ease),background .25s,color .25s,box-shadow .25s}
.ph-chip .pic{width:20px;height:20px;color:var(--sky-d);flex:none;transition:color .25s,transform .3s var(--ease)}
.ph-chip:hover{background:#fff;transform:translateY(-2px)}
.ph-chip[aria-pressed="true"]{background:var(--forest);color:#fff;border-color:transparent;box-shadow:0 12px 24px -14px rgba(47,74,62,.9)}
.ph-chip[aria-pressed="true"] .pic{color:var(--gold);transform:scale(1.12) rotate(-6deg)}
.ph-chip:focus-visible,.ph-tourbtn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.ph-benefit{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:24px;padding:20px 22px;box-shadow:var(--shadow);min-height:118px}
.ph-benefit .c-ico{flex:none}
.ph-benefit-txt b{display:block;font-family:var(--script);font-weight:400;font-size:20px;line-height:1.4;color:var(--forest)}
.ph-benefit-txt p{color:var(--muted);font-size:16px;margin-top:4px}
.ph-benefit.swap .c-ico{animation:ph-pop .5s var(--ease)}
.ph-benefit.swap .ph-benefit-txt{animation:ph-slide .55s var(--ease)}
@keyframes ph-slide{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ph-pop{0%{transform:scale(.6) rotate(-12deg)}60%{transform:scale(1.12)}100%{transform:none}}
.ph-tour{display:flex;align-items:center;gap:14px}
.ph-tourbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 18px 9px 14px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;transition:background .2s,transform .25s var(--ease)}
.ph-tourbtn:hover{background:var(--forest);transform:translateY(-1px)}
.ph-tourbtn .pic{width:18px;height:18px}
.ph-tourbar{flex:1;height:4px;border-radius:4px;background:rgba(46,59,51,.14);overflow:hidden}
.ph-tourbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--terra))}
.ph-fineprint{font-size:13px;color:var(--muted);line-height:1.5}
.ph-demo.no-motion .ph-tour,.ph-demo.no-motion .ph-tourbar{display:none}

/* Telefon */
.ph-stage-col{justify-self:center;width:100%;display:flex;justify-content:center;position:sticky;top:96px}
.phone-stage{position:relative;width:min(100%,318px);padding:20px 0;transform:translateY(calc(var(--py,0)*1px))}
.ph-floor{position:absolute;left:12%;right:12%;bottom:-6px;height:26px;border-radius:50%;background:radial-gradient(closest-side,rgba(40,60,80,.34),transparent);animation:ph-shadow 7s ease-in-out infinite}
@keyframes ph-shadow{50%{transform:scale(.86);opacity:.7}}
.phone{position:relative;background:#1c1c1e;border-radius:46px;padding:10px;box-shadow:0 0 0 1px #3a3a3c inset,0 0 0 2px #d9d4cb,0 50px 90px -40px rgba(40,60,80,.55),0 18px 40px -20px rgba(40,60,80,.4);rotate:-1.5deg;animation:ph-float 7s ease-in-out infinite;transition:rotate .8s var(--ease)}
.ph-stage-col:hover .phone{rotate:0deg}
@keyframes ph-float{50%{translate:0 -9px}}
.ph-screen{position:relative;aspect-ratio:9/18.6;border-radius:36px;background:var(--cream);overflow:hidden;isolation:isolate}
.ph-island{position:absolute;top:10px;left:50%;width:82px;height:23px;border-radius:999px;background:#111;transform:translateX(-50%);z-index:8}
.ph-status{position:absolute;top:0;left:0;right:0;height:44px;z-index:7;display:flex;justify-content:space-between;align-items:center;padding:6px 24px 0 26px;font-size:13px;font-weight:700;background:linear-gradient(var(--cream) 60%,rgba(251,248,242,0))}
.ph-sys{display:flex;align-items:center;gap:6px}
.ph-sig{display:inline-flex;align-items:flex-end;gap:1.5px;height:10px}
.ph-sig i{display:block;width:3px;background:var(--ink);border-radius:1px}
.ph-sig i:nth-child(1){height:3px}.ph-sig i:nth-child(2){height:5px}.ph-sig i:nth-child(3){height:7px}.ph-sig i:nth-child(4){height:10px}
.ph-batt{width:20px;height:10px;border:1.5px solid var(--ink);border-radius:3px;position:relative}
.ph-batt::before{content:"";position:absolute;inset:1px 4px 1px 1px;background:var(--ink);border-radius:1px}
.ph-plane{display:none;width:13px;height:13px;stroke-width:2}
.ph-screen.offline .ph-plane{display:block;animation:ph-pop .5s var(--ease)}
.ph-screen.offline .ph-sig{opacity:.25}
.ph-notif{position:absolute;left:10px;right:10px;top:10px;z-index:9;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 14px 30px -12px rgba(30,40,50,.55),0 0 0 1px var(--line);transform:translateY(-130%);opacity:0;transition:transform .5s var(--ease),opacity .3s}
.ph-notif.show{transform:none;opacity:1}
.ph-notif-ico{flex:none;width:34px;height:34px;border-radius:10px;background:var(--forest);color:#fff;display:grid;place-items:center}
.ph-notif .pic{width:19px;height:19px}
.ph-notif.show .ph-notif-ico .pic{animation:ph-ring .8s .35s ease-in-out}
.ph-notif small{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.ph-notif b{font-size:13.5px;line-height:1.25}
@keyframes ph-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(18deg)}40%{transform:rotate(-16deg)}60%{transform:rotate(10deg)}80%{transform:rotate(-6deg)}}

.ph-panels{position:absolute;inset:0}
.ph-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateX(34px);transition:opacity .35s ease,transform .5s var(--ease),visibility 0s .5s}
.ph-panel[hidden]{display:block}
.ph-panel.before{transform:translateX(-34px)}
.ph-panel.is-active{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.ph-panel:focus-visible{outline:3px solid var(--gold);outline-offset:-4px;border-radius:30px}
.ph-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:48px 14px 92px;display:flex;flex-direction:column;gap:11px;scroll-behavior:smooth}
.ph-scroll::-webkit-scrollbar{display:none}
.ph-scroll>*,.ph-detail>*{flex:none}
.ph-panel.enter .ph-scroll>*{animation:ph-slide .55s var(--ease) both;animation-delay:calc(var(--i,0)*55ms)}
.ph-date{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--forest2)}
.ph-hello{font-family:var(--script);font-size:25px;line-height:1.25;color:var(--ink);margin-top:-6px}
.ph-title{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1}
.ph-sub{font-size:12.5px;color:var(--muted);margin:-4px 0 2px;line-height:1.4}
.ph-quick{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:9px 11px;box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .25s}
.ph-quick:focus-within,.ph-quick.typing{box-shadow:0 0 0 2px var(--forest2) inset}
.ph-quick .pic{width:22px;height:22px;color:var(--forest2);flex:none}
.ph-quick input{all:unset;box-sizing:border-box;flex:1;min-width:0;font-size:13px;font-family:inherit;color:var(--ink)}
.ph-quick input::placeholder{color:#8a8d85}
.ph-save{all:unset;cursor:pointer;display:none;font-size:13px;font-weight:700;color:var(--forest);padding:4px 4px}
.ph-quick.has-text .ph-save{display:block}
.ph-save:focus-visible{outline:3px solid var(--gold);border-radius:6px}
.ph-now{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 14px 16px;border-radius:20px;color:#fff;background:linear-gradient(135deg,var(--forest2),var(--forest));box-shadow:0 14px 26px -16px rgba(47,74,62,.9);position:relative;overflow:hidden}
.ph-now::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-120%);animation:ph-shine 6s ease-in-out infinite}
@keyframes ph-shine{0%,60%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.ph-now.hl{animation:ph-glow 1.6s var(--ease) 2}
@keyframes ph-glow{50%{box-shadow:0 0 0 6px rgba(198,162,90,.55),0 14px 26px -16px rgba(47,74,62,.9)}}
.ph-now-txt{display:flex;flex-direction:column;min-width:0}
.ph-now small{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;opacity:.8}
.ph-now b{font-family:var(--serif);font-size:25px;line-height:1.1}
.ph-now-txt span{font-size:11.5px;opacity:.88}
.ph-count{position:relative;flex:none;width:58px;height:58px;display:grid;place-items:center;align-content:center;text-align:center}
.ph-count svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ph-count circle{fill:none;stroke-width:4}
.ph-count .trk{stroke:rgba(255,255,255,.22)}
.ph-count .arc{stroke:var(--gold);stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:40;transition:stroke-dashoffset 1s linear}
.ph-count b{font-family:var(--sans);font-size:19px;line-height:1;font-weight:800}
.ph-count small{font-size:9px;letter-spacing:.02em;text-transform:none;font-weight:700}
.ph-sec{background:#fff;border-radius:18px;padding:12px 13px;box-shadow:0 0 0 1px var(--line) inset;display:flex;flex-direction:column;gap:7px}
.ph-sec.flat{padding:4px 12px}
.ph-sec h4{display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--forest2)}
.ph-sec h4 .pic{width:15px;height:15px}
.ph-count-badge{font-style:normal;margin-left:auto;background:var(--sage);color:var(--sage-d);padding:2px 9px;border-radius:999px;letter-spacing:0;text-transform:none;font-size:11px}
.ph-count-badge.bump{animation:ph-pop .45s var(--ease)}
.ph-les{display:flex;align-items:center;gap:10px;font-size:13px;transition:opacity .3s}
.ph-les.past{opacity:.45}
.ph-les .n{flex:none;width:36px;display:flex;flex-direction:column;font-weight:800;font-size:13px;line-height:1.1}
.ph-les .n small{font-size:10px;font-weight:500;color:var(--muted)}
.ph-les i{flex:none;width:4px;height:30px;border-radius:3px;background:var(--c)}
.ph-les b{display:block;font-size:13.5px;line-height:1.2}
.ph-les div small{font-size:11.5px;color:var(--muted)}
.ph-les.next{background:var(--butter);margin:0 -7px;padding:5px 7px;border-radius:12px}
.ph-row{display:flex;align-items:center;gap:9px;font-size:13px;line-height:1.3}
.ph-row>span{flex:1;min-width:0}
.ph-row>small{font-size:11.5px;color:var(--muted);flex:none}
.ph-row .dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.ph-row .pn{flex:none;width:18px;font-size:11.5px;color:var(--muted)}
.ph-row .pic{width:18px;height:18px;flex:none;color:var(--forest2)}
.ph-row.duty{color:var(--terra);font-size:12px}.ph-row.duty .pic{color:var(--terra)}
.ph-row.more{background:#fff;border-radius:14px;padding:11px 12px;box-shadow:0 0 0 1px var(--line) inset}
.ph-list{display:flex;flex-direction:column;gap:6px}
.ph-row.todo .pic{color:var(--forest2)}.ph-row.todo.star span{color:var(--terra);font-weight:600}
.ph-bigbtn{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:16px;background:var(--forest);color:#fff;font-weight:700;font-size:13px}
.ph-bigbtn .pic{width:18px;height:18px}
.ph-day{background:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 0 0 1px var(--line) inset;display:flex;flex-direction:column;gap:7px}
.ph-day h4{display:flex;justify-content:space-between;align-items:center;margin:0 0 1px;font-size:13px;font-weight:700;letter-spacing:0}
.ph-day h4 .pic{width:17px;height:17px;color:var(--forest2)}
.ph-day.today h4{color:var(--forest2)}
.ph-day.free p{font-size:12px;color:var(--muted)}
/* To-dos */
.ph-task{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);transition:opacity .4s,transform .4s var(--ease),max-height .45s var(--ease),padding .45s;max-height:90px;overflow:hidden}
.ph-task:first-child{border-top:0}
.ph-task.gone{opacity:0;transform:translateX(30px);max-height:0;padding-block:0}
.ph-chk{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--forest2);display:grid;place-items:center;background:#fff;transition:background .25s,border-color .25s,transform .25s var(--ease)}
.ph-chk:hover{transform:scale(1.1)}
.ph-chk svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .35s .08s var(--ease)}
.ph-task.is-done .ph-chk{background:var(--forest2);border-color:var(--forest2);animation:ph-pop .45s var(--ease)}
.ph-task.is-done .ph-chk svg{stroke-dashoffset:0}
.ph-chk:focus-visible,.ph-star:focus-visible,.ph-class:focus-visible,.ph-back:focus-visible,.ph-tabs button:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.ph-chk:focus-visible{outline-offset:2px}
.ph-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.ph-tt b{align-self:flex-start;font-size:13.5px;line-height:1.3;font-weight:600;background:linear-gradient(currentColor,currentColor) 0 58%/0 1.5px no-repeat;transition:background-size .4s var(--ease),color .3s}
.ph-task.is-done .ph-tt b{background-size:100% 1.5px;color:var(--muted)}
.ph-tt small{font-size:11.5px;color:var(--muted)}
.ph-tt small.over{color:var(--terra);font-weight:600}
.ph-star{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:#b9b6ab;transition:color .2s,transform .3s var(--ease)}
.ph-star .pic{width:19px;height:19px}
.ph-star[aria-pressed="true"]{color:var(--gold)}
.ph-star[aria-pressed="true"] .pic{fill:currentColor;animation:ph-pop .45s var(--ease)}
.ph-bellmark{flex:none;width:17px;height:17px;color:var(--forest2)}
.ph-call{flex:none;width:30px;height:30px;border-radius:50%;background:var(--forest2);color:#fff;display:grid;place-items:center}
.ph-call .pic{width:15px;height:15px}
.ph-task.fresh{animation:ph-slide .5s var(--ease)}
.ph-empty{font-size:13px;color:var(--muted);padding:8px 0;display:flex;align-items:center;gap:8px}
.ph-empty .pic{width:18px;height:18px;color:var(--sage-d)}
.ph-newcard{background:rgba(255,255,255,.7);border:1.5px dashed var(--line);border-radius:16px;padding:11px 12px;display:flex;flex-direction:column;gap:9px}
.ph-newline{font-size:13px;color:var(--muted)}
.ph-toggles{display:flex;flex-wrap:wrap;gap:6px}
.ph-toggles span{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--forest2);background:var(--sage);padding:4px 9px 4px 7px;border-radius:999px}
.ph-toggles .pic{width:13px;height:13px}
/* Klassen */
.ph-class{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.ph-class:first-child{border-top:0}
.ph-class .badge{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:20px;background:var(--c);color:var(--ink)}
.ph-class span.t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:14px;font-weight:700;line-height:1.25}
.ph-class span.t small{font-weight:500;font-size:12px;color:var(--muted)}
.ph-class>.pic{width:16px;height:16px;color:#9b9d94;transform:scaleX(-1)}
.ph-detail{position:absolute;inset:0;background:var(--cream);padding:48px 14px 92px;display:flex;flex-direction:column;gap:11px;overflow-y:auto;scrollbar-width:none;transform:translateX(100%);transition:transform .5s var(--ease);z-index:2}
.ph-detail::-webkit-scrollbar{display:none}
.ph-detail[hidden]{display:flex;visibility:hidden}
.ph-detail.open{transform:none}
.ph-back{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:2px;color:var(--forest2);font-weight:700;font-size:14px;align-self:flex-start;min-height:30px;padding-right:8px}
.ph-back .pic{width:20px;height:20px}
.ph-kids{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:12.5px}
.ph-kids li{display:flex;align-items:center;gap:7px}
.ph-kids li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--c,var(--sage));flex:none}
.ph-notetxt{font-family:var(--script);font-size:14px;line-height:1.6;color:#2d3f70;background:#fffdf6;margin:0;padding:6px 8px;border-radius:8px;background-image:repeating-linear-gradient(transparent 0 22px,rgba(74,118,144,.2) 22px 23px)}
/* Tab-Leiste */
.ph-tabs{position:absolute;left:8px;right:8px;bottom:8px;z-index:6;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:26px;padding:5px;box-shadow:0 0 0 1px var(--line),0 10px 20px -12px rgba(0,0,0,.35)}
.ph-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 6px;border-radius:20px;font-size:10px;font-weight:600;color:var(--muted);transition:background .3s,color .3s}
.ph-tabs .pic{width:20px;height:20px}
.ph-tabs button:hover{color:var(--ink)}
.ph-tabs button[aria-selected="true"]{background:var(--sage);color:var(--forest);font-weight:800}
.ph-tabs button[aria-selected="true"] .pic{animation:ph-pop .5s var(--ease)}
.note.n4{left:-64px;bottom:20%;transform:rotate(-5deg);min-width:130px;margin-bottom:calc(var(--py,0)*-1.4px)}
.note.n5{right:-44px;top:5%;background:var(--sky);animation-delay:-3s;min-width:130px;margin-top:calc(var(--py,0)*1.4px)}
.note.n5 small{color:var(--sky-d)}
.note.n4 b,.note.n5 b{font-size:20px;font-weight:400}

/* Hosentasche-Argumente */
.pb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pb{background:#fff;border-radius:var(--radius);padding:22px 24px 28px;box-shadow:var(--shadow);transition:transform .35s var(--ease)}
.pb:hover{transform:translateY(-5px) rotate(-.4deg)}
.pb h3{margin:18px 0 8px}
.pb p{color:var(--muted);font-size:16px;line-height:1.55}
.pb-demo{position:relative;height:130px;border-radius:18px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:9px;padding:0 20px}
.pb-overview i{display:block;height:20px;border-radius:8px;animation:pb-bar 5s var(--ease) infinite}
.pb-overview i:nth-child(1){width:84%;background:var(--sage)}
.pb-overview i:nth-child(2){width:66%;background:var(--sky);animation-delay:.2s}
.pb-overview i:nth-child(3){width:75%;background:var(--butter);animation-delay:.4s}
@keyframes pb-bar{0%{transform:translateX(-40px);opacity:0}16%,78%{transform:none;opacity:1}100%{transform:translateX(30px);opacity:0}}
.pb-fit{flex-direction:row;align-items:center;justify-content:center;gap:26px}
.pb-fit span{display:flex;gap:5px;padding:8px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--line) inset}
.pb-fit .wide{width:116px;height:62px}
.pb-fit .wide i{flex:1;border-radius:5px;background:var(--lav)}
.pb-fit .tall{flex-direction:column;width:52px;height:96px;animation:pb-fit 5s var(--ease) infinite}
.pb-fit .tall i{flex:1;border-radius:5px;background:var(--sage)}
.pb-fit .wide{opacity:.55;animation:pb-fitw 5s var(--ease) infinite}
@keyframes pb-fit{0%,20%{transform:scale(.85);opacity:.5}40%,85%{transform:scale(1.06);opacity:1}100%{transform:scale(.85);opacity:.5}}
@keyframes pb-fitw{0%,20%{opacity:1}40%,85%{opacity:.35}100%{opacity:1}}
.pb-sync{padding:0}
.pb-sync svg{width:100%;height:100%}
.pb-sync .dev{fill:#fff;stroke:var(--forest);stroke-width:2.5}
.pb-sync .cl{fill:var(--sky);stroke:var(--sky-d);stroke-width:2;stroke-linejoin:round;animation:s-bob 4s ease-in-out infinite}
.pb-sync .ln{fill:none;stroke:var(--terra);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:4 7;animation:s-flow 1.6s linear infinite}
.pb-sync .ar{fill:none;stroke:var(--forest);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;animation:pb-arr 3s ease-in-out infinite}
.pb-sync .a2{animation-delay:-1.5s}
@keyframes pb-arr{0%,100%{opacity:.15}50%{opacity:1}}
.pb-tick{gap:12px}
.pb-tick .r{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:7px 10px;font-size:14px;box-shadow:0 0 0 1px var(--line) inset}
.pb-tick .bx{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--forest2);display:grid;place-items:center;animation:pb-box 5s ease-in-out infinite}
.pb-tick .bx svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;animation:pb-chk 5s ease-in-out infinite}
.pb-tick b{font-weight:600;background:linear-gradient(currentColor,currentColor) 0 58%/0 1.5px no-repeat;animation:pb-str 5s ease-in-out infinite}
.pb-tick .r2 *{animation-delay:1.3s}
@keyframes pb-box{0%,15%{background:#fff}25%,80%{background:var(--forest2)}92%,100%{background:#fff}}
@keyframes pb-chk{0%,15%{stroke-dashoffset:22}30%,80%{stroke-dashoffset:0}92%,100%{stroke-dashoffset:22}}
@keyframes pb-str{0%,20%{background-size:0 1.5px;color:var(--ink)}35%,80%{background-size:100% 1.5px;color:var(--muted)}92%,100%{background-size:0 1.5px;color:var(--ink)}}
.pb-find{gap:10px}
.pb-find .q{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 14px;font-size:14px;box-shadow:0 0 0 1px var(--line) inset;width:max-content}
.pb-find .q .pic{width:18px;height:18px;color:var(--forest2)}
.pb-find .typed{display:inline-block;overflow:hidden;white-space:nowrap;width:0;font-weight:700;animation:pb-type 6s steps(2) infinite}
.pb-find .hit{display:flex;flex-direction:column;background:var(--sage);border-radius:12px;padding:7px 12px;line-height:1.3;animation:pb-hit 6s var(--ease) infinite}
.pb-find .hit b{font-size:14px;color:var(--sage-d)}.pb-find .hit small{font-size:12px;color:var(--sage-d);opacity:.85}
@keyframes pb-type{0%,6%{width:0}18%,85%{width:1.4em}100%{width:0}}
@keyframes pb-hit{0%,22%{opacity:0;transform:translateY(10px)}34%,85%{opacity:1;transform:none}100%{opacity:0}}
.pb-bell{align-items:center}
.pb-bell .banner{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:9px 12px;box-shadow:0 12px 22px -12px rgba(30,40,50,.55),0 0 0 1px var(--line);animation:pb-drop 5s var(--ease) infinite}
.pb-bell .banner i{width:34px;height:34px;border-radius:10px;background:var(--forest);color:#fff;display:grid;place-items:center}
.pb-bell .banner .pic{width:19px;height:19px;animation:ph-ring 5s ease-in-out infinite;transform-origin:50% 10%}
.pb-bell .banner small{display:block;font-size:11px;color:var(--muted);line-height:1.2}
.pb-bell .banner b{font-size:14px}
@keyframes pb-drop{0%{transform:translateY(-90px);opacity:0}15%,80%{transform:none;opacity:1}100%{transform:translateY(-90px);opacity:0}}

/* iPad schreibt -> iPhone zeigt */
.relay{margin-top:56px;background:rgba(255,255,255,.62);border-radius:34px;padding:26px 30px 34px;box-shadow:var(--shadow)}
.relay-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;margin-bottom:12px}
.relay-head .hand{font-size:26px}
.relay-sub{font-size:14px;color:var(--muted)}
.relay-stage{position:relative;height:190px;max-width:760px;margin:0 auto}
.rl-ipad{position:absolute;left:0;top:18px;width:36%;height:140px;background:#1c1c1e;border-radius:18px;padding:8px;box-shadow:0 0 0 2px #d9d4cb,0 20px 34px -22px rgba(60,45,20,.6)}
.rl-ipad::before{content:"";position:absolute;inset:8px;border-radius:11px;background:var(--cream)}
.rl-bar,.rl-hand,.rl-pen{position:relative}
.rl-bar{height:6px;width:40%;border-radius:4px;background:var(--sage);margin:10px 10px 8px}
.rl-hand{font-family:var(--script);font-size:13px;line-height:1.5;margin:0 10px;color:#2d3f70;white-space:nowrap;overflow:hidden;width:0;animation:rl-write 7s steps(18) infinite}
.rl-pen{display:block;width:80%;margin:4px 10px;height:24px}
.rl-pen path{fill:none;stroke:#2d3f70;stroke-width:2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;animation:rl-draw 7s ease-in-out infinite}
.rl-pencil{position:absolute;right:12px;bottom:10px;color:var(--terra);animation:rl-pen 7s ease-in-out infinite}
.rl-pencil .pic{width:26px;height:26px;stroke-width:2}
@keyframes rl-write{0%{width:0}22%,92%{width:calc(100% - 20px)}100%{width:0}}
@keyframes rl-draw{0%,18%{stroke-dashoffset:420}34%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
@keyframes rl-pen{0%,35%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(-30px,-34px) rotate(-8deg)}24%{transform:translate(-60px,-24px) rotate(6deg)}}
.rl-path{position:absolute;left:36%;width:30%;top:30px;height:80px;overflow:visible}
.rl-path path{fill:none;stroke:var(--sky-d);stroke-width:2;stroke-dasharray:4 8;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.55;animation:s-flow 1.6s linear infinite}
.rl-cloud{position:absolute;left:calc(51% - 18px);top:2px;width:36px;height:36px;color:var(--sky-d);display:grid;place-items:center;animation:s-bob 4s ease-in-out infinite}
.rl-cloud .pic{width:34px;height:34px}
.rl-slip{position:absolute;left:36%;top:90px;padding:5px 12px;background:var(--butter);color:var(--butter-d);font-weight:800;font-size:12px;border-radius:4px 4px 12px 4px;box-shadow:0 10px 16px -8px rgba(70,55,30,.5);opacity:0;animation:rl-fly 7s ease-in-out infinite}
@keyframes rl-fly{0%,38%{opacity:0;left:34%;top:100px}44%{opacity:1;left:36%;top:90px}52%{top:42px}60%{top:20px;left:50%}70%{top:48px;left:60%}78%{opacity:1;left:64%;top:78px}84%,100%{opacity:0;left:66%;top:90px}}
.rl-phone{position:absolute;right:0;top:0;width:34%;height:172px;background:#1c1c1e;border-radius:26px;padding:8px}
.rl-phone::before{content:"";position:absolute;inset:8px;border-radius:19px;background:var(--cream)}
.rl-row{position:relative;display:flex;align-items:center;gap:6px;margin:30px 14px 0;background:#fff;border-radius:9px;padding:6px 8px;font-size:11px;box-shadow:0 0 0 1px var(--line) inset}
.rl-row+.rl-row{margin-top:8px}
.rl-row .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--c,var(--lav-d))}
.rl-row b{flex:1;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-row small{font-size:10px;color:var(--muted)}
.rl-row.new{background:var(--butter);opacity:0;transform:translateY(-8px) scale(.92);animation:rl-new 7s var(--ease) infinite}
@keyframes rl-new{0%,76%{opacity:0;transform:translateY(-8px) scale(.92)}84%,94%{opacity:1;transform:none}100%{opacity:0}}

/* Nur auf dem iPad */
.ipad-only{margin-top:56px;position:relative;border-radius:22px;padding:36px 34px 30px;color:var(--chalkwhite);
  background:radial-gradient(ellipse at 18% 22%,rgba(255,255,255,.08),transparent 42%),radial-gradient(ellipse at 80% 90%,rgba(0,0,0,.2),transparent 60%),var(--slate);
  border:12px solid var(--wood);border-image:linear-gradient(135deg,#b88a5a,#8f6238 40%,#b4865a 60%,#7f5531) 1;box-shadow:0 36px 60px -38px rgba(40,30,15,.8),inset 0 0 50px rgba(0,0,0,.3)}
.io-head{display:grid;gap:8px;justify-items:start;margin-bottom:24px}
.io-head h3{font-family:var(--chalk);font-weight:400;font-size:clamp(28px,4vw,40px);line-height:1.15;filter:url(#chalk);color:var(--chalkwhite)}
.io-head p{font-family:var(--chalkhand);font-size:21px;line-height:1.4;color:rgba(243,241,232,.8);max-width:640px}
.io-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.io-list li{display:grid;gap:6px;justify-items:start;padding:16px 16px 18px;border:2px dashed rgba(243,241,232,.28);border-radius:16px;transition:transform .3s var(--ease),border-color .3s,background .3s}
.io-list li:hover{transform:translateY(-4px) rotate(-.6deg);border-color:rgba(244,217,211,.7);background:rgba(255,255,255,.04)}
.io-ico{width:46px;height:46px;border-radius:50%;border:2px solid rgba(243,241,232,.6);display:grid;place-items:center;color:#f4d9d3;margin-bottom:4px}
.io-ico .pic{width:24px;height:24px;stroke-width:1.5}
.io-list b{font-family:var(--chalkhand);font-weight:400;font-size:23px;line-height:1.15}
.io-list small{font-size:14px;line-height:1.4;color:rgba(243,241,232,.7)}
.io-foot{display:flex;align-items:center;gap:10px;margin-top:22px;font-family:var(--chalkhand);font-size:20px;color:#d9ead3}
.io-foot .pic{width:24px;height:24px;flex:none}

@media (max-width:1100px){
  .pb-grid{grid-template-columns:repeat(2,1fr)}
  .io-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .ph-demo{grid-template-columns:1fr;gap:20px}
  .ph-side{display:contents}
  .ph-q{order:0}
  .ph-pick{order:1;position:sticky;top:76px;z-index:30;gap:10px;padding:8px 0 10px;background:linear-gradient(#e2edf3 82%,rgba(226,237,243,0))}
  .ph-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:0 -16px;padding-inline:16px;scroll-snap-type:x proximity}
  .ph-chips::-webkit-scrollbar{display:none}
  .ph-chip{flex:none;scroll-snap-align:center;white-space:nowrap}
  .ph-benefit{min-height:0;padding:12px 14px;gap:12px;border-radius:20px}
  .ph-benefit .c-ico{display:none}
  .ph-benefit-txt b{font-size:17px;line-height:1.3}
  .ph-benefit-txt p{font-size:14px;line-height:1.45}
  .ph-stage-col{order:2;position:relative;top:auto}
  .ph-tour{order:3}
  .ph-fineprint{order:4}
  .phone-stage{width:min(76%,300px)}
  .note.n4{left:-34px}.note.n5{right:-30px}
  #iphone .section-head{align-items:start}
}
@media (max-width:640px){
  .pb-grid{grid-template-columns:1fr}
  .relay{padding:22px 16px 26px}
  .relay-stage{height:210px}
  .rl-ipad{width:42%}.rl-path{left:42%;width:20%}.rl-phone{width:38%}
  .rl-slip{display:none}
  .rl-hand{font-size:11px}
  .ipad-only{padding:26px 16px 22px;border-width:8px}
  .io-head p{font-size:19px}
  .io-list{grid-template-columns:1fr}
  .io-list li{grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
  .io-ico{grid-row:span 2;margin:0}
}
@media (max-width:560px){
  .role-duo{grid-template-columns:1fr}
  .phone-stage{width:min(76%,272px)}
  .phone-stage .note{display:none}
  .neu-sub .hand{font-size:26px}
  .ph-chip{font-size:14px;padding:8px 13px 8px 10px}
  .hero-phone{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .t-ev,.k-row,.y-to,.pdf-file{opacity:1;transform:none}
  .y-arrow{stroke-dashoffset:0}
  .phone,.phone-stage,.ph-floor{animation:none!important;translate:none;transform:none}
  .note.n4,.note.n5{margin:0}
  .ph-panel{transform:none!important}
  .ph-scroll{scroll-behavior:auto}
  .pb-demo *,.relay *{animation:none!important}
  .pb-overview i,.pb-find .hit,.pb-bell .banner{opacity:1;transform:none}
  .pb-find .typed{width:1.4em}
  .pb-tick .bx{background:var(--forest2)}.pb-tick .bx svg{stroke-dashoffset:0}.pb-tick .r b{background-size:100% 1.5px;color:var(--muted)}
  .rl-hand{width:calc(100% - 20px)}.rl-pen path{stroke-dashoffset:0}.rl-row.new{opacity:1;transform:none}
  .rl-slip{display:none}
}

/* ---------- Griffbereit: Dateien, Fotos, Scans ---------- */
.gb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.gb-demo{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 26px 22px;min-width:0}
.gb-q{font-size:28px;margin-bottom:16px}
.gb-btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.gb-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:15px;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--cream);color:var(--ink);cursor:pointer;transition:transform .25s var(--ease),background .2s,box-shadow .25s}
.gb-btn .pic{width:20px;height:20px;color:var(--lav-d);transition:transform .3s var(--ease)}
.gb-btn:hover{transform:translateY(-2px);background:var(--lav);box-shadow:0 10px 18px -12px rgba(70,55,30,.5)}
.gb-btn:hover .pic{transform:rotate(-8deg) scale(1.1)}
.gb-btn:active{transform:scale(.96)}
.gb-page{background:var(--paper);border-radius:18px;border:1px solid var(--line);overflow:hidden;background-image:repeating-linear-gradient(transparent 0 31px,rgba(46,59,51,.08) 31px 32px);background-position:0 38px}
.gb-page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;background:var(--cream);border-bottom:1px solid var(--line);font-family:var(--script);font-size:17px;color:var(--forest)}
.gb-pill{min-width:26px;height:26px;padding:0 8px;border-radius:999px;background:var(--terra);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;display:grid;place-items:center}
.gb-pill.bump{animation:gb-bump .4s var(--ease)}
@keyframes gb-bump{50%{transform:scale(1.35)}}
.gb-canvas{position:relative;min-height:300px;padding:22px 16px 20px;display:flex;flex-wrap:wrap;gap:20px 16px;align-content:flex-start;justify-content:center}
.gb-empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;margin:0;color:var(--muted);font-family:var(--script);font-size:18px;line-height:1.5}
.gb-empty[hidden]{display:none}
.gb-item{all:unset;box-sizing:border-box;position:relative;cursor:pointer;display:block;text-align:left;animation:gb-in .6s var(--ease) both;transition:transform .3s var(--ease),box-shadow .3s}
.gb-item:nth-of-type(odd){transform:rotate(-2.5deg)}.gb-item:nth-of-type(even){transform:rotate(2deg)}
.gb-item:hover,.gb-item:focus-visible{transform:translateY(-4px) rotate(0deg)}
.gb-item:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:6px}
@keyframes gb-in{from{opacity:0;translate:0 -36px;scale:.86}to{opacity:1;translate:0 0;scale:1}}
.gb-item.opened{animation:gb-open .5s var(--ease)}
@keyframes gb-open{40%{scale:1.08}}
.gb-foto{width:132px;background:#fff;padding:7px 7px 24px;box-shadow:0 12px 22px -12px rgba(0,0,0,.5)}
.gb-foto .gb-pic{display:block;height:92px;background:radial-gradient(circle at 76% 24%,#fbeab0 0 11%,transparent 12%),linear-gradient(180deg,#cfe3ee 0 55%,#9cb7a0 55%);position:relative;overflow:hidden}
.gb-foto .gb-pic::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-14px;height:46px;background:#4f6e5c;border-radius:50% 50% 0 0/100% 100% 0 0}
.gb-foto .gb-cap{position:absolute;left:8px;right:8px;bottom:4px;font-family:var(--script);font-size:12px;color:var(--forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-tapeb{position:absolute;top:-9px;left:50%;width:62px;height:18px;transform:translateX(-50%) rotate(-4deg);background:repeating-linear-gradient(45deg,rgba(255,255,255,.4) 0 6px,transparent 6px 12px),var(--sage);opacity:.95;z-index:1}
.gb-foto .gb-tapeb{background-color:var(--blush)}
.gb-scan{width:112px;height:148px;background:#fff;padding:12px 10px;box-shadow:0 12px 22px -12px rgba(0,0,0,.5);overflow:hidden}
.gb-scan .gb-lines{display:block;height:100%;background:repeating-linear-gradient(transparent 0 9px,rgba(46,59,51,.2) 9px 10px)}
.gb-scan .gb-lines::before{content:"";display:block;height:14px;width:60%;background:var(--sky);margin-bottom:9px;border-radius:2px}
.gb-beam{position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(180deg,transparent,rgba(106,165,125,.4) 70%,rgba(106,165,125,.9) 72%,transparent 74%);opacity:0;animation:gb-beam 1.5s ease-in-out 1 both;pointer-events:none}
@keyframes gb-beam{0%{top:-26px;opacity:1}85%{top:100%;opacity:1}100%{top:100%;opacity:0}}
.gb-scancap{position:absolute;left:0;right:0;bottom:0;padding:3px 8px;background:var(--sage);color:var(--sage-d);font-size:11px;font-weight:700}
.gb-datei{width:160px;display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 12px 22px -12px rgba(0,0,0,.45)}
.gb-badge{flex:none;width:42px;height:52px;border-radius:6px;background:var(--blush);color:var(--blush-d);font-weight:800;font-size:12px;display:grid;place-items:center}
.gb-datei b{display:block;font-size:13px;line-height:1.2;color:var(--ink)}
.gb-datei small{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--sky-d);margin-top:3px}
.gb-datei small .pic{width:13px;height:13px}
.gb-zettel{width:168px;min-height:84px;background:var(--butter);padding:12px 12px 10px;box-shadow:0 12px 22px -12px rgba(0,0,0,.45);overflow:hidden}
.gb-zettel .gb-hand,.gb-zettel .gb-typed{display:block;margin:0;transition:opacity .6s,transform .6s var(--ease)}
.gb-zettel .gb-hand{font-family:var(--chalkhand);font-size:17px;line-height:1.3;color:#2d3f70}
.gb-zettel .gb-typed{position:absolute;left:12px;right:12px;top:12px;font-family:var(--script);font-size:14px;line-height:1.5;color:var(--forest);opacity:0;transform:translateY(8px)}
.gb-zettel.done .gb-hand{opacity:0;transform:translateY(-6px)}
.gb-zettel.done .gb-typed{opacity:1;transform:none}
.gb-zettel .gb-beam{animation-duration:1.2s}
.gb-zettel.done .gb-beam{display:none}
.gb-link{display:inline-flex;align-items:center;gap:8px;background:var(--sky);color:var(--sky-d);border-radius:999px;padding:9px 16px 9px 12px;font-weight:700;font-size:13px;box-shadow:0 10px 18px -12px rgba(0,0,0,.5);align-self:flex-start}
.gb-link .pic{width:17px;height:17px}
.gb-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.gb-count{margin:0;font-weight:700;color:var(--forest)}
.gb-reset{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:700;color:var(--forest);background:none;border:0;cursor:pointer;padding:6px 8px;border-radius:8px;text-decoration:underline;text-underline-offset:3px}
.gb-reset .pic{width:16px;height:16px}
.gb-status{margin:8px 0 0;min-height:3em;color:var(--muted);font-size:15px}
.gb-fine{margin:6px 0 0;color:var(--muted);font-size:13px}
.gb-how h3{margin-bottom:22px}
.gb-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.gb-list li{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;background:rgba(255,255,255,.7);padding:14px 16px;border-radius:20px}
.gb-list .c-ico{grid-row:auto}
.gb-list b{display:block;font-size:17px}
.gb-list p{margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.45}
.gb-note{margin:20px 4px 0;color:var(--muted);font-size:14px}
.gb-org{margin-top:90px;text-align:center}
.gb-org-h{font-size:clamp(32px,4.4vw,52px)}
.gb-org-h em{color:var(--terra)}
.gb-org-p{max-width:620px;margin:16px auto 34px;color:var(--muted);font-size:18px}
.gb-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left}
.gb-tile{display:block;height:100%;box-sizing:border-box;padding:22px 20px;border-radius:24px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s}
.gb-tile.c-sage{background:var(--sage)}.gb-tile.c-sky{background:var(--sky)}.gb-tile.c-lav{background:#fff}.gb-tile.c-butter{background:var(--butter)}.gb-tile.c-blush{background:var(--blush)}
.gb-tico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.75);margin-bottom:14px;transition:transform .35s var(--ease)}
.gb-tile.c-sage .gb-tico{color:var(--sage-d)}.gb-tile.c-sky .gb-tico{color:var(--sky-d)}.gb-tile.c-lav .gb-tico{color:var(--lav-d);background:var(--lav)}.gb-tile.c-butter .gb-tico{color:var(--butter-d)}.gb-tile.c-blush .gb-tico{color:var(--blush-d)}
.gb-tile b{display:block;font-size:18px}
.gb-tile small{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.gb-tile:hover,.gb-tile:focus-visible{transform:translateY(-6px) rotate(-.8deg);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 28px 44px -22px rgba(70,55,30,.5)}
.gb-tile:hover .gb-tico,.gb-tile:focus-visible .gb-tico{transform:rotate(-8deg) scale(1.12)}
.gb-tile:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:1100px){.gb-tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .gb-grid{grid-template-columns:1fr;gap:36px}
  .gb-org{margin-top:64px}
}
@media (max-width:560px){
  .gb-demo{padding:20px 16px 18px}
  .gb-q{font-size:24px}
  .gb-btn{padding:9px 13px;font-size:14px}
  .gb-canvas{padding:20px 8px 18px;gap:20px 10px}
  .gb-tiles{gap:12px}
  .gb-tile{padding:18px 14px}
  .gb-tile b{font-size:16px}
  .gb-tile small{font-size:13px}
  .gb-list li{grid-template-columns:40px 1fr;padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .gb-beam{display:none}
  .gb-zettel .gb-hand{opacity:0}.gb-zettel .gb-typed{opacity:1;transform:none}
  .gb-item{animation:none!important}
}