/* cts.css – zentrale Stile der neu gebauten Angebotsseiten (angelegt 07.11.2026 aus charisma-in-der-politik.html, Layout Entwurf H).
   Werte: Doc "Gestaltungsstandard CTS-Website" und claude/neubau-angebotsseiten.md.
   Bei jeder Aenderung die Kennung ?v=… in allen Seiten erhoehen. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/themes/gox/public/fonts/Poppins-latin_latin-ext-500.woff2') format('woff2'),url('/wp-content/themes/gox/public/fonts/Poppins-latin_latin-ext-500.woff') format('woff');}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/caveat.woff') format('woff');}
:root{--weiss:#ffffff;--anthrazit:#2e333f;--hellgruen:#94d414;--dunkelgruen:#00a76e;--mint:#e0eee7;--karte-dunkel:#4a5160;--grau-hell:#d5d8de;--fuss:#151515;--breite:1280px;--abst:72px;--rand:40px;}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--weiss);color:var(--anthrazit);font-family:'Poppins',-apple-system,'Segoe UI',Arial,sans-serif;font-weight:400;font-size:18px;line-height:30px;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4,p,ul,ol{margin:0;}
main{max-width:1920px;margin:0 auto;overflow-x:clip;}
.huelle{width:100%;max-width:calc(var(--breite) + 2*var(--rand));margin:0 auto;padding:0 var(--rand);}
.springlink{position:absolute;left:-9999px;top:0;z-index:100;background:var(--weiss);padding:12px 20px;border:2px solid var(--dunkelgruen);}
.springlink:focus{left:12px;top:12px;}
.dach{font-size:16px;line-height:24px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--dunkelgruen);}
.gruen{color:var(--dunkelgruen);}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--hellgruen);color:var(--anthrazit);font-size:20px;line-height:25px;padding:13px 24px;border-radius:9px;text-decoration:none;white-space:nowrap;box-shadow:0 6px 18px rgba(3,41,37,.18);transition:transform .25s ease,box-shadow .25s ease;}
.knopf svg{width:18px;height:18px;}
.knopf:hover,.knopf:focus-visible{transform:translateY(-2px);box-shadow:0 10px 24px rgba(3,41,37,.25);}
/* Handschrift (Caveat), Unterstrich unabhaengig von der Textlaenge */
.hs{display:inline-block;font-family:'Caveat',cursive;font-weight:600;font-size:46px;line-height:1;color:var(--dunkelgruen);transform:rotate(-9deg);position:relative;padding-bottom:.36em;white-space:nowrap;}
.hs svg{position:absolute;left:7%;bottom:0;width:93%;height:.44em;overflow:visible;}
.hs svg path{fill:none;stroke:currentColor;stroke-width:.08em;vector-effect:non-scaling-stroke;stroke-linecap:round;}
/* Kopfbild: Verlauf links, Foto rechts, Gesicht frei; Unterkante Form (a) */
.buehne{position:relative;height:500px;background:linear-gradient(90deg,#0f8a5f 0%,#3fb586 45%,#5cc39a 100%);-webkit-clip-path:url(#form-a);clip-path:url(#form-a);overflow:hidden;}
.buehne-foto{position:absolute;top:0;bottom:0;left:calc(50% + 28px);right:0;}
.buehne-foto img{width:100%;height:100%;object-fit:cover;object-position:84% 20%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 120px);mask-image:linear-gradient(90deg,transparent 0,#000 120px);}
.buehne .huelle{position:relative;padding-top:110px;color:var(--weiss);}
.buehne .dach{color:var(--weiss);opacity:.92;}
.buehne h1{font-size:52px;line-height:60px;font-weight:700;margin-top:10px;max-width:560px;}
.buehne .knopf{margin-top:30px;}
/* Einleitung: Kasten + Rahmen und Preis */
.intro{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:stretch;margin-top:40px;}
.karte{position:relative;border-radius:24px;padding:60px 64px 58px;display:flex;flex-direction:column;justify-content:center;}
.karte .rand{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.karte .rand rect{x:4px;y:4px;width:calc(100% - 8px);height:calc(100% - 8px);rx:22px;fill:none;stroke:var(--anthrazit);stroke-width:8;stroke-dasharray:16 28;stroke-linecap:round;}
.karte h2{font-size:36px;line-height:44px;font-weight:700;margin-bottom:12px;}
.karte p{font-size:18px;line-height:30px;}
.fakten{background:var(--mint);border-radius:24px;padding:44px;display:flex;flex-direction:column;justify-content:center;}
.fakten h2{font-size:30px;line-height:38px;font-weight:700;margin-bottom:14px;}
.fakt{display:flex;gap:14px;align-items:flex-start;padding:8px 0;}
.fakt svg{flex:none;width:36px;height:36px;}
.fakt b{display:block;font-size:16px;line-height:23px;font-weight:700;}
.fakt span{display:block;font-size:15px;line-height:22px;}
.fakt span.preisz{font-size:17px;font-weight:700;color:var(--dunkelgruen);}
/* Dunkle Flaeche: Faktoren, Form wie Kopfbild */
.dunkel{background:var(--anthrazit);color:var(--weiss);margin-top:var(--abst);padding:88px 0 96px;-webkit-clip-path:url(#form-dunkel);clip-path:url(#form-dunkel);}
.dunkel h2{font-size:36px;line-height:46px;font-weight:700;max-width:980px;}
.dunkel h2 span,.dunkel em{color:var(--hellgruen);font-style:normal;}
.dunkel .lead{font-size:20px;line-height:32px;color:var(--grau-hell);margin-top:18px;}
.faktoren{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px;align-items:start;}
.faktoren li{background:var(--karte-dunkel);border:1px solid rgba(255,255,255,.16);border-radius:24px 24px 24px 4px;padding:30px 28px;min-height:170px;transition:transform .35s ease;}
.faktoren b{display:block;font-size:26px;line-height:32px;font-weight:700;color:var(--hellgruen);}
.faktoren span{display:block;font-size:15px;line-height:22px;color:var(--grau-hell);margin-top:12px;}
.faktoren li:nth-child(2){transform:translateY(24px);}
.faktoren li:nth-child(3){transform:translateY(8px);}
.faktoren li:nth-child(4){transform:translateY(28px);}
.faktoren li:hover{transform:translateY(-6px);}
.faktoren li:nth-child(2):hover{transform:translateY(18px);}
.faktoren li:nth-child(3):hover{transform:translateY(2px);}
.faktoren li:nth-child(4):hover{transform:translateY(22px);}
.neutral-reihe{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-top:84px;}
.neutral{font-size:28px;line-height:38px;font-weight:700;max-width:640px;}
.dunkel .hs{color:var(--weiss);font-size:38px;margin:0 20px 18px 0;}
/* Inhalt + Business-Bild (Bild bis an den rechten Rand) */
.mit-bild{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:64px;align-items:stretch;margin-top:var(--abst);padding-left:max(var(--rand),calc((100vw - var(--breite))/2));}
@media (min-width:1920px){.mit-bild{padding-left:calc((1920px - var(--breite))/2);}}
.mit-bild h2{font-size:44px;line-height:52px;font-weight:700;margin-bottom:20px;}
.liste{list-style:none;padding:0;}
.liste li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:11px 10px;margin:0 -10px;border-bottom:1px solid #e3ece8;border-radius:12px;font-size:17px;line-height:27px;transition:background-color .3s ease;}
.liste li:hover{background:var(--mint);}
.liste .nr{width:40px;height:40px;border-radius:50%;background:var(--mint);color:var(--dunkelgruen);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;}
.ambiente{width:100%;height:100%;min-height:560px;object-fit:cover;object-position:70% 50%;-webkit-clip-path:url(#form-amb);clip-path:url(#form-amb);}
/* Ablauf */
.ablauf{margin-top:var(--abst);text-align:center;}
.ablauf h2{font-size:44px;line-height:52px;font-weight:700;}
.phasen{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;max-width:980px;margin:44px auto 0;}
.phasen li{position:relative;}
.phasen li:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 32px);right:calc(-50% + 4px);top:21px;height:2px;background:repeating-linear-gradient(90deg,var(--dunkelgruen) 0 8px,transparent 8px 14px);}
.punkt{width:44px;height:44px;border-radius:50%;background:var(--dunkelgruen);color:var(--weiss);font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:transform .3s ease;}
.phasen li:hover .punkt{transform:scale(1.12);}
.phasen .opt .punkt{background:var(--weiss);color:var(--dunkelgruen);box-shadow:inset 0 0 0 2px var(--dunkelgruen);}
.phasen .tag{display:block;font-size:13px;line-height:18px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--dunkelgruen);margin-bottom:6px;}
.phasen b{display:block;font-size:20px;line-height:28px;font-weight:700;}
.phasen small{display:block;font-size:16px;line-height:24px;margin-top:4px;}
.ablauf .basis{max-width:760px;margin:32px auto 0;font-size:18px;line-height:28px;}
.ablauf .score{margin-top:14px;font-size:16px;line-height:26px;font-weight:700;}
/* Grusskarte + Trainer */
.band{margin-top:var(--abst);}
.band .huelle{display:grid;grid-template-columns:1.55fr 1fr;gap:64px;align-items:center;}
.gruss{aspect-ratio:16/9;border-radius:24px;background:var(--anthrazit);color:var(--weiss);display:flex;align-items:center;gap:32px;padding:36px 40px;box-shadow:0 16px 40px rgba(3,41,37,.18);transition:transform .35s ease,box-shadow .35s ease;}
.gruss:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(3,41,37,.28);}
.gruss img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:6px solid rgba(255,255,255,.92);flex:none;}
.gruss .hs{color:var(--weiss);font-size:40px;}
.gruss .name{font-family:'Caveat',cursive;font-size:34px;line-height:1;margin-top:26px;color:var(--grau-hell);}
.band h2{font-size:44px;line-height:52px;font-weight:700;margin-top:6px;}
.person{display:inline-block;margin-top:24px;text-decoration:none;}
.person b{display:block;font-size:16px;line-height:22px;}
.person span{font-size:14px;line-height:20px;color:var(--dunkelgruen);}
.band .kurz{font-size:14px;line-height:20px;margin-top:4px;max-width:440px;}
.person:hover b,.person:focus-visible b{color:var(--dunkelgruen);text-decoration:underline;text-underline-offset:3px;}
/* Preis-Karte */
.preiskarte{max-width:var(--breite);margin:var(--abst) auto 0;padding:56px 64px 60px;border-radius:28px;background:linear-gradient(90deg,#0f8a5f 0%,#3fb586 70%,#5cc39a 100%);color:var(--weiss);box-shadow:0 18px 40px rgba(3,41,37,.18);display:flex;align-items:flex-end;justify-content:space-between;gap:36px;}
.preiskarte-links{flex:0 1 470px;}
.preise{display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:4px;margin-bottom:16px;}
.preise b{font-size:32px;line-height:40px;font-weight:700;white-space:nowrap;}
.preise span{font-size:17px;line-height:26px;color:#e6f5ee;align-self:center;}
.preiskarte p{font-size:15px;line-height:24px;color:#e6f5ee;}
.preiskarte p a{color:var(--weiss);}
.preiskarte-rechts{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;justify-content:flex-end;gap:28px;padding-left:40px;}
.preiskarte .hs{color:var(--weiss);font-size:38px;margin:0 auto 96px;}
.anfrage{flex:none;display:grid;justify-items:stretch;width:max-content;gap:8px;}
.mailadr{font-size:12px;line-height:20px;color:#e6f5ee;text-align:center;white-space:nowrap;}
.mailadr::before{content:"(";}
.mailadr::after{content:")";}
/* Grenze + Was es nicht ist */
.grenze{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:var(--abst);}
.grenze > div:first-child{max-width:none;}
.grenze h3{font-size:20px;line-height:25px;font-weight:700;color:var(--dunkelgruen);margin-bottom:8px;}
.grenze p,.nicht li{font-size:16px;line-height:26px;}
.nicht h3{color:var(--anthrazit);font-size:16px;line-height:24px;margin-bottom:10px;}
.nicht ul{list-style:none;padding:0;}
.nicht li{display:flex;gap:12px;align-items:flex-start;padding:3px 0;}
.nicht li::before{content:"";flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;background:#eef0f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 8l8 8M16 8l-8 8' stroke='%232e333f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/24px no-repeat;}
.banner{margin-top:calc(var(--abst) - 24px);}
.banner img{width:100%;height:auto;}
.zurueck-unten{padding-top:72px;padding-bottom:64px;}
.zurueck{color:var(--dunkelgruen);font-size:16px;line-height:24px;text-decoration:none;}
.zurueck:hover,.zurueck:focus-visible{text-decoration:underline;text-underline-offset:3px;}
/* Fuss (wie auf allen Seiten) */
.fuss{background:var(--fuss);color:var(--weiss);padding:70px 0 60px;text-align:center;}
.fuss-logo{display:inline-block;margin-bottom:38px;}
.fuss-logo img{width:175px;height:auto;margin:0 auto;}
.fuss-menue{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;list-style:none;margin:0 0 34px;padding:0;}
.fuss-menue a{font-size:17px;text-decoration:none;}
.fuss-menue a:hover,.fuss-menue a:focus-visible{text-decoration:underline;}
.fuss p{margin:0 0 12px;font-size:15px;line-height:24px;}
.fuss-sozial{display:flex;justify-content:center;gap:18px;margin-top:28px;}
.fuss-sozial a{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--weiss);display:flex;align-items:center;justify-content:center;}
.fuss-sozial a:hover,.fuss-sozial a:focus-visible{background:rgba(255,255,255,.15);}
.fuss-sozial svg{width:20px;height:20px;fill:var(--weiss);}
/* Tablet */
@media (max-width:1360px){.preiskarte{margin-left:var(--rand);margin-right:var(--rand);}}
@media (max-width:1180px){
  .preiskarte{flex-wrap:wrap;}
  .preiskarte-links{flex:1 1 100%;}
  .preiskarte-rechts{padding-left:0;justify-content:space-between;align-items:center;}
  .preiskarte .hs{margin:0 0 0 12px;}
}
@media (max-width:1100px){
  .buehne-foto{left:42%;}
  .intro,.band .huelle,.grenze{grid-template-columns:1fr;}
  .intro{gap:32px;}
  .faktoren{grid-template-columns:repeat(2,minmax(0,1fr));}
  .faktoren li:nth-child(n){transform:none;}
  .mit-bild{grid-template-columns:1fr;gap:40px;padding-right:var(--rand);}
  .ambiente{min-height:0;height:420px;-webkit-clip-path:none;clip-path:none;border-radius:24px;}
  .neutral-reihe{flex-direction:column;align-items:flex-start;gap:48px;}
  .dunkel .hs{margin:0 0 0 24px;}
}
/* Handy (bis 767 px) */
@media (max-width:767px){
  :root{--abst:56px;--rand:20px;}
  body{font-size:16px;line-height:26px;}
  .buehne{height:auto;-webkit-clip-path:none;clip-path:none;background:none;}
  .buehne-foto{position:relative;left:0;height:280px;}
  .buehne-foto img{-webkit-mask-image:none;mask-image:none;object-position:62% 15%;}
  .buehne .huelle{background:linear-gradient(90deg,#0f8a5f,#3fb586);padding-top:28px;padding-bottom:64px;-webkit-clip-path:polygon(0 0,100% 0,100% 86%,0 100%);clip-path:polygon(0 0,100% 0,100% 86%,0 100%);}
  .buehne .dach{font-size:14px;line-height:20px;}
  .buehne h1{font-size:32px;line-height:38px;}
  .buehne .knopf{margin-top:20px;}
  .intro{margin-top:24px;}
  .karte{padding:32px 24px;}
  .karte .rand rect{stroke-width:6;stroke-dasharray:12 20;}
  .karte h2,.dunkel h2{font-size:26px;line-height:34px;}
  .karte p{font-size:16px;line-height:26px;}
  .fakten{padding:28px 22px;}
  .fakten h2{font-size:24px;line-height:32px;}
  .dunkel{padding:64px 0 72px;-webkit-clip-path:polygon(0 2%,100% 0,100% 98%,0 100%);clip-path:polygon(0 2%,100% 0,100% 98%,0 100%);}
  .dunkel .lead{font-size:17px;line-height:27px;}
  .faktoren{grid-template-columns:1fr;gap:14px;margin-top:28px;}
  .faktoren li{min-height:0;padding:22px 22px;}
  .faktoren b{font-size:22px;line-height:28px;}
  .neutral-reihe{margin-top:48px;gap:40px;}
  .neutral{font-size:22px;line-height:31px;}
  .dunkel .hs{font-size:clamp(20px,6.6vw,25px);margin:0 0 8px 6px;}
  .mit-bild h2,.ablauf h2,.band h2{font-size:30px;line-height:38px;}
  .liste li{font-size:16px;line-height:25px;grid-template-columns:34px 1fr;gap:12px;}
  .liste .nr{width:34px;height:34px;font-size:14px;}
  .ambiente{height:260px;}
  .phasen{grid-template-columns:1fr;gap:28px;margin-top:32px;}
  .phasen li:not(:last-child)::after{left:50%;right:auto;top:52px;bottom:-24px;width:2px;height:auto;display:none;}
  .ablauf .basis{font-size:16px;line-height:26px;}
  .gruss{aspect-ratio:auto;flex-direction:column;text-align:center;gap:24px;padding:32px 20px 36px;}
  .gruss img{width:140px;height:140px;}
  .gruss .hs{font-size:32px;}
  .gruss .name{font-size:28px;margin-top:20px;}
  .preiskarte{padding:36px 24px 40px;border-radius:24px;}
  .preise{column-gap:14px;}
  .preise b{font-size:24px;line-height:32px;}
  .preise span{font-size:15px;line-height:22px;}
  .preiskarte-rechts{flex-direction:column;align-items:flex-start;gap:28px;}
  .preiskarte .hs{font-size:clamp(24px,8vw,30px);margin:12px 0 0 6px;}
  .mailadr{white-space:normal;font-size:12px;}
  .anfrage{width:100%;max-width:340px;}
  .knopf{font-size:17px;line-height:22px;}
  .grenze{gap:32px;}
  .zurueck-unten{padding-top:48px;padding-bottom:48px;}
}
@media (max-width:380px){.preise{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}

/* Ergaenzt 07.11.2026 (Everyday Charisma) */
/* Ablauf: Ortssatz direkt unter der Ueberschrift, Score-Satz direkt unter den Schritten */
.ablauf h2 + .basis{margin-top:12px;}
.phasen + .score{margin-top:28px;}
/* Preis-Karte mit Foto (Variante B): links Preis, Handschrift, Knopf; rechts Foto mit schraeger linker Kante */
.preiskarte.mit-foto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);padding:0;overflow:hidden;align-items:stretch;}
.preiskarte.mit-foto .pk-text{padding:40px 44px;display:flex;flex-direction:column;gap:28px;justify-content:center;}
.preiskarte.mit-foto .preiskarte-links,.preiskarte.mit-foto .preiskarte-rechts{padding:0;min-height:0;height:auto;flex:none;}
.preiskarte.mit-foto .preiskarte-rechts{display:flex;flex-direction:column;align-items:flex-start;gap:20px;}
.preiskarte.mit-foto .preiskarte-rechts .hs{margin:0 0 0 8px;}
.preiskarte.mit-foto > img{width:100%;height:100%;min-height:340px;object-fit:cover;object-position:50% 40%;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);}
@media (max-width:767px){
  .preiskarte.mit-foto{grid-template-columns:1fr;}
  .preiskarte.mit-foto > img{order:-1;min-height:220px;clip-path:none;}
  .preiskarte.mit-foto .pk-text{padding:28px 20px;}
}

/* Ergaenzt 07.11.2026: Kopfbild-Textgruppe senkrecht mittig; Knopf im Kopfbild springt zur Preis-Karte */
@media (min-width:768px){.buehne .huelle{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-top:0;padding-bottom:40px;}}
#preis-und-termine{scroll-margin-top:110px;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

/* Ergaenzt 07.11.2026: zweiter Abschnitt in einer Spalte des Blocks Qualitaet/Grenze */
.grenze p + h3{margin-top:28px;}
/* Ergaenzt 07.11.2026: Sammelhinweis unter mehreren Preisen im Kasten Angebot (buendig mit den Symbolen) */
.fakten-hinweis{font-size:15px;line-height:22px;margin:8px 0 4px;}
/* Ergaenzt 07.11.2026 (Handy-Pruefung): kein Spalt zwischen Text und Foto in der Preis-Karte mit Foto */
.preiskarte.mit-foto{gap:0;}
/* Ergaenzt 07.11.2026: Handschrift der Grusskarte auf sehr schmalen Handys verkleinern (sonst Ueberlauf bei 320 px) */
@media (max-width:400px){.gruss .hs{font-size:clamp(22px,8vw,32px);}}
/* Zurück-Link oben im Kopfbild (09.11.2026) */
.zurueck-hell{display:inline-block;color:var(--weiss);font-size:16px;line-height:24px;text-decoration:none;opacity:.95;}
.zurueck-hell:hover,.zurueck-hell:focus-visible{text-decoration:underline;text-underline-offset:3px;}
@media (min-width:768px){.buehne .huelle{position:relative;}.zurueck-hell{position:absolute;top:28px;}}
@media (max-width:767px){.zurueck-hell{margin-bottom:16px;font-size:15px;}}