/* Shared shell for the standalone legal/support pages
   (delete-account.html, impressum.html, privacy.html).
   The marketing home page keeps its own main.css. */
@font-face{font-family:"Bebas Neue";src:url("../assets/fonts/bebas-neue-v16-latin-regular.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  --night:#0b211b; --night-2:#12342a; --paper:#f6f7f2;
  --orange:#ff5a1f; --cyan:#78dcdf; --lime:#c7f45b; --red:#ff4d4d;
  --display:"Bebas Neue",Impact,system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  min-height:100dvh;
  background:radial-gradient(120% 60% at 50% -10%,#173d31 0%,var(--night) 55%);
  color:#fff; font-family:var(--body); line-height:1.6; overflow-x:hidden;
}
.shell{max-width:56rem;margin:0 auto;padding:1.5rem 1.25rem 5rem}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:.4rem}

header.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0 2rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-family:var(--display);font-size:1.5rem;letter-spacing:.04em}
.brand img{width:2rem;height:2rem;border-radius:.55rem}
.lang-switch{display:inline-flex;gap:.35rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.25rem}
.lang-btn{width:2.4rem;height:1.85rem;padding:0;border:0;border-radius:999px;background:transparent;cursor:pointer;opacity:.45;transition:opacity .18s ease,background .18s ease}
.lang-btn svg{width:1.5rem;height:.9rem;border-radius:.15rem;display:block;margin:0 auto}
.lang-btn.is-active{opacity:1;background:rgba(255,255,255,.14)}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--orange);font-weight:700;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.eyebrow i{width:.55rem;height:.55rem;border-radius:50%;background:var(--orange);box-shadow:0 0 0 .28rem rgba(255,90,31,.18)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,8vw,4.2rem);line-height:1;margin:.8rem 0 1rem}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4.5vw,2.4rem);line-height:1.1;margin:0 0 .9rem}
h3{font-size:1.02rem;margin:0 0 .35rem}
p{color:rgba(255,255,255,.78)}
.lede{font-size:1.06rem;max-width:44rem}
section{margin-top:3rem}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:1rem;padding:1.25rem 1.35rem}
.card + .card{margin-top:1rem}

.meta{display:grid;gap:.55rem;grid-template-columns:auto 1fr;font-size:.9rem;margin-top:1.5rem}
.meta dt{color:rgba(255,255,255,.5);white-space:nowrap}
.meta dd{margin:0}

/* Numbered step cards with a screenshot slot (delete-account.html) */
ol.steps{list-style:none;padding:0;display:grid;gap:1.5rem;counter-reset:step}
ol.steps > li{counter-increment:step;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:1rem;overflow:hidden}
.step-head{display:flex;gap:1rem;padding:1.25rem 1.35rem}
.step-head::before{
  content:counter(step,decimal-leading-zero);font-family:var(--display);font-size:1.6rem;line-height:1;
  color:var(--night);background:var(--orange);border-radius:.6rem;padding:.45rem .6rem;height:max-content;
}
.step-head p{font-size:.95rem}
.shot{margin:0;border-top:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.22);padding:1.1rem;display:flex;flex-direction:column;align-items:center}
.shot-media{position:relative;width:180px;max-width:100%}
.shot-media img{display:block;width:100%;height:auto;border-radius:.75rem;box-shadow:0 8px 24px rgba(0,0,0,.35)}
figcaption{margin-top:.7rem;font-size:.8rem;color:rgba(255,255,255,.55);text-align:center}

/* Decorative scroll-down cue over screenshot 2. The instruction to scroll is
   already in the heading, body copy and figcaption, so this is aria-hidden —
   it reinforces, it doesn't carry meaning on its own. */
.scroll-cue{
  position:absolute;left:50%;bottom:.5rem;transform:translateX(-50%);
  width:1.7rem;height:1.7rem;color:var(--orange);
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));
}
.scroll-cue svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue{animation:scroll-cue-bounce 1.6s ease-in-out infinite}
}
@keyframes scroll-cue-bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* Side-by-side layout once there is room: the portrait screenshot sits next
   to its explanation instead of below it in a tall, mostly-empty strip. */
@media (min-width:40rem){
  ol.steps > li{display:grid;grid-template-columns:1fr 13rem;align-items:stretch}
  .step-head{padding:1.5rem}
  .shot{border-top:0;border-left:1px solid rgba(255,255,255,.1);justify-content:center}
}

.split{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
ul.ticks{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.45rem;font-size:.92rem;color:rgba(255,255,255,.8)}
ul.ticks li{padding-left:1.4rem;position:relative}
ul.ticks li::before{content:"✓";position:absolute;left:0;color:var(--lime)}
ul.ticks.crosses li::before{content:"✕";color:var(--red)}
.warn{border-color:rgba(255,77,77,.45);background:rgba(255,77,77,.1)}
.warn h3{color:#ffb3b3}
.note{font-size:.85rem;color:rgba(255,255,255,.55)}
/* Fields that still need verified data before publication. */
.placeholder-field{color:var(--lime)}

table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.6rem}
th,td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid rgba(255,255,255,.12);vertical-align:top}
th{color:rgba(255,255,255,.55);font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
td:first-child{color:#fff}
.table-scroll{overflow-x:auto}

/* Definition lists inside legal cards (Impressum) */
dl.legal{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1rem;font-size:.9rem;margin-top:.6rem}
dl.legal dt{color:rgba(255,255,255,.5)}
dl.legal dd{margin:0}
@media (max-width:32rem){
  dl.legal,.meta{grid-template-columns:1fr;gap:.2rem}
  dl.legal dt,.meta dt{margin-top:.6rem}
}

.toc{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;font-size:.85rem}
.toc a{display:inline-block;padding:.4rem .8rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;text-decoration:none;color:rgba(255,255,255,.8)}
.toc a:hover{border-color:var(--orange);color:#fff}

.btn{
  display:inline-flex;min-height:3.25rem;align-items:center;justify-content:center;gap:.6rem;
  padding:.85rem 1.5rem;border-radius:999px;background:var(--orange);color:var(--night);
  font-weight:700;font-size:.85rem;text-decoration:none;box-shadow:0 10px 28px rgba(255,90,31,.28);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(255,90,31,.36)}
footer{margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:rgba(255,255,255,.45)}
footer a{color:rgba(255,255,255,.7)}