/* Design A „Reel-Stil“ – thailandratgeber.de, ab 12.10.2026.
   Farben, Schrift und Zahlen wie in den Reels (~/tiktok-thailand/schnitt/STIL.md). */
@font-face{font-family:"Montserrat";src:url("/assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --gruen:#0d6b5c;          /* Titelbalken der Reels */
  --gruen-tief:#0a3d34;     /* Auflösungskarte */
  --gruen-nacht:#072822;
  --mint:#56c9ac;           /* Kartenrand der Reels */
  --gold:#F5B83D;           /* hervorgehobene Zahl */
  --gold-tief:#d99a1c;
  --grund:#f3f7f5;
  --karte:#ffffff;
  --text:#11221e;
  --text-2:#41574f;
  --linie:#d3e2dc;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --r:14px;
  --mass:min(1180px, 100% - 2.5rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--grund);color:var(--text);font-family:"Montserrat",system-ui,sans-serif;font-size:1.0625rem;line-height:1.65;font-weight:450;text-rendering:optimizeLegibility}
::selection{background:var(--gold);color:var(--gruen-nacht)}
a{color:var(--gruen);text-underline-offset:.18em;text-decoration-thickness:1.5px}
a:hover{color:var(--gruen-tief)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
img{max-width:100%;height:auto;display:block}
.mass{width:var(--mass);margin-inline:auto}
h1,h2,h3{font-weight:850;line-height:1.12;letter-spacing:-.015em;text-wrap:balance;margin:0}
h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.6rem);margin-bottom:1.1rem}
h3{font-size:1.2rem}
p{margin:0 0 1rem;max-width:68ch}

/* Titelbalken – dieselbe Form wie die Überschrift in den Reels */
.balken{display:inline;background:var(--gruen);color:#fff;padding:.08em .32em;line-height:1.38;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.18em}
.gold{color:var(--gold)}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:3.25rem;padding:.8rem 1.4rem;border-radius:999px;
  font:800 1.02rem/1.2 "Montserrat",sans-serif;text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 160ms ease,box-shadow 160ms ease}
