/* ==========================================================================
   Rota Suíça — Design-System
   Farben + Fonts direkt aus dem Buch-PDF (delivery/build/book.html :root).
   Mobile-first. Hell/warm, editorial-premium, seriös-aspirativ.
   ========================================================================== */

/* ---------- Fonts (selfhosted WOFF2 aus dem Buch) ---------- */
@font-face{font-family:'Montserrat';src:url('/fonts/Montserrat.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('/fonts/Inter.woff2') format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Source Serif 4';src:url('/fonts/SourceSerif4.woff2') format('woff2');font-weight:200 900;font-display:swap;font-style:normal}
@font-face{font-family:'Source Serif 4';src:url('/fonts/SourceSerif4-Italic.woff2') format('woff2');font-weight:200 900;font-display:swap;font-style:italic}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --accent:#0F9B4B;        /* Brasilien-Grün, Primäraktion */
  --accent-deep:#0C7A3B;
  --gold:#F2C21B;          /* Premium-Akzent, Buch, Badges */
  --gold-deep:#C99A08;
  --swiss:#D8232A;         /* Alarm, Mythos, Highlight */
  --swiss-deep:#B01B21;
  --navy:#1B2A3A;          /* dunkler Anker, Footer */
  --navy-soft:#2A3C50;
  --ink:#1C1C1C;
  --ink-soft:#33424F;
  --muted:#5A6B7B;
  --paper:#FCFBF8;
  --paper-2:#F7F5EF;       /* leicht abgesetzte Fläche */
  --rule:#E2DDD2;
  --rule-soft:#ECE8DE;
  --code-bg:#F4F2EC;
  --card:#FFFFFF;

  --font-head:'Montserrat',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;

  --radius:12px;
  --radius-sm:8px;
  --shadow:0 6px 24px rgba(27,42,58,.08);
  --shadow-lg:0 18px 48px rgba(27,42,58,.14);
  --wrap:1120px;
  --measure:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:1.02rem;line-height:1.72;
  font-feature-settings:'kern' 1,'liga' 1;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}

/* ---------- Typo ---------- */
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.18;font-weight:800;letter-spacing:-.01em;margin:0 0 .6em}
h1{font-size:clamp(1.85rem,5vw,2.7rem)}
h2{font-size:clamp(1.4rem,3.4vw,1.95rem);margin-top:2.2rem}
h3{font-size:clamp(1.15rem,2.6vw,1.4rem);margin-top:1.6rem;font-weight:700}
p{margin:0 0 1.05rem}
strong{font-weight:700;color:var(--ink)}
small{font-size:.82rem;color:var(--muted)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--accent-deep)}
.lead{font-size:1.18rem;line-height:1.6;color:var(--ink-soft)}
.muted{color:var(--muted)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:1.15rem}
.section{padding-block:clamp(2.5rem,6vw,4.5rem)}
.section--paper2{background:var(--paper-2);border-block:1px solid var(--rule-soft)}
.grid{display:grid;gap:1.15rem}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:700;font-size:.98rem;
  padding:.8rem 1.5rem;border-radius:var(--radius-sm);border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .12s ease,background .15s,box-shadow .15s;line-height:1}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(15,155,75,.28)}
.btn-primary:hover{background:var(--accent-deep);color:#fff}
.btn-gold{background:var(--gold);color:var(--navy);box-shadow:0 4px 14px rgba(242,194,27,.35)}
.btn-gold:hover{background:var(--gold-deep);color:var(--navy)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-deep)}
.btn-lg{padding:1rem 1.9rem;font-size:1.05rem}

