/* tronccommun.ch – Stylesheet */

/* Schriften lokal (keine Verbindung zu Google) */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2")}

:root{
  --blau:#0067B3; --blau-dunkel:#004F8A; --blau-hell:#EAF3FB; --blau-licht:#8CC4F0;
  --tinte:#14263A; --text:#3B4A59; --grau:#4D5C6B; --linie:#E6E1D8;
  --grund:#FBFAF7; --sand:#F3EFE7; --weiss:#FFFFFF; --dunkel-text:#C8D3DE;
  --radius:14px; --head:"Plus Jakarta Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.6;color:var(--tinte);background:var(--grund)}
img{max-width:100%;display:block}
a{color:var(--blau)} a:hover{color:var(--blau-dunkel)}
:focus-visible{outline:3px solid var(--blau);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--head);letter-spacing:-.02em;margin:0}
p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--weiss);padding:10px 16px;z-index:100;border-radius:8px}
.skip:focus{left:8px}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.section{padding:80px 0;border-top:1px solid var(--linie)}
.section.weiss{background:var(--weiss)}
.section.dunkel{background:var(--tinte);color:var(--weiss);border-top:0}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blau);margin-bottom:12px}
.dunkel .eyebrow{color:var(--blau-licht)}
.h2{font-weight:800;font-size:clamp(28px,3.4vw,40px);line-height:1.15;max-width:780px;margin-bottom:16px}
.lead{color:var(--text);max-width:760px;margin-bottom:40px}
.klein{font-size:14px;color:var(--grau)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:8px;font-weight:600;text-decoration:none;border:1.5px solid transparent;transition:background .15s,color .15s}
.btn-primary{background:var(--blau);color:var(--weiss)} .btn-primary:hover{background:var(--blau-dunkel);color:var(--weiss)}
.btn-outline{background:var(--weiss);color:var(--tinte);border-color:var(--tinte)} .btn-outline:hover{background:var(--tinte);color:var(--weiss)}
.btn-hell{background:var(--weiss);color:var(--tinte)} .btn-hell:hover{background:var(--blau-hell);color:var(--tinte)}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Header */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid var(--linie)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.marke{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;color:var(--tinte);line-height:1.1}
.marke-name{font-family:var(--head);font-weight:800;font-size:22px;letter-spacing:-.02em}
.marke-name span{color:var(--blau)}
.marke-von{display:flex;align-items:center;gap:5px;font-size:12px;line-height:1;color:var(--grau)}
.marke-von img{height:14px;width:auto}
.nav{display:flex;align-items:center;gap:26px;font-size:15px;font-weight:500}
.nav a{color:var(--tinte);text-decoration:none} .nav a:hover{color:var(--blau)}
.nav .btn{color:var(--weiss);min-height:44px;padding:10px 20px}

/* Hero */
.hero{background:var(--weiss)}
.hero .wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:center;padding-top:64px;padding-bottom:72px}
.hero-text{flex:999 1 520px;min-width:0}
.hero h1{font-weight:800;font-size:clamp(34px,4.6vw,54px);line-height:1.1;letter-spacing:-.025em;margin-bottom:20px}
.hero-lead{font-size:19px;color:var(--text);max-width:620px;margin-bottom:32px}
.hero-bild{flex:1 1 360px;min-width:0}
.hero-bild img{width:100%;height:440px;object-fit:cover;object-position:40% 30%;border-radius:16px}
.hero .klein{margin-top:20px}

/* Vertrauensleiste */
.trust{background:var(--sand);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.trust .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 32px;padding-top:28px;padding-bottom:28px}
.trust-item{display:flex;gap:12px;align-items:flex-start}
.trust-item svg{flex:none;margin-top:2px}
.trust-item strong{display:block;font-size:16px}
.trust-item span{font-size:14px;color:var(--grau)}

/* Karten */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:28px}
.karte-titel{font-family:var(--head);font-weight:700;font-size:19px;margin-bottom:10px}
.karte p.text{color:var(--text);font-size:16px}

