/* ═══════════════════════════════════════════════════════════════
   ORTGIES — Mobil-Ebene (Editorial)
   Wird nur bis 760 px geladen (media-Attribut am <link>).
   Gleicher Inhalt wie am Desktop, nur enger gesetzt:
   Haarlinien statt Karten, ruhige Typografie, Rechner als
   schmale Slides. Keine feste Leiste unten. Desktop bleibt unberührt.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --gut:20px;
}

html{scroll-padding-top:64px;-webkit-text-size-adjust:100%;}
body{font-size:16.5px;line-height:1.55;-webkit-tap-highlight-color:transparent;}
a,button,summary,label{-webkit-tap-highlight-color:transparent;}
.btn:active,.chip:active,.opt label:active{transform:scale(.97);}

/* ─── Kopfleiste ─── */
.hdr-in{height:58px;}
.hdr-in:has(.hdr-call) .btn{display:none;}
.hdr .btn{padding:9px 15px;font-size:13.5px;}
.hdr-call{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);color:var(--accent);
}
.hdr-call:active{transform:scale(.94);}
.hdr-call svg{width:16px;height:16px;}
.brand b{font-size:16px;}

/* ─── Hero ─── */
.bh-in{padding-top:44px;padding-bottom:30px;}
.bh-eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:18px;}
.bh-eyebrow .eb-brand{display:none;}  /* Marke steht bereits in der Kopfzeile */
.brandhero h1{font-size:clamp(38px,11vw,46px);line-height:1.02;letter-spacing:-.034em;max-width:10ch;}
.bh-lead{font-size:16.5px;line-height:1.5;margin-top:18px;}
.bh-cta{flex-direction:column;align-items:flex-start;gap:18px;margin-top:28px;}
.bh-cta .btn{justify-content:center;width:100%;padding:15px 20px;font-size:16px;}
.bh-facts dd{font-size:14px;}
.bh-facts div{padding:14px 0 16px;}

/* ─── Abschnitte ─── */
.sec{padding-block:52px;}
.sec-h{margin-bottom:26px;}
.sec-h h2{font-size:31px;line-height:1.1;letter-spacing:-.026em;max-width:none;}
.sec-h .sec-sub{font-size:24px;}
.sec-h p{font-size:16.5px;line-height:1.5;margin-top:12px;}
.eyebrow-k{margin-bottom:24px;padding-top:14px;font-size:10.5px;}

/* ─── So arbeite ich ─── */
.how{gap:0;}
.how li{padding:18px 0 20px;gap:6px;}
.how h3{font-size:19px;}
.how p{font-size:15.5px;line-height:1.55;}

/* ─── Person ─── */
.person{gap:22px;}
.person h2{font-size:31px;}
.person dl{grid-template-columns:96px 1fr;font-size:15px;}
.person-text{font-size:16.5px;line-height:1.55;}
.person-text p:first-child{font-size:20px;line-height:1.42;}

/* ─── Themen: Haarlinien-Zeilen, aufklappbar ─── */
.field{padding:16px 0 18px;gap:6px;}
#themen .field{padding:0;}
.field h3{font-size:18px;}
.field p{font-size:15.5px;line-height:1.55;}
.field p a{color:var(--accent);}
#themen .field h3{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 0;cursor:pointer;
}
#themen .field h3::after{
  content:'+';flex:none;font-family:var(--mono);font-size:18px;font-weight:400;line-height:1;color:var(--faint);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s;
}
#themen .field.open h3::after{transform:rotate(45deg);color:var(--accent);}
#themen .field p{padding:0 0 18px;}
.js-app #themen .field:not(.open) p{display:none;}
.aktuell-tag{margin:0 0 0 10px;display:inline;vertical-align:middle;}
#themen .field h3 .aktuell-tag{margin-right:auto;}

