.skip{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--bordeaux);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
/* Zweiter Horizont – gemeinsames Stylesheet */
:root{
  --bordeaux:#7D1F2E; --bordeaux-d:#5E1622; --terra:#BF5A3A;
  --beige:#D9C0AC; --beige-l:#EFE3D7; --cream:#FAF6F0;
  --ink:#33261F; --grey:#8A7A6E; --line:#E2D3C4; --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--cream);color:var(--ink);
  font-family:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
  font-size:18px;line-height:1.65}
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,serif;color:var(--bordeaux)}
a{color:var(--bordeaux)}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.wide{max-width:980px;margin:0 auto;padding:0 22px}

/* Header */
header.site{background:var(--cream);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50}
header.site .inner{max-width:1100px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:12px}
.logo{width:88px;height:54px;flex:none}
.wordmark{font-family:"Fraunces",Georgia,serif;font-weight:700;
  font-size:1.7rem;letter-spacing:-.015em;color:var(--ink);text-decoration:none;white-space:nowrap}
header.site nav{margin-left:auto;display:flex;gap:4px;align-items:center}
header.site nav a{position:relative;padding:10px 15px;text-decoration:none;font-weight:600;
  font-size:.97rem;color:var(--ink);border-radius:9px}
header.site nav a:not(.cta)::after{content:"";position:absolute;left:15px;right:15px;bottom:6px;
  height:2px;background:var(--terra);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.22,1,.36,1)}
header.site nav a:not(.cta):hover::after{transform:scaleX(1)}
header.site nav a.cta{background:var(--bordeaux);color:var(--cream);padding:12px 22px;
  border-radius:99px;margin-left:10px;
  transition:background .3s,transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
header.site nav a.cta:hover{background:var(--terra);transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(192,90,62,.35)}
/* Mobile-Navigation */
.burger{display:none;flex:none;width:48px;height:48px;border:1.5px solid var(--tan);
  background:rgba(253,251,247,.7);border-radius:12px;cursor:pointer;
  align-items:center;justify-content:center;margin-left:auto;padding:0}
.burger span{display:block;width:22px;height:2px;background:var(--bordeaux);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;
  background:var(--bordeaux);transition:transform .3s ease,top .3s ease}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media(max-width:860px){
  .burger{display:flex}
  header.site nav{position:fixed;left:0;right:0;top:0;margin:0;padding:84px 18px 22px;
    background:rgba(253,251,247,.98);backdrop-filter:blur(16px);
    flex-direction:column;align-items:stretch;gap:0;
    box-shadow:0 14px 40px rgba(74,28,44,.14);border-bottom:1px solid var(--line);
    transform:translateY(-102%);transition:transform .42s cubic-bezier(.22,1,.36,1);z-index:-1}
  header.site nav.open{transform:translateY(0)}
  header.site nav a{display:flex;align-items:center;min-height:56px;font-size:19px;
    padding:10px 14px;border-bottom:1px solid var(--line)}
  header.site nav a:not(.cta)::after{display:none}
  header.site nav a.cta{justify-content:center;margin:16px 0 0;min-height:58px;border-bottom:none}
}

/* ============ Mobile-Feinschliff ============ */
@media(max-width:760px){
  body{font-size:17px}
  .wrap,.wide{padding:0 18px}
  h1.title{font-size:clamp(1.8rem,7.5vw,2.2rem)}
  .standfirst{font-size:1.05rem}
  article h2{font-size:1.32rem;margin:30px 0 10px}
  article h3{font-size:1.08rem}
  article p,article li{font-size:17px}
  figure.hero img{height:min(52vw,240px)}
  figure.hero figcaption{font-size:.76rem;padding:8px 12px}
  .box{padding:16px 18px;margin:20px 0}
  .factrow{gap:10px}
  .fact{flex:1 1 100%;padding:14px}
  .ctabox{padding:26px 22px;margin:32px 0}
  .ctabox h2{font-size:1.25rem}
  .btn{min-height:54px;padding:0 22px;font-size:1rem;width:100%;margin-bottom:10px}
  .btn.ghost{margin-left:0}
  .app{padding:22px 18px;border-radius:14px}
  .qcard{padding:18px 16px}
  .qcard .opts{gap:8px}
  .opt{flex:1;min-width:0;text-align:center;padding:12px 10px;min-height:50px}
  .result{padding:18px 16px}
  footer.site{padding:26px 0 34px}
  header.site .inner{padding:10px 16px}
  .logo{width:64px;height:39px}
  .wordmark{font-size:1.3rem}
}
/* Sauberes Antippen */
a,button,input,select{-webkit-tap-highlight-color:rgba(192,90,62,.16)}
input,select,textarea{font-size:16px}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px;border-radius:6px}

/* Artikel */
.crumb{font-size:.85rem;color:var(--grey);margin:26px 0 10px}
.crumb a{color:var(--grey);text-decoration:none}
.tag{display:inline-block;background:var(--beige-l);color:var(--bordeaux);
  font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:14px}