.knopf:active{transform:scale(.97)}
.knopf-gold{background:var(--gold);color:var(--gruen-nacht);box-shadow:0 6px 18px -8px rgba(217,154,28,.8)}
.knopf-gold:hover{background:#ffc552;color:var(--gruen-nacht)}
.knopf-linie{border-color:currentColor;color:var(--gruen)}
.knopf-linie:hover{background:rgba(13,107,92,.08);color:var(--gruen)}
.knopf-hell{border-color:rgba(255,255,255,.55);color:#fff}
.knopf-hell:hover{background:rgba(255,255,255,.1);color:#fff}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:rgba(243,247,245,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.kopf .mass{display:flex;align-items:center;gap:1rem;min-height:4rem}
.marke{display:flex;align-items:center;gap:.55rem;font-weight:850;font-size:1.08rem;color:var(--text);text-decoration:none;letter-spacing:-.01em}
.marke img{width:34px;height:34px}
.marke span{color:var(--gruen)}
.kopf nav{margin-left:auto;display:flex;align-items:center;gap:1.4rem;font-weight:700;font-size:.95rem}
.kopf nav a{color:var(--text-2);text-decoration:none}
.kopf nav a:hover{color:var(--gruen)}
.kopf nav .knopf{min-height:2.6rem;padding:.5rem 1.05rem;font-size:.92rem}
@media (max-width:760px){.kopf nav a:not(.knopf){display:none}}

/* Erster Bildschirm */
.start{padding:clamp(2rem,5vw,4.5rem) 0 clamp(2.5rem,5vw,4rem)}
.start .mass{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.start h1{font-size:clamp(2.1rem,1.2rem + 3.6vw,3.9rem);font-weight:900;letter-spacing:-.025em}
.start .unter{font-size:1.15rem;color:var(--text-2);margin:1.5rem 0 1.4rem;max-width:56ch}
.punkte{list-style:none;padding:0;margin:0 0 1.8rem;display:grid;gap:.6rem}
.punkte li{display:grid;grid-template-columns:1.4rem 1fr;gap:.6rem;align-items:start}
.punkte svg{margin-top:.25rem;color:var(--gruen)}
.handlung{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.klein{font-size:.86rem;color:var(--text-2);line-height:1.5}
.start .klein{margin-top:1rem}
.stand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:.9rem;color:var(--gruen);margin-bottom:1.1rem}
.stand::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(86,201,172,.25)}

/* Reel-Rahmen: so sieht der Kanal aus */
.reel{position:relative;justify-self:center;width:min(100%,400px);aspect-ratio:9/16;border-radius:28px;overflow:hidden;
  box-shadow:0 30px 60px -28px rgba(7,40,34,.55),0 0 0 8px #fff,0 0 0 9px var(--linie);background:var(--gruen-nacht)}
.reel picture img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:zoom 14s ease-out forwards}
.reel picture{position:absolute;inset:0}
@keyframes zoom{to{transform:scale(1)}}
.reel .titel{position:absolute;top:9%;left:7%;right:7%;font:900 clamp(1.25rem,1rem + 1vw,1.7rem)/1.2 "Montserrat",sans-serif;text-align:center}
.reel .aufl{position:absolute;left:8%;right:8%;bottom:16%;background:rgba(10,61,52,.9);border:2px solid var(--mint);border-radius:16px;
  padding:1rem .9rem;text-align:center;color:#fff;backdrop-filter:blur(4px)}
.reel .aufl small{display:block;font-weight:800;letter-spacing:.08em;color:var(--mint);font-size:.72rem;text-transform:uppercase}
.reel .aufl b{display:block;font-size:clamp(1.9rem,1.4rem + 1.6vw,2.5rem);font-weight:900;color:var(--gold);line-height:1.1;margin:.2rem 0}
.reel .aufl span{font-weight:700;font-size:.95rem}
.reel .aufl em{display:block;font-style:normal;font-size:.72rem;opacity:.8;margin-top:.35rem;font-weight:500}
.reel .cover{position:absolute;left:-2%;bottom:-3%;width:31%;transform:rotate(-7deg);border-radius:6px;box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.reel-unter{font-size:.8rem;color:var(--text-2);text-align:center;margin-top:.9rem}

/* Faktenleiste */
.leiste{background:var(--gruen);color:#fff}
.leiste ul{list-style:none;margin:0 auto;padding:1.4rem 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.leiste li{display:flex;flex-direction:column}
.leiste strong{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);font-weight:900;color:var(--gold);line-height:1.1;font-variant-numeric:tabular-nums}
.leiste span{font-weight:600;font-size:.92rem;opacity:.9}

/* Fünf Zahlen – die Auflösungskarte, über die ganze Breite */
.zahlenband{background:var(--gruen-tief);color:#e9f4f0;padding:clamp(3rem,7vw,5.5rem) 0}
.zahlenband h2{color:#fff}
.zahlenband .einleitung{color:#b9d6cd;margin-bottom:2.5rem}
.zeile{display:grid;grid-template-columns:minmax(0,25rem) 1fr;gap:clamp(1rem,3vw,2.5rem);padding:1.8rem 0;border-top:1px solid rgba(86,201,172,.35);align-items:baseline}
.zeile:last-child{border-bottom:1px solid rgba(86,201,172,.35)}
.zeile .wert{font-weight:900;font-size:clamp(1.9rem,1.2rem + 2.2vw,3rem);color:var(--gold);line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.zeile p{margin:0 0 .6rem;color:#e9f4f0}
.kap{display:inline-block;font-weight:800;font-size:.78rem;color:var(--gruen-nacht);background:var(--mint);border-radius:999px;padding:.15rem .65rem}

/* Checkliste */
.checkliste{padding:clamp(3rem,7vw,5rem) 0}
.formfeld{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);background:var(--karte);border-radius:22px;padding:clamp(1.5rem,4vw,3rem);box-shadow:0 18px 40px -26px rgba(7,40,34,.35);border:1px solid var(--linie)}
.formfeld ul{padding-left:1.1rem;margin:0}
label{font-weight:700;display:block;margin-bottom:.35rem}
input[type=email]{width:100%;min-height:3.25rem;border:2px solid var(--linie);border-radius:12px;padding:.7rem .9rem;font:500 1.05rem "Montserrat",sans-serif;color:var(--text);background:#fbfdfc;transition:border-color 160ms ease,box-shadow 160ms ease}
input[type=email]:focus{outline:none;border-color:var(--gruen);box-shadow:0 0 0 4px rgba(13,107,92,.15)}
.einw{display:grid;grid-template-columns:1.3rem 1fr;gap:.6rem;font-weight:500;font-size:.86rem;line-height:1.5;color:var(--text-2);margin:1rem 0 1.2rem}
.einw input{width:1.15rem;height:1.15rem;margin-top:.15rem;accent-color:var(--gruen)}
.hp{position:absolute;left:-9999px}

/* Angebot */
.angebot{padding:0 0 clamp(3rem,7vw,5rem)}
.wahl{display:grid;grid-template-columns:1fr 1.15fr;gap:1.4rem;align-items:stretch;margin-top:1.8rem}
.wahl > div{position:relative;border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-direction:column;background:var(--karte);border:1px solid var(--linie)}
.wahl .paket{background:var(--gruen);color:#fff;border:0;box-shadow:0 24px 50px -26px rgba(7,40,34,.6)}
.wahl .paket a:not(.knopf){color:#fff}
.preis{font-size:clamp(2.4rem,1.8rem + 2vw,3.2rem);font-weight:900;line-height:1;margin:.6rem 0 1rem;letter-spacing:-.02em}
.wahl .paket .preis{color:var(--gold)}
.wahl ul{padding-left:1.1rem;margin:0 0 1.4rem;flex:1}
.wahl li{margin:.35rem 0}
.marke-band{position:absolute;top:-.85rem;left:1.6rem;background:var(--gold);color:var(--gruen-nacht);font-weight:850;font-size:.8rem;padding:.25rem .8rem;border-radius:999px}
.wahl .paket .klein{color:#cde8e0}

/* Ratgeber */
.ratgeber{padding:clamp(3rem,7vw,5rem) 0;background:var(--karte);border-block:1px solid var(--linie)}
.liste{list-style:none;padding:0;margin:1.6rem 0 1.4rem;border-top:1px solid var(--linie)}
.liste a{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:1.2rem .2rem;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--text);transition:background-color 160ms ease}
.liste a:hover{background:#f1f7f4}
.liste b{display:block;font-weight:800;font-size:1.08rem;line-height:1.3}
.liste span{display:block;color:var(--text-2);font-size:.95rem;margin-top:.25rem;max-width:80ch}
.liste svg{color:var(--gruen);transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.liste a:hover svg{transform:translateX(4px)}}

/* Abendbild mit Untertitel wie im Reel */
.abend{position:relative;min-height:clamp(22rem,55vw,34rem);display:grid;place-items:end center;overflow:hidden;color:#fff}
.abend img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.abend::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,40,34,0) 35%,rgba(7,40,34,.85))}
.abend p{position:relative;z-index:1;font:850 clamp(1.3rem,1rem + 1.4vw,2rem)/1.3 "Montserrat",sans-serif;text-align:center;padding:0 1.25rem 2.6rem;max-width:32ch;text-shadow:0 2px 10px rgba(0,0,0,.45)}

/* Autor */
.autor{padding:clamp(3rem,7vw,5rem) 0}
.autor .mass{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.autor img{width:clamp(130px,18vw,210px);height:auto;aspect-ratio:1/1;object-fit:cover;flex:none;border-radius:50%;box-shadow:0 0 0 6px #fff,0 0 0 8px var(--mint)}
div.autor{padding:1.5rem}
div.autor img{width:clamp(110px,18vw,140px)}

/* Kauf */
.kauf{background:var(--gruen-nacht);color:#e6f2ee;padding:clamp(3rem,7vw,5rem) 0}
.kauf .mass{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.kauf img{width:clamp(120px,16vw,180px)}
.kauf h2{color:#fff}
.kauf .vergleich{color:#b9d6cd}
.kauf .preis{color:var(--gold);margin:0 0 .8rem}
.kauf .klein{color:#a9c9bf}

/* Planungs-Check */
.check{padding:clamp(3rem,7vw,5rem) 0}
.check .rahmen{border:2px solid var(--mint);border-radius:22px;padding:clamp(1.5rem,4vw,2.6rem);background:var(--karte);display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.check ul{padding-left:1.1rem;margin:0 0 1rem}
.check .preis{color:var(--gruen);font-size:2.2rem;margin:0 0 .8rem}

footer{background:#0a1e1a;color:#9fbdb4;padding:2.5rem 0 3rem;font-size:.92rem}
footer .mass{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between}
footer a{color:#d6ebe4;text-decoration:none}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}

@media (max-width:900px){
  .start .mass,.formfeld,.wahl,.check .rahmen,.kauf .mass{grid-template-columns:1fr}
  .reel{width:min(100%,340px)}
  .zeile{grid-template-columns:1fr;gap:.4rem}
  .leiste ul{grid-template-columns:repeat(2,1fr)}
  .kauf img{display:none}
}
@media (max-width:900px){.reel .cover{width:24%;left:auto;right:4%;bottom:auto;top:24%;transform:rotate(6deg)}}
@media (max-width:560px){
  .marke{font-size:.98rem}.marke img{width:30px;height:30px}
  .kopf nav .knopf{padding:.45rem .9rem}.kopf nav .knopf .preis-kurz{display:none}
  .stand{align-items:flex-start}.stand::before{flex:none;margin-top:.45rem}
  .autor .mass{grid-template-columns:1fr}
  .handlung .knopf{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .reel picture img{animation:none;transform:none}
  *{scroll-behavior:auto}
}

.ohne-rand{margin:0}
.abstand-oben{margin-top:.8rem}
.abstand-oben-k{margin-top:.6rem}
.fuss-marke{margin:0}
.fuss-marke strong{color:#fff}
.kauf .klein a{color:#fff}

/* =====================================================================
   Brücke: alle übrigen Seiten (Ratgeber, Handbuch, Paket, Checkliste …)
   behalten ihr HTML und bekommen hier das Design A. Nur hell – die Seiten
   werden zu Hause bei Tageslicht oder Lampe gelesen, wie die Reels hell sind.
   ===================================================================== */
:root{--bg:#f3f7f5;--fg:#11221e;--muted:#41574f;--line:#d3e2dc;--card:#fff;--accent:#0d6b5c;--accent-bg:#e4f0eb;--warn-bg:#fdf4e4;--warn-line:#d4a03c;--ok:#1e7a56;--bad:#a4342b}
@media (prefers-color-scheme:dark){:root{--bg:#f3f7f5;--fg:#11221e;--muted:#41574f;--line:#d3e2dc;--card:#fff;--accent:#0d6b5c;--accent-bg:#e4f0eb;--warn-bg:#fdf4e4;--warn-line:#d4a03c;--ok:#1e7a56;--bad:#a4342b}}
html{color-scheme:light}
body{background:var(--grund);color:var(--text);font-family:"Montserrat",system-ui,sans-serif}
h1,h2,h3,h4,.nav-logo,.btn,.buybox-btn,.stickybar-btn,.buybox-price,summary{font-family:"Montserrat",system-ui,sans-serif}
h1{font-weight:900;letter-spacing:-.025em}
h2,h3,h4{font-weight:850;letter-spacing:-.012em}
main a,.crumbs a{color:var(--gruen)}

/* Kopf */
header.nav{position:sticky;top:0;z-index:20;background:rgba(243,247,245,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie);box-shadow:none}
.nav-logo{color:var(--text);font-weight:850;letter-spacing:-.01em}
.nav-logo span{color:var(--gruen)}
.nav-links a{font-family:"Montserrat",sans-serif;font-weight:700;color:var(--text-2)}
.nav-links a:hover{color:var(--gruen)}
.nav-links .nav-cta,a.nav-cta{background:var(--gold)!important;color:var(--gruen-nacht)!important;border:0!important;border-radius:999px;font-weight:800;padding:.5rem 1.05rem}
.nav-links .nav-cta:hover{background:#ffc552!important}

/* Knöpfe */
.btn,.buybox-btn,.stickybar-btn{border-radius:999px!important;font-weight:800;transition:transform 160ms var(--ease-out),background-color 160ms ease,box-shadow 160ms ease}
.btn:active,.buybox-btn:active,.stickybar-btn:active{transform:scale(.97)}
.btn-primary,.buybox-btn,.stickybar-btn{background:var(--gold)!important;color:var(--gruen-nacht)!important;border-color:var(--gold)!important;box-shadow:0 6px 18px -8px rgba(217,154,28,.8)}
.btn-primary:hover,.buybox-btn:hover,.stickybar-btn:hover{background:#ffc552!important;filter:none}
.btn-ghost{background:transparent!important;color:var(--gruen)!important;border:2px solid var(--gruen)!important}
.btn-ghost:hover{background:rgba(13,107,92,.08)!important}

/* Kopfbereich der Unterseiten */
.hero{background:none}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:"Montserrat",sans-serif;font-weight:700;font-size:.88rem;letter-spacing:0;text-transform:none;color:var(--gruen)}
.eyebrow::before{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(86,201,172,.25)}

/* Zahlen und Preise wie in den Reels: groß und fett; Gold nur auf dunklem Grund */
.statstrip strong,.zahl strong,.buybox-price,.vergleich .preis{font-family:"Montserrat",sans-serif;font-weight:900;color:var(--gruen);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vergleich .empfohlen{background:var(--gruen);color:#fff;border:0}
.vergleich .empfohlen .preis{color:var(--gold)}
.vergleich .empfohlen a:not(.btn){color:#fff}
.vergleich .empfohlen .klein{color:#cde8e0}
.vergleich .schild{background:var(--gold);color:var(--gruen-nacht);font-family:"Montserrat",sans-serif;font-weight:850}
.zahl span{font-family:"Montserrat",sans-serif;font-weight:800;font-size:.78rem;background:var(--mint);color:var(--gruen-nacht);border-radius:999px;padding:.12rem .6rem;display:inline-block;align-self:flex-start}

/* Kästen */
.leadbox,.cta-box,.check-box,.buybox,.anzeige-box{border-radius:22px}
.leadbox,.cta-box,.check-box,.buybox{background:var(--karte);border:1px solid var(--linie);box-shadow:0 18px 40px -26px rgba(7,40,34,.35)}
.check-box{border:2px solid var(--mint)}
.note,.note.kurz{background:var(--accent-bg);border:0;border-radius:16px}
.kapitel-hinweis{border-radius:16px}

/* Tabellen in den Ratgebern */
main table{border-collapse:separate;border-spacing:0;border:1px solid var(--linie);border-radius:14px;overflow:hidden;background:#fff}
main th{background:var(--gruen);color:#fff;font-family:"Montserrat",sans-serif;font-weight:800}
main td,main th{border-color:var(--linie)}
td.num,th.num{font-variant-numeric:tabular-nums}

/* Fußzeile und Kaufleiste */
footer.sitewide{background:#0a1e1a;color:#9fbdb4;border:0}
footer.sitewide h3{color:#fff;font-family:"Montserrat",sans-serif}
footer.sitewide a{color:#d6ebe4}
footer.sitewide .legal{color:#9fbdb4}
.stickybar{background:var(--gruen-tief);color:#e9f4f0;border-top:2px solid var(--mint)}
.stickybar-text strong{font-family:"Montserrat",sans-serif;color:#fff}
/* Lange deutsche Wörter in Überschriften trennen statt über den Rand laufen lassen */
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* 03.11.2026: lange deutsche Wörter auf schmalen Handys nur umbrechen, wenn sie sonst überstehen */
@media (max-width:26rem){body{overflow-wrap:break-word}.feature,.feature *{min-width:0}}
main.article h1,.article > article > h1{font-size:clamp(1.6rem,1.05rem + 3vw,2.7rem)}

/* 24.10.2026: Fußzeile mit vierter Spalte „Videos“ */
@media (min-width:40rem){footer.sitewide .inner{grid-template-columns:2fr 1fr 1fr 1fr}}
.fuss-social{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}