/* ---------- Header / Nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(252,251,248,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:64px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:800;font-size:1.2rem;color:var(--navy);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand img{height:34px;width:auto}
.brand .swiss-dot{color:var(--swiss)}
.nav-links{display:none;align-items:center;gap:.35rem;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink-soft);font-weight:600;font-size:.94rem;padding:.5rem .7rem;border-radius:6px}
.nav-links a:hover{color:var(--accent-deep);background:var(--paper-2);text-decoration:none}
.nav-cta{display:none}
.nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.5rem}
.nav-toggle span{width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.mobile-menu{display:none;flex-direction:column;padding:.5rem 1.15rem 1.2rem;border-top:1px solid var(--rule-soft);background:var(--paper)}
.mobile-menu a{padding:.7rem .3rem;border-bottom:1px solid var(--rule-soft);color:var(--ink-soft);font-weight:600}
.mobile-menu .btn{margin-top:.9rem;justify-content:center}
.nav-toggle.open+.mobile-menu,.mobile-menu.open{display:flex}

/* Mega-Menü (Desktop, CSS-hover) */
.has-mega{position:relative}
.mega{position:absolute;top:100%;left:0;min-width:520px;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:1.1rem;display:none;grid-template-columns:1fr 1fr;gap:.4rem 1.4rem}
.has-mega:hover .mega,.has-mega:focus-within .mega{display:grid}
.mega a{display:block;padding:.5rem .55rem;border-radius:6px;color:var(--ink-soft);font-size:.9rem;font-weight:600}
.mega a small{display:block;font-weight:400;color:var(--muted);font-size:.78rem}
.mega a:hover{background:var(--paper-2);color:var(--accent-deep);text-decoration:none}
.mega-hot{color:var(--swiss)!important}

@media(min-width:900px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-toggle{display:none}
}

/* ---------- Hero ---------- */
.hero{background:
  radial-gradient(1200px 500px at 80% -10%,rgba(242,194,27,.16),transparent 60%),
  radial-gradient(900px 500px at 0% 0%,rgba(15,155,75,.10),transparent 55%),
  var(--paper);
  border-bottom:1px solid var(--rule)}
.hero-grid{display:grid;gap:2rem;align-items:center;padding-block:clamp(2.2rem,6vw,4rem)}
@media(min-width:920px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hero h1{margin-bottom:.5rem}
.hero .gold-underline{background:linear-gradient(transparent 62%,rgba(242,194,27,.55) 0);padding:0 .1em}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.hero-book{justify-self:center;max-width:320px;border-radius:10px;box-shadow:var(--shadow-lg);transform:rotate(1.2deg)}
.trust-row{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.6rem;font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.trust-row b{color:var(--navy)}

/* ---------- Cards ---------- */
.card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow);transition:transform .14s,box-shadow .14s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card h3{margin-top:0}
.card-cat{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-deep);font-weight:600}
.article-card a.card-title{color:var(--navy);font-family:var(--font-head);font-weight:700;font-size:1.08rem;line-height:1.3;display:block;margin:.3rem 0 .5rem}
.article-card p{font-size:.92rem;color:var(--ink-soft);margin:0}
.article-card .meta{margin-top:.7rem;font-size:.78rem;color:var(--muted);font-family:var(--font-mono)}

/* ---------- Article ---------- */
.article-head{padding-block:clamp(1.6rem,4vw,2.6rem)}
.breadcrumb{font-family:var(--font-mono);font-size:.76rem;color:var(--muted);margin-bottom:.8rem}
.breadcrumb a{color:var(--muted)}
.article-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.9rem;font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.article-body{max-width:var(--measure);margin-inline:auto}
.article-body>*{max-width:100%}
.article-body h2{scroll-margin-top:80px}
.article-body img{border-radius:var(--radius-sm);margin:1.5rem auto;box-shadow:var(--shadow)}
.article-body figure{margin:1.6rem 0}
.article-body figcaption{font-size:.82rem;color:var(--muted);text-align:center;margin-top:.5rem;font-family:var(--font-mono)}
.article-body ul,.article-body ol{padding-left:1.3rem}
.article-body li{margin:.4rem 0}
.article-body a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.article-body blockquote{border-left:3px solid var(--gold);background:var(--paper-2);margin:1.5rem 0;padding:1rem 1.2rem;
  font-family:var(--font-serif);font-size:1.1rem;color:var(--ink-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.article-body blockquote p:last-child{margin-bottom:0}
.article-body code{font-family:var(--font-mono);font-size:.88em;background:var(--code-bg);padding:.12em .4em;border-radius:4px}
.article-body pre{background:var(--code-bg);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:1rem;overflow:auto}
.article-body table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem}
.article-body th,.article-body td{border:1px solid var(--rule);padding:.6rem .7rem;text-align:left}
.article-body th{background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:600}
.article-body tr:nth-child(even) td{background:var(--paper-2)}

/* TOC */
.toc{background:var(--paper-2);border:1px solid var(--rule-soft);border-radius:var(--radius);padding:1rem 1.2rem;margin:1.5rem 0;font-size:.9rem}
.toc-title{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--navy);margin-bottom:.5rem}
.toc ul{list-style:none;padding-left:0;margin:0}
.toc li{margin:.25rem 0}
.toc ul ul{padding-left:1rem}

