/* One Plate website: fonts and the few rules the generated pages do not carry
   inline (form states, auth layout, legal pages). Tokens as in the redesign. */

@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-400.woff) format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-500.woff) format('woff')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-600.woff) format('woff')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-400.woff) format('woff')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/source-serif-4-500.woff) format('woff')}

:root{
  --bg:#FAF9F5; --surface:#FFFFFF; --ink:#141413; --ink2:#5E5D59; --ink3:#73726C;
  --line:rgba(31,30,29,0.14); --line2:rgba(31,30,29,0.30);
  --accent:#D97757; --accent-text:#B04E2B; --ok-bg:#EEF5E7;
  --sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
}

[hidden]{display:none !important}
.op-hp{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ---- sticker row under "Motivation": one row, the stickers shrink on phones ---- */
.op-stickers > .op-bob{flex:0 1 64px; min-width:0}
.op-stickers > .op-bob > svg{width:100%; height:auto}

/* ---- status lines under the landing page forms ---- */
.op-status{flex:1 1 100%; margin:0; font:400 13.5px/1.5 var(--sans); color:inherit; opacity:.72}
.op-status a{color:inherit}
.op-status[data-state="ok"]{opacity:1; font-weight:500}
.op-status[data-state="error"]{opacity:1; color:var(--accent-text)}
form[data-busy] button[type="submit"]{opacity:.6; pointer-events:none}

/* ---- "sent" dialog after a landing page form ---- */
.op-sent{width:min(380px, calc(100vw - 32px)); padding:28px 24px 24px; border:0; border-radius:24px; background:var(--surface); color:var(--ink); text-align:center; box-shadow:0 24px 60px rgba(20,20,19,0.22)}
.op-sent::backdrop{background:rgba(20,20,19,0.45)}
.op-sent svg{display:block; margin:0 auto 14px}
.op-sent strong{display:block; font:500 24px/1.2 var(--serif)}
.op-sent p{margin:8px 0 22px; font:400 15.5px/1.5 var(--sans); color:var(--ink2)}

/* ---- auth pages (Anmelden, Registrieren) ---- */
.op-auth{min-height:100vh}
.op-auth-mid{padding:40px 0}
.op-auth-right{min-height:720px}
@media (max-width:1000px){
  .op-auth-right{display:none !important}
  .op-auth-left{width:100% !important; flex:1 1 auto !important; padding:40px 20px 32px !important}
  .op-auth-mid{align-items:flex-start !important; padding:32px 0 40px}
  .op-auth-h1{font-size:38px !important}
}

.op-form{display:flex; flex-direction:column; gap:16px; margin:0}
.op-field{display:flex; flex-direction:column; gap:6px}
.op-label{font:500 13.5px var(--sans); color:var(--ink2)}
.op-hint{font:400 12.5px var(--sans); color:var(--ink3)}
.op-inputwrap{display:flex; align-items:center; gap:10px; height:52px; padding:0 16px; border-radius:14px; border:1px solid var(--line2); background:var(--surface); box-sizing:border-box}
.op-inputwrap:focus-within{border:1.5px solid var(--ink); padding:0 15.5px}
.op-inputwrap input{flex:1; min-width:0; height:100%; border:0; outline:0; background:none; padding:0; font:400 16px var(--sans); color:var(--ink)}
.op-inputwrap input:focus-visible{outline:0}
.op-toggle{border:0; background:none; padding:0; font:500 13.5px var(--sans); color:var(--ink2); cursor:pointer}
.op-row{display:flex; justify-content:space-between; align-items:center; gap:12px}
.op-link{border:0; background:none; padding:0; font:500 14.5px var(--sans); color:var(--ink); text-decoration:underline; cursor:pointer}
.op-submit{display:flex; align-items:center; justify-content:center; width:100%; height:54px; border-radius:999px; border:0; background:var(--ink); color:var(--bg); font:600 16px var(--sans); cursor:pointer}
.op-submit[disabled]{opacity:.6; cursor:default}
.op-msg{margin:0; font:400 14px/1.5 var(--sans); color:var(--accent-text)}
.op-msg[data-state="ok"]{color:var(--ink)}
.op-note{margin:0; font:400 13px/1.5 var(--sans); color:var(--ink3)}
.op-note a{color:var(--ink2)}
.op-consent{display:flex; gap:10px; align-items:flex-start; cursor:pointer}
.op-consent input{flex:none; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ink)}
.op-done{display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:16px; background:var(--ok-bg); font:400 15px/1.5 var(--sans); color:var(--ink)}
.op-done strong{font:500 21px/1.25 var(--serif)}