/* Weg */
.weg{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px}
.weg-box{flex:1 1 170px;background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:22px}
.weg-box small{display:block;font-size:13px;font-weight:600;color:var(--grau);margin-bottom:4px}
.weg-box b{font-family:var(--head);font-weight:700;font-size:19px}
.weg-box.blau{background:var(--blau);border-color:var(--blau);color:var(--weiss)} .weg-box.blau small{color:var(--weiss)}
.weg-box.navy{flex-basis:200px;background:var(--tinte);border-color:var(--tinte);color:var(--weiss)} .weg-box.navy small{color:var(--dunkel-text)}
.weg-op{flex:none;display:flex;align-items:center;font-size:26px;font-weight:700;color:var(--grau)}
.weg-hinweis{margin-top:20px;font-size:15px;color:var(--grau)}

/* Module */
.module{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.modul{border:1px solid var(--linie);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:14px;background:var(--weiss)}
.modul-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.modul-kuerzel{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--blau)}
.modul-std{font-size:14px;font-weight:600;color:var(--grau)}
.modul h3{font-weight:700;font-size:23px}
.modul .beschreibung{font-size:15px;color:var(--text)}
.modul ul{margin:0;padding-left:20px;color:var(--text);font-size:15px;line-height:1.85}
.modul ul small{font-size:14px;color:var(--grau)}
.modul-preis{margin-top:auto;padding-top:16px;border-top:1px solid var(--linie)}
.modul-preis b{font-family:var(--head);font-weight:800;font-size:24px;display:block}
.total{margin-top:24px;background:var(--tinte);color:var(--weiss);border-radius:var(--radius);padding:32px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.total-text{flex:999 1 420px;min-width:0}
.total-text small{display:block;font-size:14px;font-weight:600;color:var(--blau-licht);margin-bottom:6px}
.total-text b{display:block;font-family:var(--head);font-weight:800;font-size:30px;margin-bottom:8px}
.total-text p{color:var(--dunkel-text);font-size:15px}
.fruehbucher{margin-top:16px;background:var(--blau-hell);border-radius:12px;padding:20px 24px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--text)}
.fruehbucher strong{color:var(--tinte)}
.fussnote{margin-top:16px;font-size:13px;color:var(--grau)}

/* Zweispaltig mit Bild */
.split .wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.split-text{flex:999 1 480px;min-width:0}
.split-bild{flex:1 1 360px;min-width:0}
.split-bild img{width:100%;height:400px;object-fit:cover;border-radius:16px}
.formate{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px 28px}
.formate b{display:block;margin-bottom:4px}
.formate p{font-size:15px;color:var(--text)}

/* Kurstabelle (aus kurse.php) */
.kurse-scroll{border:1px solid var(--linie);border-radius:var(--radius);overflow-x:auto;background:var(--weiss)}
table.kurse{width:100%;border-collapse:collapse;font-size:15px}
.kurse th{background:var(--sand);text-align:left;font-weight:600;padding:14px 18px;white-space:nowrap}
.kurse td{padding:14px 18px;border-top:1px solid var(--linie);vertical-align:top}
.kurs-titel{color:var(--tinte);font-weight:600;text-decoration:none} .kurs-titel:hover{color:var(--blau);text-decoration:underline}
.kurs-std{color:var(--grau)}
.kurs-link{font-weight:600;white-space:nowrap}
.kurse td.preis{white-space:nowrap}
.status{color:var(--grau)}
.status-garantie{color:var(--blau);font-weight:600}
.status-warteliste,.status-ausgebucht{color:#8A4B00;font-weight:600}
.kurse-fuss{margin-top:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:14px;color:var(--grau)}
.kurse-fuss p{display:flex;align-items:center;gap:8px}
.kurse-leer{padding:20px;border:1px solid var(--linie);border-radius:var(--radius);background:var(--weiss)}

/* Dunkler Block */
.dunkel .h2{margin-bottom:36px}
.vorteile{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px 32px}
.vorteile b{display:block;font-family:var(--head);font-weight:700;font-size:18px;margin-bottom:6px}
.vorteile p{color:var(--dunkel-text);font-size:15px}
.dunkel .split-bild img{height:380px}

/* Schritte */
.schritte{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.schritte li{border-top:3px solid var(--blau);padding-top:18px}
.schritte .nr{display:block;font-family:var(--head);font-weight:800;font-size:30px;color:var(--blau)}
.schritte b{display:block;margin-bottom:6px}
.schritte p{font-size:15px;color:var(--text)}

/* FAQ */
.faq{max-width:860px}
.faq details{border-top:1px solid var(--linie);padding:20px 0}
.faq details:last-of-type{border-bottom:1px solid var(--linie)}
.faq summary{cursor:pointer;list-style:none;font-weight:600;font-size:18px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--head);font-size:24px;line-height:1;color:var(--blau);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:12px;color:var(--text)}

/* Kontakt */
.kontakt-daten{display:flex;flex-wrap:wrap;gap:24px 48px;font-size:15px;margin-top:32px}
.kontakt-daten small{display:block;color:var(--grau);font-size:15px}
.kontakt-daten b{font-weight:600}

/* Footer */
.footer{background:var(--tinte);color:var(--dunkel-text);font-size:14px}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:40px;padding-bottom:40px}
.footer nav{display:flex;flex-wrap:wrap;gap:24px}
.footer a{color:var(--weiss)}