/* Fonte-Anker */
.fonte{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}

/* ---------- Shortcode: Callout / Keypoint / Mythos ---------- */
.callout{border:1px solid var(--rule);border-left:4px solid var(--accent);background:var(--card);border-radius:var(--radius-sm);padding:1rem 1.2rem;margin:1.5rem 0}
.callout--warn{border-left-color:var(--swiss)}
.callout--gold{border-left-color:var(--gold)}
.callout-title{font-family:var(--font-head);font-weight:700;color:var(--navy);margin-bottom:.3rem;display:flex;align-items:center;gap:.4rem}
.callout p:last-child{margin-bottom:0}
.keypoint{background:linear-gradient(180deg,rgba(15,155,75,.06),transparent);border:1px solid var(--rule);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.5rem 0}
.keypoint .eyebrow{color:var(--accent-deep)}
.keypoint strong{color:var(--navy)}
.mito{border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin:1.5rem 0}
.mito-head{background:rgba(216,35,42,.08);color:var(--swiss-deep);font-family:var(--font-head);font-weight:700;padding:.7rem 1.1rem;border-bottom:1px solid var(--rule)}
.mito-real{padding:.9rem 1.1rem}
.mito-real b{color:var(--accent-deep)}

/* Stats */
.stats{display:grid;gap:1rem;margin:1.6rem 0}
@media(min-width:560px){.stats-3{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:1.1rem;text-align:center}
.stat-num{font-family:var(--font-head);font-weight:800;font-size:2rem;color:var(--accent-deep);line-height:1}
.stat-label{font-size:.82rem;color:var(--muted);margin-top:.35rem}

/* Steps */
.steps{counter-reset:step;margin:1.6rem 0;padding:0;list-style:none}
.steps li{position:relative;padding:.2rem 0 1.1rem 2.6rem;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:1.8rem;height:1.8rem;background:var(--accent);color:#fff;
  border-radius:50%;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.9rem}
.steps li:not(:last-child)::after{content:'';position:absolute;left:.88rem;top:1.9rem;bottom:0;width:2px;background:var(--rule)}

/* Accordion / FAQ */
.faq{margin:1.6rem 0}
.faq details{border:1px solid var(--rule);border-radius:var(--radius-sm);margin-bottom:.6rem;background:var(--card);overflow:hidden}
.faq summary{cursor:pointer;padding:.9rem 1.1rem;font-family:var(--font-head);font-weight:600;color:var(--navy);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:1.1rem;color:var(--accent);font-weight:700;font-size:1.2rem}
.faq details[open] summary::after{content:'\2212'}
.faq details[open] summary{border-bottom:1px solid var(--rule-soft)}
.faq-body{padding:.9rem 1.1rem}
.faq-body p:last-child{margin-bottom:0}

/* Tabs */
.tabs{margin:1.6rem 0}
.tab-btns{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--rule);margin-bottom:1rem}
.tab-btn{background:none;border:0;border-bottom:2px solid transparent;padding:.6rem .8rem;font-family:var(--font-head);font-weight:600;color:var(--muted);cursor:pointer}
.tab-btn.active{color:var(--accent-deep);border-bottom-color:var(--accent)}
.tab-pane{display:none}
.tab-pane.active{display:block}

/* ---------- Buch-CTA (livro-cta), abgeleitet vom stoff-cta-Muster ---------- */
.livro-cta{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center;margin:2rem 0;padding:1.4rem;
  border:1px solid var(--rule);border-radius:var(--radius);background:linear-gradient(180deg,#fff, var(--paper-2));box-shadow:var(--shadow)}
.livro-cta-cover{flex-shrink:0;width:132px;border-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg)}
.livro-cta-cover img{width:100%;aspect-ratio:170/240;object-fit:cover;display:block}
.livro-cta-body{flex:1;min-width:0}
.livro-cta .eyebrow{color:var(--gold-deep)}
.livro-cta-title{display:block;font-family:var(--font-head);font-weight:800;font-size:1.25rem;line-height:1.2;color:var(--navy);margin:.35rem 0 .5rem}
.livro-cta-text{font-size:.94rem;line-height:1.6;color:var(--ink-soft);margin:0 0 1rem}
.livro-cta-meta{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);margin:0 0 1rem}
@media(min-width:600px){
  .livro-cta{flex-direction:row;text-align:left;gap:1.5rem;padding:1.5rem 1.8rem;align-items:center}
}