/* ─── Check ─── */
.tool{padding-top:0;padding-bottom:0;gap:34px;}
.chip{padding:9px 15px;font-size:15px;}
.tally{margin-top:24px;padding-top:20px;}
.tally-n{font-size:30px;}
.tool-cta .btn{width:100%;justify-content:center;padding:15px 20px;font-size:16px;}
.disclaim{max-width:none;}
.tool + .sec,#checks{padding-top:52px !important;}
.item{grid-template-columns:1fr;}
.tier-h{margin-bottom:4px;}
.fold .tier-h{padding:14px 0;margin:0;border-top:1px solid var(--line);cursor:pointer;}
.fold .tier-h .bar{background:none;}
.fold .tier-h::after{content:'+';font-family:var(--mono);font-size:18px;line-height:1;color:var(--faint);transition:transform .3s cubic-bezier(.2,.7,.2,1),color .2s;}
.fold.open .tier-h::after{transform:rotate(45deg);color:var(--accent);}
.js-app .fold:not(.open) .list{display:none;}
.results{gap:18px;}
.results .tier3.fold{margin-top:-18px;}
.results .tier3.fold .tier-h{border-bottom:1px solid var(--line);}
.results .tier3.fold.open .tier-h{border-bottom:0;}
.item .n,.tier1 .item .n{font-size:17px;}
.item .w{font-size:15px;}

/* ─── Rechner: schmale Slides ─── */
.checks{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(-1 * var(--gut));padding:0 var(--gut) 4px;
  scroll-padding-inline:var(--gut);scrollbar-width:none;
}
.checks::-webkit-scrollbar{display:none;}
.check{flex:0 0 82%;scroll-snap-align:start;padding-top:16px;}
.check h3{font-size:21px;}
.check p{font-size:15.5px;}
.m-dots{display:flex;align-items:center;gap:16px;margin-top:22px;}
.m-count{flex:none;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint);}
.m-count b{font-weight:500;color:var(--ink);}
.m-bar{flex:1;height:1px;background:var(--line);overflow:hidden;}
.m-bar i{display:block;height:1px;background:var(--accent);transition:transform .35s cubic-bezier(.2,.7,.2,1);}

/* ─── Direkt-Abschluss ─── */
.direkt{grid-template-columns:1fr;gap:14px;padding:22px 0;}
.direkt h3{font-size:22px;}
.direkt p{font-size:15.5px;}
.direkt:hover{padding-left:0;}

/* ─── Fragen & Rechtliches ─── */
.acc summary{padding:17px 0;font-size:17px;line-height:1.35;}
.acc summary .pm{width:24px;height:24px;}
.acc .body p,.faq .body p{font-size:15.5px;line-height:1.6;}

/* ─── Kontakt ─── */
.contact{gap:34px;}
.chan{padding:15px 0;}
.chan:hover{padding-left:0;}
.formcard{padding:22px 18px;}
.formcard h3{font-size:22px;}
.ff input,.ff select,.ff textarea{font-size:16px;padding:13px 14px;}  /* 16 px verhindert iOS-Zoom */
.fsub{flex-direction:column;align-items:stretch;}
.fsub .btn{width:100%;justify-content:center;padding:15px;font-size:16px;}

/* ─── Footer ─── */
.ft{padding:30px 0 40px;}
.ft-in{flex-direction:column;gap:14px;}

/* ─── Unterseiten (Kfz, Orthopädie, Riester …) ─── */
.hero{padding-top:36px;padding-bottom:48px;}
.hero-grid{gap:28px;}
.hero .eyebrow{margin-bottom:16px;font-size:10px;}
.hero h1,.hero h1[class]{font-size:34px;line-height:1.08;letter-spacing:-.03em;max-width:none;}
.hero .lead{font-size:16.5px;line-height:1.5;margin-top:14px;}
.hero .proof{margin-top:20px;}
.hero .proof ul{flex-direction:column;align-items:flex-start;gap:8px;font-size:15px;}
.opt label{padding:9px 14px;font-size:15px;}
.more{font-size:15px;padding:6px 0;}
.benefits{gap:26px;}
.benefit h3{font-size:18px;}
.benefit p{font-size:15.5px;}
.steps li{padding-top:14px;}
.steps h3{font-size:18px;}
.steps p{font-size:15.5px;}
.cta-band{flex-direction:column;align-items:stretch;gap:18px;}
.cta-band h2{font-size:26px;}
.cta-band .btn{justify-content:center;width:100%;padding:15px;font-size:16px;}
.src{font-size:13px;}
.zt th,.zt td{padding:11px 8px;font-size:14px;}
.zt-note{font-size:13px;}
.warn h3{font-size:18px;}
.warn p{font-size:15.5px;}
.exc h3{font-size:18px;}

@media (prefers-reduced-motion:reduce){
  #themen .field h3::after,.fold .tier-h::after,.m-bar i{transition:none;}
}