/* Rechtstexte */
.rechtstext{max-width:780px;padding-top:64px;padding-bottom:80px}
.rechtstext h1{font-weight:800;font-size:clamp(30px,4vw,44px);margin-bottom:24px}
.rechtstext h2{font-size:21px;margin:36px 0 10px}
.rechtstext p,.rechtstext li{color:var(--text)}
.rechtstext p+p{margin-top:12px}
.rechtstext ul{padding-left:20px}

/* Titel: erster Teil nicht fett */
.h1-leicht{font-weight:400}

/* Preise der drei Bereiche auf einer Linie */
.modul-preis .klein{display:block;min-height:3.2em}

/* Fakten «Auf einen Blick» */
.fakten{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(440px,1fr));gap:0 40px;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:8px 28px}
.fakten div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--linie)}
.fakten dt{font-weight:600;font-size:15px}
.fakten dd{margin:0;color:var(--text);font-size:15px}
#familienunternehmen{background:var(--weiss)}

/* Handy-Leiste */
.handy-leiste{display:none}

@media (max-width:860px){
  .nav a:not(.btn){display:none}
}
@media (max-width:720px){
  body{font-size:16px;padding-bottom:76px}
  .fakten{padding:4px 18px;grid-template-columns:1fr}
  .fakten div{grid-template-columns:1fr;gap:2px}
  .modul-preis .klein{min-height:0}
  .section{padding:56px 0}
  .hero .wrap{padding-top:36px;padding-bottom:48px;gap:32px}
  .hero-bild{order:-1}
  .hero-bild img,.split-bild img,.dunkel .split-bild img{height:260px}
  .nav .btn{padding:8px 14px;font-size:14px;white-space:nowrap}
  .weg-op{width:100%;justify-content:center;font-size:22px}
  .total{padding:24px}
  /* Kurstabelle als Karten */
  .kurse-scroll{border:0;background:none;overflow:visible}
  table.kurse,.kurse tbody,.kurse tr,.kurse td{display:block;width:100%}
  .kurse thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kurse tr{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:14px 16px;margin-bottom:12px}
  .kurse td{border:0;padding:4px 0;display:flex;gap:12px}
  .kurse td::before{content:attr(data-label);flex:0 0 96px;color:var(--grau);font-size:14px}
  .kurse td:first-child{display:block;font-size:16px;padding-bottom:8px}
  .kurse td:first-child::before,.kurse td:last-child::before{content:none}
  .kurse td:last-child{padding-top:8px}
  /* fixe Leiste unten */
  .handy-leiste{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--weiss);border-top:1px solid var(--linie);box-shadow:0 -4px 16px rgba(20,38,58,.08)}
  .handy-leiste .btn{flex:1;min-height:48px;padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}