/* ---------- Interactive: Diagnóstico / Rechner / Checklist ---------- */
.tool-card{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin:1.8rem 0}
.tool-card h3{margin-top:0}
.quiz-q{margin-bottom:1.1rem}
.quiz-q .q{font-family:var(--font-head);font-weight:700;color:var(--navy);margin-bottom:.6rem}
.quiz-opts{display:grid;gap:.5rem}
.quiz-opt{display:flex;align-items:center;gap:.6rem;border:1px solid var(--rule);border-radius:var(--radius-sm);padding:.7rem .9rem;cursor:pointer;background:var(--paper);transition:.12s}
.quiz-opt:hover{border-color:var(--accent)}
.quiz-opt input{accent-color:var(--accent)}
.quiz-opt.sel{border-color:var(--accent);background:rgba(15,155,75,.06)}
.quiz-result{display:none;border-top:1px solid var(--rule);margin-top:1.2rem;padding-top:1.2rem}
.quiz-result.show{display:block}
.rota-badge{display:inline-block;font-family:var(--font-mono);font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  background:rgba(15,155,75,.12);color:var(--accent-deep);padding:.25rem .6rem;border-radius:20px}
.calc-field{margin-bottom:.9rem}
.calc-field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.3rem;color:var(--navy)}
.calc-field select,.calc-field input{width:100%;padding:.6rem .7rem;border:1px solid var(--rule);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.95rem;background:var(--paper)}
.calc-out{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:1rem;margin-top:1rem;font-family:var(--font-mono);font-size:.9rem}
.calc-out b{color:var(--accent-deep);font-size:1.1rem}
.check-list{list-style:none;padding:0;margin:1rem 0}
.check-list li{display:flex;align-items:flex-start;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--rule-soft)}
.check-list input{margin-top:.25rem;accent-color:var(--accent);width:1.1rem;height:1.1rem;flex-shrink:0}
.check-list label{cursor:pointer;font-size:.95rem}
.check-list li.done label{color:var(--muted);text-decoration:line-through}

/* ---------- Compare table ---------- */
.compare{overflow-x:auto;margin:1.6rem 0}
.compare table{min-width:520px}

/* ---------- Email capture ---------- */
.optin{background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.6rem;margin:2rem 0}
.optin h3{color:#fff}
.optin p{color:rgba(255,255,255,.82)}
.optin form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}
.optin input[type=email]{flex:1;min-width:200px;padding:.8rem 1rem;border:0;border-radius:var(--radius-sm);font-size:1rem}

/* ---------- Landing (livro) ---------- */
.price-tag{font-family:var(--font-head);font-weight:800;color:var(--navy)}
.price-tag .big{font-size:2.6rem;color:var(--accent-deep)}
.buy-box{background:var(--card);border:2px solid var(--gold);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-lg)}
.guarantee{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);margin-top:.8rem;text-align:center}
.checklist-buy{list-style:none;padding:0;margin:1rem 0}
.checklist-buy li{padding:.4rem 0 .4rem 1.7rem;position:relative}
.checklist-buy li::before{content:'';position:absolute;left:0;top:.65rem;width:12px;height:7px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg)}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:rgba(255,255,255,.75);padding-block:2.8rem 1.6rem;margin-top:3rem}
.site-footer a{color:rgba(255,255,255,.75)}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:1.6rem}
@media(min-width:700px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
.footer-brand{font-family:var(--font-head);font-weight:800;font-size:1.2rem;color:#fff}
.footer-col h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;font-family:var(--font-mono);font-weight:600;margin-bottom:.7rem}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin:.35rem 0;font-size:.9rem}
.footer-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;font-size:.78rem;color:rgba(255,255,255,.55);font-family:var(--font-mono)}
.footer-disclaimer{font-size:.76rem;line-height:1.5;color:rgba(255,255,255,.55);margin-top:.8rem}

/* ---------- Utilities / a11y ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:100}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.pill{display:inline-block;font-family:var(--font-mono);font-size:.72rem;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-soft);padding:.2rem .6rem;border-radius:20px}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}