/* "Mit wem planst du?" */
.op-choices{display:flex; flex-direction:column; gap:10px; border:0; padding:0; margin:0; min-width:0}
.op-choices legend{padding:0; margin-bottom:10px}
.op-choice{display:flex; flex-direction:column; gap:14px; padding:14px 16px; border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line2); cursor:pointer}
.op-choice:has(input[type="radio"]:checked){box-shadow:inset 0 0 0 1.5px var(--ink); padding-bottom:16px}
.op-choice:has(input[type="radio"]:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.op-choice-head{display:flex; gap:12px; align-items:flex-start}
.op-choice input[type="radio"]{position:absolute; opacity:0; width:1px; height:1px}
.op-dot{width:22px; height:22px; border-radius:999px; box-sizing:border-box; border:1.5px solid var(--line2); background:var(--surface); flex:none; margin-top:1px}
.op-choice input[type="radio"]:checked + .op-dot{border:7px solid var(--ink)}
.op-choice-text{display:flex; flex-direction:column; gap:2px}
.op-choice-title{font:600 15px var(--sans); color:var(--ink)}
.op-choice-sub{font:400 13.5px var(--sans); color:var(--ink3)}
.op-code{display:flex; gap:6px; padding-left:34px}
.op-code input{width:40px; height:48px; border-radius:12px; border:0; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line2); text-align:center; font:600 20px var(--sans); color:var(--ink); text-transform:uppercase; padding:0}
.op-code input:focus{outline:0; box-shadow:inset 0 0 0 1.5px var(--ink)}
.op-joined{display:flex; align-items:center; gap:10px; margin-left:34px; padding:10px 12px; border-radius:12px; background:var(--ok-bg); font:400 13.5px var(--sans); color:var(--ink)}
@media (max-width:380px){.op-code{padding-left:0}.op-joined{margin-left:0}}

/* ---- legal pages ---- */
.op-legal{max-width:720px; margin:0 auto; padding:32px clamp(20px, 4vw, 48px) 80px; box-sizing:border-box; font:400 16px/1.6 var(--sans); color:var(--ink)}
.op-legal header{display:flex; justify-content:space-between; align-items:center; padding-bottom:40px}
.op-legal header a{font:500 15px var(--sans)}
.op-legal h1{margin:0 0 24px; font:400 clamp(36px, 5vw, 48px)/1.05 var(--serif); letter-spacing:-0.01em}
.op-legal h2{margin:40px 0 8px; font:500 22px/1.25 var(--serif)}
.op-legal p, .op-legal ul{margin:0 0 12px; color:var(--ink2)}
.op-legal .op-open{display:inline; padding:1px 6px; border-radius:6px; background:rgba(217,119,87,0.14); color:var(--accent-text); font-weight:500}
.op-legal footer{display:flex; gap:20px; margin-top:56px; padding-top:20px; border-top:0.5px solid var(--line); font:400 13px var(--sans); color:var(--ink3)}
.op-legal footer a{color:var(--ink3)}

/* ---- landing page: the header is drawn for 390 px, narrower phones need a little air ---- */
@media (max-width:389px){
  header a.op-get{height:44px !important; padding:0 13px !important; font-size:14px !important}
  header > div{gap:12px !important}
}

/* ---- landing page: demo clips. The video's paper tone is a touch off the page's
   (video colour handling differs per browser), so the card would show as a faint box:
   no outline, and the sides and top fade into the page. ---- */
#demo figure > div{
  box-shadow:none !important; background:none !important;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent), linear-gradient(180deg, transparent, #000 20px);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent), linear-gradient(180deg, transparent, #000 20px);
  mask-composite:intersect;
}

/* ---- landing page: between 761 and 940 px the section links do not fit next to
   "Anmelden" and "App laden" (they wrapped and pushed the button out). ---- */
.op-links a{white-space:nowrap}
@media (max-width:940px){.op-links{display:none !important}}

/* ---- language switch in the landing page header (the footer carries it on phones) ---- */
@media (max-width:760px){.op-lang{display:none !important}}