h1.title{font-size:clamp(1.9rem,4.5vw,2.7rem);line-height:1.15;margin-bottom:14px}
.standfirst{font-size:1.15rem;color:var(--ink);font-weight:600;margin-bottom:18px}
.meta{color:var(--grey);font-size:.9rem;margin-bottom:26px}
figure.hero{margin:0 0 34px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
figure.hero img{width:100%;height:min(46vw,420px);object-fit:cover;display:block}
figure.hero figcaption{font-size:.78rem;color:var(--grey);padding:8px 14px;background:var(--beige-l)}
article h2{font-size:1.5rem;margin:38px 0 12px}
article h3{font-size:1.15rem;margin:26px 0 8px;font-family:"Source Sans 3",sans-serif;color:var(--bordeaux)}
article p{margin-bottom:16px}
article ul,article ol{margin:0 0 16px 22px}
article li{margin-bottom:8px}
.box{background:var(--beige-l);border-left:4px solid var(--terra);
  border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0}
.box b:first-child,.box .boxtitle{color:var(--bordeaux)}
.factrow{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0}
.fact{flex:1 1 180px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:16px;text-align:center}
.fact .num{font-family:"Fraunces",serif;font-weight:700;font-size:1.7rem;color:var(--bordeaux)}
.fact .lbl{font-size:.82rem;color:var(--grey)}

/* CTA */
.ctabox{background:var(--bordeaux);color:#fff;border-radius:16px;
  padding:30px;margin:42px 0}
.ctabox h2{color:#fff;margin:0 0 8px;font-size:1.4rem}
.ctabox p{color:var(--beige);margin-bottom:18px}
.btn{display:inline-block;background:var(--terra);color:#fff;text-decoration:none;
  font-weight:700;padding:13px 26px;border-radius:10px;border:none;
  font-size:1rem;cursor:pointer}
.btn.ghost{background:transparent;border:1.5px solid var(--beige);margin-left:10px}
.btn.big{font-size:1.05rem;padding:15px 30px}

/* Footer */
footer.site{border-top:1px solid var(--line);margin-top:60px;
  padding:30px 0 40px;color:var(--grey);font-size:.85rem}
footer.site .inner{max-width:1100px;margin:0 auto;padding:0 22px}
footer.site a{color:var(--grey)}
.disclaimer{margin-top:10px;font-size:.78rem}

/* Formulare / Apps */
.app{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:30px;margin:30px 0}
.app label{display:block;font-weight:600;margin:18px 0 6px}
.app .hint{font-size:.82rem;color:var(--grey);font-weight:400}
.app input[type=number],.app input[type=text]{width:100%;padding:12px 14px;
  font-size:1.05rem;border:1.5px solid var(--line);border-radius:10px;
  background:var(--cream);color:var(--ink)}
.app input:focus{outline:2px solid var(--terra)}
.result{background:var(--beige-l);border-radius:12px;padding:22px;margin-top:24px}
.result .big{font-family:"Fraunces",serif;font-size:2rem;font-weight:700;color:var(--bordeaux)}
.qcard{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px;margin:14px 0}
.qcard .q{font-weight:700;margin-bottom:12px}
.qcard .opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{border:1.5px solid var(--line);background:var(--cream);border-radius:10px;
  padding:10px 18px;cursor:pointer;font-size:.95rem;font-weight:600;color:var(--ink)}
.opt.sel{background:var(--bordeaux);color:#fff;border-color:var(--bordeaux)}
.progress{height:8px;background:var(--beige-l);border-radius:999px;margin:18px 0;overflow:hidden}
.progress i{display:block;height:100%;background:var(--terra);border-radius:999px;transition:width .3s}

/* Kompass-Logo */
.rose{transform-box:fill-box;transform-origin:center;
  animation:zhSettle 4.5s cubic-bezier(.34,1.25,.4,1) .4s both}
@keyframes zhSettle{0%{transform:rotate(-140deg)}45%{transform:rotate(22deg)}
  68%{transform:rotate(-10deg)}84%{transform:rotate(4deg)}100%{transform:rotate(0deg)}}
a:hover>svg .rose,.brand:hover .rose{animation:zhSettleH 3.6s ease-in-out both}
@keyframes zhSettleH{0%{transform:rotate(0)}28%{transform:rotate(-32deg)}
  58%{transform:rotate(11deg)}82%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@media(prefers-reduced-motion:reduce){.rose{animation:none!important}}

/* Marken-Wortmarke (semantisch neutral statt <b>) */
.bn{font-weight:700}
/* Teilen-Leiste */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:38px 0 8px;
  padding-top:20px;border-top:1px solid var(--line)}
.share .lbl{font-size:15px;color:var(--grey);margin-right:4px}
.share a,.share button{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14.5px;
  font-weight:600;text-decoration:none;cursor:pointer;color:var(--bordeaux);background:transparent;
  border:1.5px solid var(--line);border-radius:99px;padding:8px 15px;line-height:1;
  transition:border-color .25s,background .25s,color .25s}
.share a:hover,.share button:hover{border-color:var(--bordeaux);background:rgba(125,31,46,.06)}
.share svg{width:15px;height:15px;fill:currentColor}
/* Erklärtexte unter den Web-Apps */
.erklaer h2{font-family:"Fraunces",Georgia,serif;font-size:1.3rem;font-weight:700;
  color:var(--bordeaux);margin:30px 0 10px;line-height:1.25}
.erklaer h2:first-of-type{margin-top:0}
.erklaer p{margin-bottom:14px;line-height:1.75}
.erklaer a{color:var(--bordeaux);text-decoration:underline;text-underline-offset:3px}