/* ---- landing page: desktop week in the drawn screens. The "we eat together" dot sat
   after the text, so its place depended on the word length (and it left the cell after
   "Rinderhack-"). Now it is a corner mark at the same spot in every cell. ---- */
[inert][style*="width:1440px"] button{position:relative}
[inert][style*="width:1440px"] button > span > span[style*="width:6px; height:6px"]{position:absolute; top:5px; right:5px; margin:0 !important}

/* ---- landing page: "So landest du … kcal" in the three situations. With "kcal" in the
   first line the box is too narrow for line and "passt" side by side at some widths
   (three cards between about 940 and 1150 px): there "passt" moves below. ---- */
#planlos div[style*="margin-top:auto"][style*="justify-content:space-between"]{flex-wrap:wrap; row-gap:6px}

/* Film hero (owner 2026-10-09): floating glass pill as header, dark over the hero, light below. */
.op-pill{color:#141413; background:rgba(250,249,245,0.78); box-shadow:inset 0 0 0 1px rgba(31,30,29,0.12), 0 10px 40px rgba(20,20,19,0.12)}
.op-pill a{color:#141413 !important}
.op-pill a.op-get{background:#141413 !important; color:#FAF9F5 !important; height:44px !important}
.op-pill[data-dark]{color:#FAF9F5; background:rgba(20,20,19,0.38); box-shadow:inset 0 0 0 1px rgba(250,249,245,0.16), 0 10px 40px rgba(20,20,19,0.25)}
.op-pill[data-dark] a{color:rgba(250,249,245,0.88) !important}
.op-pill[data-dark] a.op-get{background:#FAF9F5 !important; color:#141413 !important}
.op-pill[data-dark] svg path[fill="#141413"]{fill:#FAF9F5}
@media (max-width:940px){.op-pill{gap:12px; padding:0 8px 0 16px}}

/* iPhone: the hero fills the real screen including notch and home bar (viewport-fit=cover), the pill stays below the notch. */
.op-pill{top:calc(18px + env(safe-area-inset-top)) !important}
@media (max-width:767px){
  /* large viewport height: the hero reaches under Safari's toolbar, so the glass bar blurs the film and not the next section */
  .op-hero{min-height:100vh !important; min-height:100lvh !important}
  .op-hero > div:last-child{padding-bottom:calc(120px + env(safe-area-inset-bottom)) !important}
}

/* Phones: the week screen in its phone frame above "So geht's" gives way to a small card under the headline (build.mjs, weekCard). */
.op-week-card{display:none}
@media (max-width:767px){
  .op-week-phone{display:none !important}
  .op-week-card{display:flex}
}

/* Screens from 768 px: the hero follows the film's 16:9 frame, capped at the viewport height, so a laptop and a
   large display show the same picture (no crop up to 16:9, a gentle side crop only on ultra-wide screens). The
   fades are fractions of the hero, not pixels, and the text block keeps clear of the ivory run-out. */
@media (min-width:768px){
  .op-hero{height:clamp(620px, 56.25vw, 100vh) !important; min-height:0 !important}
  .op-hero-fade{background:linear-gradient(0deg, #FAF9F5 0%, rgba(250,249,245,0.93) 4%, rgba(250,249,245,0.68) 8%, rgba(250,249,245,0.36) 12%, rgba(250,249,245,0.12) 16%, rgba(250,249,245,0) 21%), linear-gradient(180deg, rgba(20,20,19,1) 0%, rgba(20,20,19,0.78) 10%, rgba(20,20,19,0) 36%, rgba(20,20,19,0.5) 66%, rgba(20,20,19,0.25) 84%, rgba(20,20,19,0) 100%) !important}
  .op-hero > div:last-child{padding-top:140px !important; padding-bottom:clamp(150px, 24vh, 270px) !important}
  [data-film-modal] + section{border-top-color:transparent !important}
}
}

/* no native play overlay on the silent hero loop (Safari shows one when it holds autoplay back) */
video[autoplay]::-webkit-media-controls-start-playback-button{display:none !important; -webkit-appearance:none}
video[autoplay]::-webkit-media-controls{display:none !important}
video[autoplay]::-webkit-media-controls-overlay-play-button{display:none !important}

/* ---- shared training plan, /p/<CODE> (ADR-157, board B4) ---- */
.op-plan{max-width:560px}
.op-plan header{padding-bottom:28px}
.op-plan main{display:flex; flex-direction:column; gap:14px}
.op-plan .op-plan-body{display:none; flex-direction:column; gap:14px}
.op-plan main[data-state="plan"] .op-plan-body{display:flex}
.op-plan main[data-state="plan"] .op-plan-message{display:none}
.op-plan .op-plan-status{margin:0; font:500 22px/1.25 var(--serif); color:var(--ink)}
.op-plan .op-plan-hint{margin:6px 0 0; color:var(--ink3)}
.op-plan main[data-state="loading"] .op-plan-status{font:400 15px var(--sans); color:var(--ink3)}
.op-plan .op-plan-by{margin:0; font:400 13.5px var(--sans); color:var(--ink3)}
.op-plan h1{margin:0; font:500 clamp(30px, 6vw, 38px)/1.12 var(--serif)}
.op-plan .op-plan-meta{margin:-6px 0 4px; font:400 13.5px var(--sans); color:var(--ink3)}
.op-plan-open{display:flex; align-items:center; justify-content:center; height:52px; border-radius:999px; background:var(--ink); color:var(--bg) !important; font:600 15.5px var(--sans); text-decoration:none}
.op-plan-open:hover{opacity:.9}
.op-plan-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:0 4px; font:400 13.5px var(--sans); color:var(--ink2)}
.op-plan-row b{color:var(--ink); letter-spacing:.06em; font-weight:600}
.op-plan-units{display:flex; flex-direction:column; gap:10px; margin-top:6px}
.op-plan-unit{background:var(--surface); border:0.5px solid var(--line); border-radius:20px; padding:12px 16px 8px}
.op-plan-unit-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:4px}
.op-plan-unit-head h2{margin:0; font:500 18px/1.3 var(--serif)}
.op-plan-unit-head span{font:400 12.5px var(--sans); color:var(--ink3); white-space:nowrap}
.op-plan-line{display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-top:0.5px solid rgba(31,30,29,0.10); font:400 14px/1.4 var(--sans); color:var(--ink)}
.op-plan-target{color:var(--ink3); white-space:nowrap; font-variant-numeric:tabular-nums}

/* ---- landing page: download section with the App Store window (owner 2026-11-04, build.mjs appStore) ---- */
.op-store-badge{transition:transform .15s, box-shadow .15s}
.op-store-badge:hover{transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,0.25)}
.op-live-dot{box-shadow:0 0 0 0 rgba(125,196,106,0.6); animation:op-live 2.4s ease-out infinite}
@keyframes op-live{0%{box-shadow:0 0 0 0 rgba(125,196,106,0.55)}70%,100%{box-shadow:0 0 0 9px rgba(125,196,106,0)}}
@media (prefers-reduced-motion:reduce){.op-live-dot{animation:none}}
.op-shots{display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:0 clamp(18px, 3vw, 34px); padding:4px clamp(18px, 3vw, 34px) 10px; scrollbar-width:none; outline:none}
.op-shots::-webkit-scrollbar{display:none}
.op-shots img{flex:none; height:clamp(380px, 40vw, 560px); width:auto; aspect-ratio:600 / 1304; border-radius:clamp(16px, 1.6vw, 24px); scroll-snap-align:start; box-shadow:0 0 0 0.5px rgba(31,30,29,0.16), 0 8px 24px rgba(20,20,19,0.10); background:#ECE9E1}
.op-shots:focus-visible{box-shadow:inset 0 0 0 2px #0A7AFF}
.op-shots-nav button:disabled{opacity:.35; cursor:default}
@media (max-width:640px){
  .op-win-facts{grid-template-columns:repeat(2, minmax(0, 1fr)) !important; row-gap:14px}
  .op-win-facts > div:nth-child(3){border-left:0 !important}
  .op-shots-nav{display:none !important}
  .op-shots img{height:440px}
  .op-dl{gap:32px !important}
  .op-win-head img{width:64px !important; height:64px !important; border-radius:15px !important}
  /* phones: "Laden" moves under the name, so name and subtitle keep the width next to the icon */
  .op-win-head{flex-wrap:wrap; row-gap:10px !important}
  .op-win-head > div{flex-basis:calc(100% - 80px) !important}
  .op-win-head > div > span:last-child{font-size:14px !important}
  .op-win-head a{height:34px !important; padding:0 18px !important; font-size:14px !important; margin-left:78px}
  .op-win-facts dd{font-size:15px !important}
}