{"id":656,"date":"2026-05-18T07:50:46","date_gmt":"2026-05-18T07:50:46","guid":{"rendered":"https:\/\/klartext-kommunikation.ch\/?page_id=656"},"modified":"2026-05-20T06:21:19","modified_gmt":"2026-05-20T06:21:19","slug":"656-2","status":"publish","type":"page","link":"https:\/\/klartext-kommunikation.ch\/","title":{"rendered":"Klartext Kommunikation"},"content":{"rendered":"\n<style>\n\/* \u2500\u2500\u2500 Global readability \u2500\u2500\u2500 *\/\n.content-row p, .content-row li { max-width: 68ch; line-height: 1.7; }\n.content-row h4 { max-width: 52ch; }\n.content-row.small { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }\n\n\/* \u2500\u2500\u2500 Hero zoom animation \u2500\u2500\u2500 *\/\n@keyframes ktZoomIn {\n  0%   { transform: scale(2.8); opacity: 0; filter: blur(6px); }\n  60%  { opacity: 1; filter: blur(0); }\n  100% { transform: scale(1); opacity: 1; }\n}\n.kt-hero-q {\n  animation: ktZoomIn 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;\n  display: block;\n  text-align: center;\n}\n\/* Delayed sub-line *\/\n.kt-hero-sub {\n  animation: ktZoomIn 1.4s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;\n  display: block;\n  text-align: center;\n}\n\n\/* \u2500\u2500\u2500 Hero section (light) \u2500\u2500\u2500 *\/\n.kt-hero-section {\n  min-height: 92vh;\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: center !important;\n  justify-content: center !important;\n  padding: 8vw 6vw !important;\n  background: #f5f4f0 !important;\n}\n.kt-hero-section h1.wp-block-heading {\n  font-size: clamp(2.8rem, 7vw, 7.5rem) !important;\n  line-height: 1.0 !important;\n  letter-spacing: -0.02em !important;\n  color: #111 !important;\n  margin: 0 !important;\n  text-align: center !important;\n}\n\n\/* \u2500\u2500\u2500 Marquee always visible \u2500\u2500\u2500 *\/\n.marquee-text { opacity: 1 !important; }\n\n\/* \u2500\u2500\u2500 Accordion \u2500\u2500\u2500 *\/\n.accordion-title { color: #fff !important; font-size: 1.05rem !important; opacity: 1 !important; }\n.accordion-item { border-top: 1px solid rgba(255,255,255,0.15) !important; padding: 1.2rem 0 !important; }\n.accordion-item-content { display: block !important; opacity: 1 !important; max-height: none !important; color: rgba(255,255,255,0.7) !important; }\n.accordion-icon { opacity: 0.35 !important; }\n\n\/* \u2500\u2500\u2500 Flex-list \u2500\u2500\u2500 *\/\n.flex-list { padding: 1.1rem 0 !important; }\n.flex-list-center { opacity: 0.75 !important; }\n\n\/* \u2500\u2500\u2500 Animated line \u2500\u2500\u2500 *\/\n.animated-line { border-color: rgba(255,255,255,0.2) !important; margin: 2rem 0 !important; }\n\n\/* \u2500\u2500\u2500 Counter blocks (stats row) \u2500\u2500\u2500 *\/\n.kt-stats { display: flex; gap: 3rem; flex-wrap: wrap; margin: 2.5rem 0 1rem; }\n.kt-stat-item { display: flex; flex-direction: column; }\n.kt-stat-num  { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1; }\n.kt-stat-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.45; margin-top: 0.4rem; }\n\n\/* \u2500\u2500\u2500 Service numbers \u2500\u2500\u2500 *\/\n.kt-service-num {\n  font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase;\n  opacity: 0.4; margin-bottom: 0.8rem; display: block;\n}\n\n\/* \u2500\u2500\u2500 Contact form \u2500\u2500\u2500 *\/\n#kt-contact-form .kt-field { margin-bottom: 1.6rem; }\n#kt-contact-form label { display: block; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.45; margin-bottom: 0.5rem; }\n#kt-contact-form input, #kt-contact-form textarea {\n  background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.2);\n  color: #fff; padding: 0.5rem 0; width: 100%; outline: none;\n  font-size: 1rem; font-family: inherit; resize: none;\n}\n#kt-contact-form input::placeholder, #kt-contact-form textarea::placeholder { color: rgba(255,255,255,0.22); }\n#kt-contact-form input:focus, #kt-contact-form textarea:focus { border-bottom-color: rgba(255,255,255,0.55); }\n#kt-contact-form button {\n  background: transparent; border: 1px solid rgba(255,255,255,0.35);\n  color: #fff; padding: 0.85rem 2.5rem; cursor: pointer;\n  letter-spacing: 0.1em; font-size: 0.8rem; font-family: inherit;\n  transition: all 0.2s; margin-top: 0.5rem;\n}\n#kt-contact-form button:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.65); }\n#kt-contact-form button:disabled { opacity: 0.4; cursor: default; }\n\n\/* \u2500\u2500\u2500 Light section text overrides \u2500\u2500\u2500 *\/\n.light-section .kt-stat-num { color: #111; }\n.light-section .kt-stat-label { color: #111; }\n\n\/* \u2500\u2500\u2500 Layout: horizontal padding for all content sections \u2500\u2500\u2500 *\/\n\/* Full-width sections get consistent side padding *\/\n.content-row.full {\n  padding-left: clamp(1.5rem, 5vw, 5rem) !important;\n  padding-right: clamp(1.5rem, 5vw, 5rem) !important;\n  box-sizing: border-box !important;\n}\n\/* Marquees break out to remain edge-to-edge *\/\n.content-row.full .marquee-text-wrapper {\n  margin-left: calc(-1 * clamp(1.5rem, 5vw, 5rem));\n  margin-right: calc(-1 * clamp(1.5rem, 5vw, 5rem));\n  width: calc(100% + 2 * clamp(1.5rem, 5vw, 5rem));\n}\n\/* Normal width sections get a small inner padding on narrow viewports *\/\n.content-row.normal,\n.content-row.small {\n  padding-left: clamp(1rem, 2vw, 2rem) !important;\n  padding-right: clamp(1rem, 2vw, 2rem) !important;\n  box-sizing: border-box !important;\n}\n\n\/* \u2500\u2500\u2500 Color consistency: light sections always cream \u2500\u2500\u2500 *\/\n.content-row.light-section { background-color: #f5f4f0 !important; }\n\n\/* \u2500\u2500\u2500 Animated line: tighter spacing \u2500\u2500\u2500 *\/\n.animated-line { margin: 0.5rem 0 !important; }\n\n\/* \u2500\u2500\u2500 Process steps (Vorgehen) \u2500\u2500\u2500 *\/\n.kt-steps { display: flex; flex-direction: column; }\n.kt-step {\n  display: grid;\n  grid-template-columns: 2.8rem 1fr auto;\n  gap: 1.5rem 2rem;\n  align-items: start;\n  padding: 1.4rem 0;\n  border-top: 1px solid rgba(0,0,0,0.12);\n}\n.kt-step:last-child { border-bottom: 1px solid rgba(0,0,0,0.12); }\n.kt-step-num {\n  font-size: 0.68rem;\n  letter-spacing: 0.14em;\n  color: rgba(0,0,0,0.3);\n  text-transform: uppercase;\n  padding-top: 0.2rem;\n  font-weight: 400;\n}\n.kt-step-title {\n  font-size: 1rem;\n  font-weight: 700;\n  color: #111;\n  margin: 0 0 0.35rem;\n  text-transform: none;\n  letter-spacing: 0;\n}\n.kt-step-desc {\n  color: rgba(0,0,0,0.55);\n  margin: 0;\n  font-size: 0.9rem;\n  line-height: 1.6;\n  max-width: 52ch;\n}\n.kt-step-out {\n  font-size: 0.62rem;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n  color: rgba(0,0,0,0.35);\n  white-space: nowrap;\n  padding-top: 0.25rem;\n  border: 1px solid rgba(0,0,0,0.15);\n  padding: 0.28rem 0.7rem;\n  align-self: start;\n  margin-top: 0.2rem;\n}\n@media (max-width: 640px) {\n  .kt-step { grid-template-columns: 2.2rem 1fr; }\n  .kt-step-out { display: none; }\n}\n\n\/* \u2500\u2500\u2500 Problem section accordion: tighter items on mobile \u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n  .wp-block-columns { flex-direction: column !important; }\n}\n\n\/* \u2500\u2500\u2500 Section label (sidebar) \u2500\u2500\u2500 *\/\n.kt-section-label {\n  font-size: 0.65rem;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  opacity: 0.45;\n  margin-bottom: 1rem;\n  display: block;\n}\n\n\/* \u2500\u2500\u2500 Eyebrow \u2500\u2500\u2500 *\/\n.kt-eyebrow {\n  font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;\n  opacity: 0.38; margin: 0 0 2rem; display: block;\n}\n\/* \u2500\u2500\u2500 Problem 2x2 grid \u2500\u2500\u2500 *\/\n.kt-problems { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 3rem; }\n.kt-problem-item { display: flex; gap: 0.9rem; align-items: start; }\n.kt-problem-icon { flex-shrink: 0; color: rgba(0,0,0,0.25); margin-top: 0.1rem; }\n.kt-problem-title { font-size: 0.9rem; font-weight: 700; color: #111; margin: 0 0 0.3rem; line-height: 1.35; }\n.kt-problem-desc { font-size: 0.82rem; color: rgba(0,0,0,0.55); margin: 0; line-height: 1.6; }\n@media (max-width: 640px) { .kt-problems { grid-template-columns: 1fr; } }\n\/* \u2500\u2500\u2500 Angebote 3-col cards \u2500\u2500\u2500 *\/\n.kt-services { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 3.5rem; }\n.kt-service-card { border-top: 1px solid rgba(255,255,255,0.12); padding: 1.5rem 2.5rem 1.5rem 0; }\n.kt-service-card:last-child { padding-right: 0; }\n.kt-service-tag { font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.28); display: block; margin-bottom: 0.9rem; }\n.kt-service-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0 0 0.65rem; line-height: 1.25; }\n.kt-service-desc { font-size: 0.85rem; color: rgba(255,255,255,0.52); margin: 0; line-height: 1.65; }\n@media (max-width: 768px) { .kt-services { grid-template-columns: 1fr; } .kt-service-card { padding-right: 0; padding-bottom: 2rem; } }\n\/* \u2500\u2500\u2500 Vorgehen horizontal process \u2500\u2500\u2500 *\/\n.kt-process { display: flex; align-items: start; border-top: 1px solid rgba(0,0,0,0.12); }\n.kt-process-step { flex: 1; padding: 2rem 2.5rem 2rem 0; }\n.kt-process-step:last-child { padding-right: 0; }\n.kt-process-connector { flex-shrink: 0; color: rgba(0,0,0,0.18); font-size: 1.2rem; padding-top: 2.35rem; align-self: start; line-height: 1; }\n.kt-process-num { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(0,0,0,0.28); display: block; margin-bottom: 0.9rem; }\n.kt-process-title { font-size: 1.15rem; font-weight: 800; color: #111; margin: 0 0 0.55rem; }\n.kt-process-desc { font-size: 0.85rem; color: rgba(0,0,0,0.55); margin: 0; line-height: 1.6; }\n@media (max-width: 640px) { .kt-process { flex-direction: column; } .kt-process-connector { display: none; } .kt-process-step { padding-right: 0; border-top: 1px solid rgba(0,0,0,0.08); } }\n\n\/* \u2500\u2500\u2500 Team photo: always show, not hover-only \u2500\u2500\u2500 *\/\n.team-members-list .link .hover-img {\n  opacity: 1 !important;\n  transform: scale(1) !important;\n  transition: none !important;\n}\n\/* \u2500\u2500\u2500 Icons: larger \u2500\u2500\u2500 *\/\n.kt-problem-icon svg { width: 28px !important; height: 28px !important; }\n.kt-problem-icon { color: rgba(0,0,0,0.32) !important; }\n\/* \u2500\u2500\u2500 Eyebrow: remove from problem (too noisy at small size) \u2500\u2500\u2500 *\/\n\n\/* \u2500\u2500\u2500 Mobile: shorter hero scroll distance \u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n  #kt-hero-wrap { height: 160vh !important; }\n}\n<\/style>\n\n<script>\n\/* Close fullscreen menu when anchor link is clicked *\/\ndocument.addEventListener('DOMContentLoaded', function() {\n  document.querySelectorAll('nav a[href*=\"#\"]').forEach(function(link) {\n    link.addEventListener('click', function() {\n      var burger = document.getElementById('menu-burger');\n      if (burger) { if (burger.classList.contains('open')) {\n        setTimeout(function() { burger.click(); }, 80);\n      }}\n    });\n  });\n});\n<\/script>\n\n\n<!-- anchor home -->\n<span id=\"home\" style=\"position:absolute;visibility:hidden;pointer-events:none\"><\/span>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HERO: light section, zoom-in question\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n\n<style>\n\/* \u2500\u2500 Scroll-driven hero \u2500\u2500 *\/\n#kt-hero-wrap {\n  height: 260vh;\n  position: relative;\n  background: #f5f4f0;\n}\n#kt-hero-screen {\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #f5f4f0;\n  overflow: hidden;\n  will-change: transform;\n}\n#kt-sq, #kt-sa {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 0 8vw;\n  text-align: center;\n  will-change: opacity, transform;\n  pointer-events: none;\n}\n\/* Question *\/\n#kt-sq h1 {\n  font-size: clamp(2.8rem, 8vw, 9.5rem);\n  font-weight: 800;\n  color: #111;\n  line-height: 0.95;\n  letter-spacing: -0.025em;\n  margin: 0;\n  text-align: center;\n}\n\/* Answer *\/\n#kt-sa .kt-brand {\n  font-size: clamp(4rem, 12vw, 14rem);\n  font-weight: 800;\n  color: #111;\n  line-height: 0.9;\n  letter-spacing: -0.03em;\n  display: block;\n}\n#kt-sa .kt-sub {\n  font-size: clamp(0.7rem, 1.3vw, 1.1rem);\n  letter-spacing: 0.24em;\n  text-transform: uppercase;\n  color: #111;\n  opacity: 0.4;\n  display: block;\n  margin-top: 1.4rem;\n}\n\/* Scroll hint *\/\n#kt-scroll-hint {\n  position: absolute;\n  bottom: 2.5rem;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.5rem;\n  opacity: 0;\n  animation: hintAppear 0.8s 1.2s ease both;\n}\n#kt-scroll-hint span {\n  font-size: 0.65rem;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: #111;\n  opacity: 0.35;\n}\n#kt-scroll-hint .arrow {\n  width: 1px;\n  height: 32px;\n  background: #111;\n  opacity: 0.25;\n  animation: arrowPulse 1.4s 1.5s ease-in-out infinite;\n}\n@keyframes hintAppear { to { opacity: 1; } }\n@keyframes arrowPulse {\n  0%, 100% { transform: scaleY(1); opacity: 0.25; }\n  50% { transform: scaleY(0.5); opacity: 0.1; }\n}\n\/* Hide theme page-title block *\/\n#hero { display: none !important; }\n\n\/* Initial zoom for question *\/\n@keyframes ktZoomIn {\n  0%   { transform: scale(2.2); opacity: 0; filter: blur(8px); }\n  100% { transform: scale(1);   opacity: 1; filter: blur(0);   }\n}\n.kt-zoom-enter { animation: ktZoomIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; }\n.kt-zoom-enter-delay { animation: ktZoomIn 1.3s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both; }\n<\/style>\n\n<div id=\"kt-hero-wrap\">\n  <div id=\"kt-hero-screen\">\n\n    <!-- State 1: the question -->\n    <div id=\"kt-sq\">\n      <h1>\n        <span class=\"kt-zoom-enter\" style=\"display:block\">Werden Sie<\/span>\n        <span class=\"kt-zoom-enter-delay\" style=\"display:block\">verstanden?<\/span>\n      <\/h1>\n    <\/div>\n\n    <!-- State 2: the answer -->\n    <div id=\"kt-sa\" style=\"opacity:0; transform:scale(1.08)\">\n      <span class=\"kt-brand\">KLARTEXT.<\/span>\n      <span class=\"kt-sub\">Kommunikation f\u00fcr KMU<\/span>\n    <\/div>\n\n    <!-- Scroll cue -->\n    <div id=\"kt-scroll-hint\">\n      <span>Scroll<\/span>\n      <div class=\"arrow\"><\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  function clamp01(x) { return Math.max(0, Math.min(1, x)); }\n\n  function init() {\n    var sb = window.Scrollbar ? window.Scrollbar.getAll()[0] : null;\n    if (!sb) { setTimeout(init, 150); return; }\n\n    var wrap   = document.getElementById('kt-hero-wrap');\n    var screen = document.getElementById('kt-hero-screen');\n    var sq     = document.getElementById('kt-sq');\n    var sa     = document.getElementById('kt-sa');\n    var hint   = document.getElementById('kt-scroll-hint');\n    if (!wrap || !screen) return;\n\n    var wrapTop, wrapH, vh;\n    function measure() {\n      wrapTop = wrap.offsetTop;\n      wrapH   = wrap.offsetHeight;\n      vh      = window.innerHeight;\n    }\n    measure();\n    window.addEventListener('resize', measure);\n\n    \/\/ Snap thresholds with hysteresis \u2014 prevents boundary oscillation\n    var T_TRIGGER = 0.30;\n    var T_REVERSE = 0.15;\n    var revealed = false;\n\n    function showQuestion() {\n      sq.style.opacity = '1'; sq.style.transform = 'scale(1)';\n      sa.style.opacity = '0'; sa.style.transform = 'scale(1.08)';\n    }\n    function showAnswer() {\n      sq.style.opacity = '0'; sq.style.transform = 'scale(0.90)';\n      sa.style.opacity = '1'; sa.style.transform = 'scale(1)';\n    }\n\n    sb.addListener(function(s) {\n      var y = s.offset.y;\n\n      if (y <= wrapTop) {\n        screen.style.transform = 'translateY(0)';\n        screen.style.opacity   = '1';\n        if (hint) hint.style.opacity = '';\n        if (revealed) { revealed = false; showQuestion(); }\n        return;\n      }\n\n      var exitY = wrapTop + wrapH - vh;\n      if (y >= exitY) {\n        var fadeOut = clamp01((y - exitY) \/ (vh * 0.15));\n        screen.style.transform = 'translateY(' + (exitY - wrapTop) + 'px)';\n        screen.style.opacity   = String(1 - fadeOut);\n        return;\n      }\n\n      var pin = y - wrapTop;\n      screen.style.transform = 'translateY(' + pin + 'px)';\n      screen.style.opacity   = '1';\n\n      var progress = clamp01(pin \/ (wrapH - vh));\n\n      if (hint) hint.style.opacity = progress > 0.05 ? '0' : '';\n\n      if (!revealed && progress >= T_TRIGGER) {\n        revealed = true;\n        showAnswer();\n      } else if (revealed && progress < T_REVERSE) {\n        revealed = false;\n        showQuestion();\n      }\n    });\n  }\n\n  init();\n})();\n<\/script>\n\n\n\n<style>\n\/* \u2500\u2500 Hero period: square dot matching wordmark logo \u2500\u2500 *\/\n.kt-brand-dot {\n  display: inline-block;\n  width: 0.10em;\n  height: 0.10em;\n  background: rgba(12,12,12,0.46);\n  margin-left: 0.022em;\n  vertical-align: 0.04em;\n}\n\n\n\/* \u2500\u2500 Logo override (theme hardcodes logo.png in header.php) \u2500\u2500 *\/\n#logo .black-logo {\n  content: url('https:\/\/klartext-kommunikation.ch\/wp-content\/uploads\/2026\/05\/klartext-logo-dark.svg');\n  height: 26px !important;\n  width: auto !important;\n}\n#logo .white-logo {\n  content: url('https:\/\/klartext-kommunikation.ch\/wp-content\/uploads\/2026\/05\/klartext-logo-light.svg');\n  height: 26px !important;\n  width: auto !important;\n}\n\n\/* \u2500\u2500 v5 Animation system \u2500\u2500 *\/\n.kt-animate, .kt-animate-left, .kt-animate-right {\n  opacity: 0;\n  transition: opacity 0.72s ease, transform 0.72s ease;\n}\n.kt-animate        { transform: translateY(26px); }\n.kt-animate-left   { transform: translateX(-26px); }\n.kt-animate-right  { transform: translateX(26px); }\n.kt-animate.kt-in, .kt-animate-left.kt-in, .kt-animate-right.kt-in {\n  opacity: 1; transform: none;\n}\n.kt-d1 { transition-delay: 0.08s; }\n.kt-d2 { transition-delay: 0.18s; }\n.kt-d3 { transition-delay: 0.28s; }\n.kt-d4 { transition-delay: 0.38s; }\n.kt-d5 { transition-delay: 0.48s; }\n\n\/* \u2500\u2500 Mobile: prevent pull-to-refresh page reload \u2500\u2500 *\/\nhtml, body {\n  overscroll-behavior-y: none;\n}\n#content-scroll {\n  overscroll-behavior-y: none;\n}\n\n\/* \u2500\u2500 Hero snap transition \u2014 CSS handles animation, JS only fires at threshold \u2500\u2500 *\/\n#kt-sq, #kt-sa {\n  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),\n              transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);\n  will-change: opacity, transform;\n  transform-origin: center center;\n}\n\n\/* \u2500\u2500 Mobile: hero heading overflow fix (h1 was 367px in a 350px container) \u2500\u2500 *\/\n@media (max-width: 480px) {\n  #kt-sq h1 { font-size: 9.5vw !important; }\n}\n\n\/* \u2500\u2500 Intro \u2500\u2500 *\/\n.kt-intro-first { border-top: 1px solid rgba(255,255,255,0.13) !important; }\n.kt-intro-cols { display: grid; grid-template-columns: 45% 55%; gap: clamp(2rem,4vw,5rem); align-items: start; }\n.kt-intro-cols h2 { hyphens: none; }\n.kt-intro-body p { color: rgba(255,255,255,0.78); font-size: 1.05rem; line-height: 1.72; margin: 0 0 1.8rem; }\n.kt-inline-cta {\n  display: inline-block;\n  background: transparent; color: #fff;\n  font-size: 0.82rem; letter-spacing: 0.1em;\n  text-decoration: none; border: 1px solid rgba(255,255,255,0.55);\n  padding: 0.8rem 2rem;\n  transition: background 0.2s, color 0.2s, border-color 0.2s;\n}\n.kt-inline-cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.85); color: #fff; }\n@media (max-width: 767px) {\n  .kt-inline-cta { background: #fff; color: #0c0c0c; border-color: #fff; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }\n  .kt-inline-cta:hover { background: rgba(255,255,255,0.88); }\n}\n@media (max-width: 640px) { .kt-intro-cols { grid-template-columns: 1fr; gap: 2rem; } }\n\n\/* \u2500\u2500 Problem: editorial strips \u2500\u2500 *\/\n.kt-problem-strips { display: flex; flex-direction: column; margin-top: 0; }\n.kt-pstrip {\n  display: grid;\n  grid-template-columns: 40% 57%;\n  gap: clamp(2rem,4vw,5rem);\n  padding: 48px 0;\n  border-top: 1px solid rgba(0,0,0,0.08);\n  align-items: start;\n}\n.kt-pstrip-lhs { position: relative; }\n.kt-pstrip-num {\n  display: block;\n  font-size: 11px; font-weight: 800;\n  letter-spacing: 0.2em; text-transform: uppercase;\n  color: #0c0c0c; line-height: 1;\n  margin-bottom: 8px; user-select: none;\n}\n.kt-pstrip-left {\n  font-size: clamp(1.25rem,2.2vw,1.5rem);\n  font-weight: 800;\n  color: #111;\n  line-height: 1.15;\n  letter-spacing: -0.02em;\n  margin: 0;\n}\n.kt-pstrip-right {\n  font-size: 1rem;\n  color: rgba(0,0,0,0.72);\n  line-height: 1.72;\n  margin: 0;\n  padding-top: 0.2rem;\n  max-width: 60ch;\n}\n@media (max-width: 640px) {\n  .kt-pstrip { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }\n}\n\n\/* \u2500\u2500 Angebote: cards \u2500\u2500 *\/\n.kt-services {\n  display: grid;\n  grid-template-columns: repeat(3,1fr);\n  gap: 1rem;\n  margin-top: 2.5rem;\n}\n.kt-service-card {\n  position: relative;\n  overflow: hidden;\n  border: 1px solid rgba(255,255,255,0.10);\n  border-top-color: rgba(255,255,255,0.16);\n  background: rgba(255,255,255,0.03);\n  padding: 2rem 1.8rem;\n  will-change: transform;\n}\n\/* Tilt: snap back smoothly when not actively tilting *\/\n.kt-service-card.kt-in {\n  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.23,1,0.32,1), box-shadow 0.35s ease, border-color 0.35s ease;\n}\n\/* Tilt: no transform transition while following cursor \u2014 instant response *\/\n.kt-service-card.kt-in.kt-tilting {\n  transition: opacity 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;\n}\n\/* Hovered card: lifted border + deep shadow *\/\n.kt-service-card.kt-svc-hovered {\n  border-color: rgba(255,255,255,0.24);\n  border-top-color: rgba(255,255,255,0.30);\n  box-shadow: 0 20px 60px rgba(0,0,0,0.55);\n}\n\/* Ghost number: slightly more visible on active card *\/\n.kt-service-card.kt-svc-hovered .kt-card-ghost {\n  color: rgba(255,255,255,0.09);\n}\n\/* Sibling dimming: very subtle *\/\n.kt-services.kt-svc-active .kt-service-card:not(.kt-svc-hovered) {\n  opacity: 0.72;\n}\n.kt-card-ghost {\n  position: absolute;\n  top: -0.5rem; right: 0;\n  font-size: 6.5rem; font-weight: 900;\n  color: rgba(255,255,255,0.07);\n  line-height: 1; user-select: none; pointer-events: none;\n  letter-spacing: -0.04em;\n  max-width: 100%;\n}\n.kt-service-tag { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.68) !important; display: block; margin-bottom: 1rem; }\n.kt-service-title { font-size: 1.2rem; font-weight: 700; color: #fff !important; margin: 0 0 0.6rem; line-height: 1.2; position: relative; }\n.kt-service-desc { font-size: 0.85rem; color: #f5f4f0 !important; margin: 0; line-height: 1.65; position: relative; }\n@media (max-width: 768px) {\n  .kt-services { grid-template-columns: 1fr; gap: 0.75rem; }\n  .kt-service-card { padding-bottom: 2.5rem; }\n}\n\n\/* \u2500\u2500 Vorgehen: two-tone cards \u2500\u2500 *\/\n.kt-process {\n  display: flex; align-items: stretch; gap: 16px;\n  margin-top: 2.5rem;\n}\n.kt-pcard {\n  flex: 1; display: flex; flex-direction: column;\n  overflow: hidden; border: 1px solid rgba(0,0,0,0.1);\n}\n.kt-pcard-top {\n  flex: 1; padding: 2rem 1.8rem;\n  background: #fff;\n}\n.kt-pcard-bot {\n  padding: 1.6rem 1.8rem;\n  background: #0c0c0c;\n}\n.kt-pcard-num {\n  display: block; font-size: 11px; font-weight: 800;\n  letter-spacing: 0.2em; text-transform: uppercase;\n  color: #0c0c0c; margin-bottom: 8px;\n}\n.kt-pcard-title {\n  font-size: clamp(1.5rem,2vw,1.9rem); font-weight: 800;\n  color: #111; margin: 0 0 0.7rem; line-height: 1.05;\n  letter-spacing: -0.02em;\n}\n.kt-pcard-desc {\n  font-size: 0.95rem; color: rgba(0,0,0,0.68);\n  line-height: 1.7; margin: 0;\n}\n.kt-pcard-label {\n  display: block; font-size: 10px; font-weight: 700;\n  letter-spacing: 0.22em; text-transform: uppercase;\n  color: rgba(255,255,255,0.5);\n  margin-bottom: 10px; padding-bottom: 10px;\n  border-bottom: 1px solid rgba(255,255,255,0.1);\n}\n.kt-pcard-text {\n  font-size: 0.92rem; color: rgba(255,255,255,0.85);\n  line-height: 1.7; margin: 0;\n}\n@media (max-width: 640px) {\n  .kt-process { flex-direction: column; gap: 12px; }\n  .kt-pcard-top { padding: 1.6rem; }\n  .kt-pcard-bot { padding: 1.4rem 1.6rem; }\n}\n\n\/* \u2500\u2500 Warum Klartext section \u2500\u2500 *\/\n.kt-warum-wrap {\n  display: grid; grid-template-columns: 40% 60%;\n  gap: 0; min-height: 75vh; align-items: stretch;\n}\n.kt-warum-left { position: relative; overflow: hidden; }\n.kt-warum-left img {\n  position: absolute; top: 0; left: 0;\n  width: 100%; height: 100%;\n  object-fit: cover; object-position: top center; display: block; filter: grayscale(100%);\n}\n.kt-warum-right {\n  padding: clamp(3rem,6vw,6rem) clamp(2.5rem,5vw,5rem);\n  display: flex; flex-direction: column; justify-content: flex-start;\n}\n.kt-warum-hl {\n  font-size: clamp(1.8rem,3vw,2.8rem); font-weight: 800; color: #fff !important;\n  letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 2rem; line-height: 1.08; hyphens: none;\n}\n.kt-warum-intro {\n  font-size: 1.05rem; color: rgba(255,255,255,0.72); line-height: 1.65; margin: 0 0 2rem;\n}\n.kt-warum-strip { border-top: 1px solid rgba(255,255,255,0.10); padding: 1.2rem 0; }\n.kt-warum-label {\n  font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase;\n  color: #fff; font-weight: 700; display: block; margin-bottom: 0.45rem;\n}\n.kt-warum-body { font-size: 0.92rem; color: rgba(255,255,255,0.68); line-height: 1.65; margin: 0; }\n.kt-warum-divider { border-top: 1px solid rgba(255,255,255,0.10); margin-top: 0.5rem; }\n.kt-warum-cta {\n  display: inline-block;\n  background: transparent; color: #fff; font-size: 0.82rem;\n  letter-spacing: 0.1em; text-decoration: none; border: 1px solid rgba(255,255,255,0.55);\n  padding: 0.8rem 2rem; margin: 1.5rem 0 1.2rem;\n  transition: background 0.2s, color 0.2s, border-color 0.2s;\n}\n.kt-warum-cta:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.85); color: #fff; }\n@media (max-width: 767px) {\n  .kt-warum-cta { background: #fff; color: #0c0c0c; border-color: #fff; min-height: 48px; display: inline-flex; align-items: center; }\n  .kt-warum-cta:hover { background: rgba(255,255,255,0.88); }\n}\n.kt-warum-creds {\n  font-size: 0.78rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.38); display: block;\n}\n@media (max-width: 768px) {\n  .kt-warum-wrap { grid-template-columns: 1fr; }\n  .kt-warum-left {\n    min-height: 65vw; order: -1;\n    margin-left: calc(-1 * clamp(1.5rem,5vw,5rem));\n    margin-right: calc(-1 * clamp(1.5rem,5vw,5rem));\n    width: calc(100% + 2 * clamp(1.5rem,5vw,5rem));\n  }\n  .kt-warum-right { padding: 2.5rem; }\n}\n\n\/* \u2500\u2500 Kontakt: merged two-column \u2500\u2500 *\/\n.kt-contact-hl { font-size: clamp(2rem,4vw,3.5rem); font-weight: 800; line-height: 1.05; color: #fff; margin: 0 0 0.5rem; hyphens: none; letter-spacing: -0.02em; }\n.kt-contact-sub { font-size: 1rem; color: rgba(255,255,255,0.72); margin: 0 0 2.5rem; display: block; font-style: italic; }\n.kt-contact-wrap {\n  display: grid; grid-template-columns: 45% 55%;\n  gap: clamp(2rem,5vw,6rem); align-items: start;\n  margin-top: 2rem;\n}\n.kt-cdetail-row {\n  display: flex; flex-direction: column; gap: 3px;\n  border-bottom: 1px solid rgba(255,255,255,0.08); padding: 14px 0;\n}\n.kt-cdetail-row:first-child { border-top: 1px solid rgba(255,255,255,0.08); }\n.kt-cdetail-label { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.42); }\n.kt-cdetail-val { font-size: 0.95rem; color: #fff; font-weight: 400; }\n.kt-cdetail-val a { color: inherit; text-decoration: none; word-break: break-all; }\n.kt-cdetail-val a:hover { color: rgba(255,255,255,0.75); }\n#kt-contact-form label { display: block; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 6px; }\n#kt-contact-form input, #kt-contact-form textarea {\n  background: #1e1e1e; border: 1px solid #2a2a2a;\n  border-radius: 2px; color: #fff;\n  padding: 0 1rem; width: 100%; outline: none;\n  font-size: 1rem; font-family: inherit; resize: none;\n  box-sizing: border-box; display: block;\n}\n#kt-contact-form input { height: 50px; }\n#kt-contact-form textarea { height: 120px; padding: 0.75rem 1rem; }\n#kt-contact-form input::placeholder, #kt-contact-form textarea::placeholder { color: rgba(255,255,255,0.25); }\n#kt-contact-form input:focus, #kt-contact-form textarea:focus { border-color: rgba(255,255,255,0.28); }\n#kt-contact-form .kt-field { margin-bottom: 1.4rem; }\n#kt-contact-form button {\n  background: #fff; border: 2px solid #fff;\n  color: #0c0c0c; padding: 0.85rem 2.5rem; cursor: pointer;\n  letter-spacing: 0.1em; font-size: 14px; font-family: inherit;\n  transition: background 0.2s; margin-top: 0.5rem; width: 100%; text-align: center;\n}\n#kt-contact-form button:hover { background: rgba(255,255,255,0.88); }\n#kt-contact-form button:disabled { opacity: 0.5; cursor: default; }\n@media (max-width: 768px) { .kt-contact-wrap { grid-template-columns: 1fr; } }\n\n.kt-inline-cta-light {\n  display: inline-block;\n  background: transparent; color: rgba(0,0,0,0.75); font-size: 0.82rem;\n  letter-spacing: 0.1em; text-decoration: none;\n  border: 1px solid rgba(0,0,0,0.28); padding: 0.8rem 2rem;\n  transition: background 0.2s, color 0.2s, border-color 0.2s;\n}\n.kt-inline-cta-light:hover { color: #111; border-color: rgba(0,0,0,0.6); background: rgba(0,0,0,0.04); }\n@media (max-width: 767px) {\n  .kt-inline-cta-light { background: #111; color: #fff; border-color: #111; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }\n  .kt-inline-cta-light:hover { background: #333; }\n}\n\n\/* \u2500\u2500 Nav scroll-active highlighting \u2500\u2500 *\/\n#menu-main-menu .menu-item a { transition: opacity 0.3s !important; }\n#menu-main-menu .menu-item:not(.kt-nav-active) a { opacity: 0.42 !important; }\n#menu-main-menu .menu-item.kt-nav-active a,\n#menu-main-menu .menu-item a:hover { opacity: 1 !important; }\n\n\/* \u2500\u2500 Section padding reductions \u2500\u2500 *\/\n.kt-pb72 { padding-bottom: 72px !important; }\n\n\n\/* \u2500\u2500 M2: CTA button arrow orphan on narrow phones \u2500\u2500 *\/\n@media (max-width: 430px) {\n  .kt-inline-cta { font-size: 0.72rem; letter-spacing: 0.05em; }\n}\n\n\/* \u2500\u2500 M3: Kontakt stacked gap reduction \u2500\u2500 *\/\n@media (max-width: 768px) {\n  .kt-contact-wrap { gap: 2.5rem; }\n}\n\n\/* \u2500\u2500 M4: Hero centering \u2014 push content up inside absolute-positioned panels \u2500\u2500 *\/\n@media (max-width: 640px) {\n  #kt-sq, #kt-sa { padding-bottom: 12vh !important; }\n}\n\n\/* \u2500\u2500 M5: Contact headline \u2014 26px ensures \"Kein Verkaufsgespr\u00e4ch.\" fits on one line \u2500\u2500 *\/\n@media (max-width: 767px) {\n  .kt-contact-hl { font-size: 26px !important; hyphens: none; }\n}\n\n\/* \u2500\u2500 M6: Intro headline no-orphan already handled in HTML \u2500\u2500 *\/\n\n\/* \u2500\u2500 M7: Warum headline \u2014 reduce for mobile so it stays one line \u2500\u2500 *\/\n@media (max-width: 640px) {\n  .kt-warum-hl { font-size: 1.45rem !important; }\n}\n\n\/* \u2500\u2500 Scroll progress bar \u2014 mobile only \u2500\u2500 *\/\n@media (min-width: 768px) { #kt-progress { display: none; } }\n#kt-progress {\n  position: fixed; top: 0; left: 0; height: 2px;\n  background: rgba(12,12,12,0.35); width: 0%;\n  z-index: 99999; pointer-events: none;\n  transition: width 0.1s linear;\n}\n<\/style>\n\n<script>\n(function() {\n  function initObs() {\n    var els = document.querySelectorAll('.kt-animate, .kt-animate-left, .kt-animate-right');\n    if (!els.length) { return; }\n    var io = new IntersectionObserver(function(entries) {\n      for (var i = 0; i < entries.length; i++) {\n        if (entries[i].isIntersecting) {\n          entries[i].target.classList.add('kt-in');\n          io.unobserve(entries[i].target);\n        }\n      }\n    }, { threshold: 0.12 });\n    for (var j = 0; j < els.length; j++) { io.observe(els[j]); }\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initObs);\n  } else {\n    initObs();\n  }\n\n  \/\/ Hero period: swap round font \".\" with square inline element\n  (function() {\n    function fixDot() {\n      var b = document.querySelector('#kt-sa .kt-brand');\n      if (!b) return;\n      if (b.textContent.trim() !== 'KLARTEXT.') return;\n      b.innerHTML = 'KLARTEXT<span class=\"kt-brand-dot\"><\/span>';\n    }\n    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', fixDot); }\n    else { fixDot(); }\n  })();\n\n  \/\/ Cursor fix: unbind preloader mouseenter\/leave after images load so the\n  \/\/ \"Loading\" cursor can't re-trigger during the 2s fade window, which would\n  \/\/ leave it stuck if visibility:hidden fires without a matching mouseleave.\n  (function() {\n    function patchCursor() {\n      var $ = window.jQuery;\n      if (!$) { setTimeout(patchCursor, 100); return; }\n      if (typeof imagesLoaded === 'undefined') { setTimeout(patchCursor, 100); return; }\n      imagesLoaded('body', function() {\n        $('.preloader-wrap').off('mouseenter mouseleave');\n        $('#ball').removeClass('with-blur');\n        $('#ball p').remove();\n      });\n    }\n    if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', patchCursor); }\n    else { patchCursor(); }\n  })();\n\n  \/\/ Mobile damping patch: theme init call has options commented out, so override after init\n  if (window.innerWidth <= 900) {\n    var dAttempts = 0;\n    var dTimer = setInterval(function() {\n      var sb = window.Scrollbar ? window.Scrollbar.getAll()[0] : null;\n      if (sb) { clearInterval(dTimer); sb.options.damping = 0.2; }\n      else if (++dAttempts > 30) { clearInterval(dTimer); }\n    }, 200);\n  }\n})();\n\n\/\/ \u2500\u2500 Service card 3D tilt \u2500\u2500\n(function() {\n  function initCardTilt() {\n    var container = document.querySelector('.kt-services');\n    if (!container) return;\n    var cards = container.querySelectorAll('.kt-service-card');\n    if (!cards.length) return;\n    var checkTimer = setInterval(function() {\n      var allIn = true;\n      for (var i = 0; i < cards.length; i++) {\n        if (!cards[i].classList.contains('kt-in')) { allIn = false; break; }\n      }\n      if (!allIn) return;\n      clearInterval(checkTimer);\n      for (var j = 0; j < cards.length; j++) {\n        (function(card) {\n          card.addEventListener('mouseenter', function() {\n            container.classList.add('kt-svc-active');\n            card.classList.add('kt-svc-hovered');\n          });\n          card.addEventListener('mousemove', function(e) {\n            var rect = card.getBoundingClientRect();\n            var cx = rect.left + rect.width \/ 2;\n            var cy = rect.top + rect.height \/ 2;\n            var dx = (e.clientX - cx) \/ (rect.width \/ 2);\n            var dy = (e.clientY - cy) \/ (rect.height \/ 2);\n            card.classList.add('kt-tilting');\n            card.style.transform = 'perspective(800px) rotateX(' + (-dy * 5) + 'deg) rotateY(' + (dx * 5) + 'deg) translateZ(8px)';\n          });\n          card.addEventListener('mouseleave', function() {\n            card.classList.remove('kt-tilting');\n            card.classList.remove('kt-svc-hovered');\n            card.style.transform = '';\n            var anyHovered = false;\n            for (var k = 0; k < cards.length; k++) {\n              if (cards[k].classList.contains('kt-svc-hovered')) { anyHovered = true; break; }\n            }\n            if (!anyHovered) { container.classList.remove('kt-svc-active'); }\n          });\n        })(cards[j]);\n      }\n    }, 150);\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initCardTilt);\n  } else {\n    initCardTilt();\n  }\n})();\n\n\/\/ \u2500\u2500 Logo intelligence \u2500\u2500\n(function() {\n  function absTop(el) {\n    var t = 0, n = el;\n    while (n) { t += (n.offsetTop || 0); n = n.offsetParent; }\n    return t;\n  }\n\n  function initLogoSmarts() {\n    var sb = window.Scrollbar ? window.Scrollbar.getAll()[0] : null;\n    if (!sb) { setTimeout(initLogoSmarts, 200); return; }\n    var logoWrap = document.getElementById('logo');\n    if (!logoWrap) return;\n\n    [].forEach.call(logoWrap.querySelectorAll('img'), function(img) { img.style.display = 'none'; });\n    logoWrap.style.overflow = 'visible';\n    logoWrap.style.transition = 'opacity 0.3s ease';\n\n    var c = document.createElement('div');\n    c.style.cssText = 'height:100%;display:flex;align-items:center;position:relative;min-width:80px;';\n    c.innerHTML =\n      '<div id=\"ktl-w\" style=\"white-space:nowrap;transition:opacity 0.4s ease;opacity:0;\">' +\n        '<span id=\"ktl-wt\" style=\"font-family:mona-sansextrabold_wide,Arial Black,sans-serif;font-size:22px;letter-spacing:-0.3px;line-height:1;\">' +\n          'KLARTEXT<span id=\"ktl-wd\" style=\"opacity:0.55\">.<\/span>' +\n        '<\/span>' +\n      '<\/div>' +\n      '<div id=\"ktl-k\" style=\"position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;transition:opacity 0.4s ease;opacity:1;\">' +\n        '<span id=\"ktl-kt\" style=\"font-family:mona-sansextrabold_wide,Arial Black,sans-serif;font-size:28px;line-height:1;display:inline-flex;align-items:flex-end;gap:3px;\">' +\n          '<span>K<\/span><span id=\"ktl-kd\" style=\"width:5px;height:5px;display:inline-block;margin-bottom:3px;flex-shrink:0;\"><\/span>' +\n        '<\/span>' +\n      '<\/div>';\n    logoWrap.appendChild(c);\n\n    var wEl = document.getElementById('ktl-w');\n    var kEl = document.getElementById('ktl-k');\n    var wTxt = document.getElementById('ktl-wt');\n    var kTxt = document.getElementById('ktl-kt');\n    var kDot = document.getElementById('ktl-kd');\n    var hero   = document.getElementById('kt-hero-wrap');\n    var screen = document.getElementById('kt-hero-screen');\n\n    \/\/ Sections and collision zones \u2014 all using absTop() (document-relative, matches sb.offset.y)\n    var secs = [], cols = [], introTop = null, introBot = null, uberMichTop = null, uberMichBot = null;\n    var TEXT_SEL = 'h1,h2,h3,h4,h5,p,li,blockquote,figcaption,' +\n                  '.kt-intro-cols,.kt-about-name,.kt-contact-wrap,.kt-services-grid,.kt-problem-grid';\n    function measure() {\n      secs = [];\n      [].forEach.call(document.querySelectorAll('[data-bgcolor]'), function(el) {\n        secs.push({\n          top: absTop(el),\n          h: el.offsetHeight,\n          dark: (el.getAttribute('data-bgcolor') || '').toLowerCase().trim() === '#0c0c0c',\n          firstTextTop: null\n        });\n      });\n      cols = [];\n      [].forEach.call(document.querySelectorAll(TEXT_SEL), function(el) {\n        if (hero) { if (hero.contains(el)) return; }\n        if (el.offsetHeight < 8) return;\n        var t = absTop(el);\n        cols.push({ top: t - 16, bot: t + el.offsetHeight + 16 });\n      });\n      \/\/ Pre-compute first text element top per section (for sticky ghost)\n      for (var si = 0; si < secs.length; si++) {\n        var secTop = secs[si].top, secBot = secTop + secs[si].h, ftt = null;\n        for (var ci = 0; ci < cols.length; ci++) {\n          if (cols[ci].top >= secTop) {\n            if (cols[ci].top < secBot) {\n              if (ftt === null || cols[ci].top < ftt) ftt = cols[ci].top;\n            }\n          }\n        }\n        secs[si].firstTextTop = ftt;\n      }\n      \/\/ Find Intro section (contains .kt-intro-cols)\n      introTop = null; introBot = null;\n      var introEl = document.querySelector('.kt-intro-cols');\n      if (introEl) {\n        var it = absTop(introEl);\n        for (var si3 = 0; si3 < secs.length; si3++) {\n          if (it >= secs[si3].top) {\n            if (it < secs[si3].top + secs[si3].h) {\n              introTop = secs[si3].top;\n              introBot = secs[si3].top + secs[si3].h;\n            }\n          }\n        }\n      }\n      \/\/ Find \u00dcber mich section (contains .kt-about-name)\n      uberMichTop = null; uberMichBot = null;\n      var aboutEl = document.querySelector('.kt-about-name');\n      if (aboutEl) {\n        var at = absTop(aboutEl);\n        for (var si2 = 0; si2 < secs.length; si2++) {\n          if (at >= secs[si2].top) {\n            if (at < secs[si2].top + secs[si2].h) {\n              uberMichTop = secs[si2].top;\n              uberMichBot = secs[si2].top + secs[si2].h;\n            }\n          }\n        }\n      }\n    }\n    measure();\n    window.addEventListener('resize', function() { setTimeout(measure, 200); });\n\n    function applyColor(dark) {\n      var col = dark ? '#f5f4f0' : '#0c0c0c';\n      var dot = dark ? 'rgba(245,244,240,0.60)' : 'rgba(12,12,12,0.50)';\n      if (wTxt) wTxt.style.color = col;\n      if (kTxt) kTxt.style.color = col;\n      if (kDot) kDot.style.background = dot;\n    }\n    applyColor(false);\n\n    var heroNaturalH = hero ? hero.offsetHeight : 0;\n    var pDark = false, pVis = true, pK = true, heroExited = false;\n    function tick(s) {\n      var y = s.offset.y;\n      var logoY = y + 46;\n\n      \/\/ K. while hero screen is visible; also K. inside \u00dcber mich section\n      var screenOp = screen ? parseFloat(screen.style.opacity || '1') : 1;\n      var inUberMich = false;\n      if (uberMichTop !== null) {\n        if (logoY >= uberMichTop) { if (logoY < uberMichBot) { inUberMich = true; } }\n      }\n      var kMode = (introBot === null || logoY < introBot) || inUberMich;\n\n      var dark = false, secIdx = -1;\n      for (var i = 0; i < secs.length; i++) {\n        if (logoY >= secs[i].top && logoY < secs[i].top + secs[i].h) {\n          dark = secs[i].dark; secIdx = i; break;\n        }\n      }\n\n      \/\/ Sticky ghost: logo ghosts when it reaches the first text in a section,\n      \/\/ stays ghosted for the rest of that section, resets on section entry\n      var vis = true;\n      if (secIdx >= 0 && secs[secIdx].firstTextTop !== null) {\n        vis = logoY < secs[secIdx].firstTextTop;\n      }\n\n      if (dark !== pDark) { pDark = dark; applyColor(dark); }\n      if (vis  !== pVis)  { pVis  = vis;  logoWrap.style.opacity = vis ? '1' : '0.12'; }\n      if (kMode !== pK)   {\n        pK = kMode;\n        kEl.style.opacity = kMode ? '1' : '0';\n        wEl.style.opacity = kMode ? '0' : '1';\n      }\n\n      \/\/ Hero shrink: collapse hero by 1\/3 when screen fades \u2192 pulls intro section up\n      if (screenOp <= 0.01) {\n        if (!heroExited) {\n          heroExited = true;\n          if (hero) {\n            if (!heroNaturalH) { heroNaturalH = hero.offsetHeight; }\n            hero.style.transition = 'height 0.7s cubic-bezier(0.4,0,0.2,1)';\n            hero.style.height = Math.round(heroNaturalH * 3 \/ 4) + 'px';\n            setTimeout(function() { sb.update(); measure(); }, 750);\n          }\n        }\n      } else {\n        if (heroExited) {\n          heroExited = false;\n          if (hero) {\n            hero.style.transition = 'height 0.5s ease';\n            hero.style.height = heroNaturalH + 'px';\n            setTimeout(function() { hero.style.height = ''; hero.style.transition = ''; sb.update(); measure(); }, 550);\n          }\n        }\n      }\n    }\n\n    sb.addListener(tick);\n    tick({ offset: { y: sb.scrollTop || 0 } });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initLogoSmarts);\n  } else {\n    initLogoSmarts();\n  }\n})();\n\n\/\/ \u2500\u2500 Nav active highlighting \u2500\u2500\n(function() {\n  function absTop(el) {\n    var t = 0, n = el;\n    while (n) { t += (n.offsetTop || 0); n = n.offsetParent; }\n    return t;\n  }\n\n  function initNavHighlight() {\n    var sb = window.Scrollbar ? window.Scrollbar.getAll()[0] : null;\n    if (!sb) { setTimeout(initNavHighlight, 200); return; }\n\n    var defs = [\n      { sel: '.kt-services',    href: '\/#angebote' },\n      { sel: '.kt-process',     href: '\/#vorgehen' },\n      { sel: '.kt-warum-wrap',  href: '\/#ueber-mich' },\n      { sel: '#kt-contact-form', href: '\/#kontakt' }\n    ];\n\n    var items = defs.map(function(d) {\n      var el = document.querySelector(d.sel);\n      var a  = document.querySelector('a[href=\"' + d.href + '\"]');\n      var li = a ? a.closest('li') : null;\n      return { el: el, li: li };\n    });\n\n    function tick(s) {\n      var y = s.offset.y + Math.round(window.innerHeight * 0.35);\n      var activeIdx = -1;\n      for (var i = 0; i < items.length; i++) {\n        if (items[i].el) {\n          if (y >= absTop(items[i].el)) { activeIdx = i; }\n        }\n      }\n      for (var j = 0; j < items.length; j++) {\n        if (items[j].li) {\n          if (j === activeIdx) {\n            items[j].li.classList.add('kt-nav-active');\n          } else {\n            items[j].li.classList.remove('kt-nav-active');\n          }\n        }\n      }\n    }\n\n    sb.addListener(tick);\n    tick({ offset: { y: sb.scrollTop || 0 } });\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initNavHighlight);\n  } else {\n    initNavHighlight();\n  }\n})();\n\n\/\/ \u2500\u2500 Scroll progress bar \u2500\u2500\n(function() {\n  function initProgress() {\n    var sb = window.Scrollbar ? window.Scrollbar.getAll()[0] : null;\n    if (!sb) { setTimeout(initProgress, 200); return; }\n    var bar = document.createElement('div');\n    bar.id = 'kt-progress';\n    document.body.appendChild(bar);\n    sb.addListener(function(s) {\n      var total = sb.limit ? sb.limit.y : 0;\n      var pct = total > 0 ? Math.min(100, (s.offset.y \/ total) * 100) : 0;\n      bar.style.width = pct + '%';\n    });\n  }\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initProgress);\n  } else {\n    initProgress();\n  }\n})();\n<\/script>\n\n\n<span id=\"home\" style=\"position:absolute;visibility:hidden;pointer-events:none\"><\/span>\n\n<!-- INTRO -->\n\n<div class=\"wp-block-manifesto-gutenberg-container content-row dark-section full row_padding_top row_padding_bottom row_padding_left row_padding_right kt-intro-first\" data-bgcolor=\"#0c0c0c\" style=\"text-align:left\">\n\n\n<div class=\"kt-intro-cols\">\n  <div class=\"kt-animate\">\n    <h2 style=\"font-size:clamp(2rem,4vw,3.5rem);font-weight:800;line-height:1.05;color:#fff;margin:0;letter-spacing:-0.025em;hyphens:none\">Klartext.<br\/><span style=\"white-space:nowrap\">Keine Worth\u00fclsen.<\/span><\/h2>\n  <\/div>\n  <div class=\"kt-intro-body kt-animate kt-d2\">\n    <p>Ich helfe KMU in der Schweiz dabei, klarer zu kommunizieren \u2014 nach innen wie nach aussen. Von der Positionierung bis zum \u00fcberzeugenden Text. Journalistisch geschult. Pragmatisch umgesetzt.<\/p>\n    <a href=\"#kontakt\" class=\"kt-inline-cta\">Kommunikations-Check anfragen &rarr;<\/a>\n  <\/div>\n<\/div>\n\n\n<\/div>\n\n\n<!-- PROBLEM -->\n<span id=\"problem\" style=\"position:absolute;visibility:hidden;pointer-events:none\"><\/span>\n\n\n<div class=\"wp-block-manifesto-gutenberg-container content-row light-section full row_padding_top row_padding_bottom row_padding_left row_padding_right change-header-color fadeout-element kt-pb72\" data-bgcolor=\"#f5f4f0\" style=\"text-align:left\">\n\n\n<h2 class=\"kt-animate\" style=\"color:#111;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.08;font-weight:800;margin:0 0 3.5rem;hyphens:none\">Wenn Kommunikation mehr verwirrt als erkl\u00e4rt.<\/h2>\n<div class=\"kt-problem-strips\">\n  <div class=\"kt-pstrip kt-animate kt-d1\">\n    <div class=\"kt-pstrip-lhs\">\n      <span class=\"kt-pstrip-num\">01<\/span>\n      <p class=\"kt-pstrip-left\">Die Konkurrenz gewinnt, obwohl Sie bessere Arbeit liefern.<\/p>\n    <\/div>\n    <p class=\"kt-pstrip-right\">Nicht weil sie besser ist. Sondern weil sie sich klarer erkl\u00e4rt. Wer seine Botschaft nicht auf den Punkt bringt, verliert Auftr\u00e4ge.<\/p>\n  <\/div>\n  <div class=\"kt-pstrip kt-animate kt-d2\">\n    <div class=\"kt-pstrip-lhs\">\n      <span class=\"kt-pstrip-num\">02<\/span>\n      <p class=\"kt-pstrip-left\">Die Website beantwortet nicht die wichtigste Frage.<\/p>\n    <\/div>\n    <p class=\"kt-pstrip-right\">Warum Sie \u2014 und nicht die Konkurrenz? Wenn das nicht klar ist, arbeiten Sie t\u00e4glich gegen sich selbst.<\/p>\n  <\/div>\n  <div class=\"kt-pstrip kt-animate kt-d3\">\n    <div class=\"kt-pstrip-lhs\">\n      <span class=\"kt-pstrip-num\">03<\/span>\n      <p class=\"kt-pstrip-left\">Der Auftritt wirkt solide, aber nicht unverwechselbar.<\/p>\n    <\/div>\n    <p class=\"kt-pstrip-right\">Kein roter Faden. Keine klare Positionierung. Solide ist gut, aber solide ist auch austauschbar.<\/p>\n  <\/div>\n  <div class=\"kt-pstrip kt-animate kt-d4\">\n    <div class=\"kt-pstrip-lhs\">\n      <span class=\"kt-pstrip-num\">04<\/span>\n      <p class=\"kt-pstrip-left\">Sie wissen, was Sie k\u00f6nnen \u2014 Ihre Kundschaft weiss es nicht.<\/p>\n    <\/div>\n    <p class=\"kt-pstrip-right\">Das ist kein Angebots-Problem. Es ist ein Kommunikations-Problem.<\/p>\n  <\/div>\n<\/div>\n\n\n<\/div>\n\n\n<!-- ANGEBOTE -->\n<span id=\"angebote\" style=\"position:absolute;visibility:hidden;pointer-events:none\"><\/span>\n\n\n<div class=\"wp-block-manifesto-gutenberg-container content-row dark-section full row_padding_top row_padding_bottom row_padding_left row_padding_right kt-pb72\" data-bgcolor=\"#0c0c0c\" style=\"text-align:left\">\n\n\n<h2 class=\"kt-animate\" style=\"font-size:clamp(2rem,4vw,3.5rem);font-weight:800;line-height:1.05;margin:0;letter-spacing:-0.02em;color:#fff;hyphens:none\">Je nachdem, wo der Schuh dr\u00fcckt.<\/h2>\n<div class=\"kt-services\">\n  <div class=\"kt-service-card kt-animate kt-d1\">\n    <span class=\"kt-card-ghost\">01<\/span>\n    <span class=\"kt-service-tag\" style=\"color:rgba(255,255,255,0.75)\">Audit<\/span>\n    <p class=\"kt-service-title\" style=\"color:#fff\">Kommunikations-Check<\/p>\n    <p class=\"kt-service-desc\" style=\"color:#fff\">Ein kompakter Audit Ihrer Website und Kommunikationsmaterialien. Ehrlicher Blick von aussen \u2014 konkrete Empfehlungen, die Sie sofort umsetzen k\u00f6nnen.<\/p>\n  <\/div>\n  <div class=\"kt-service-card kt-animate kt-d2\">\n    <span class=\"kt-card-ghost\">02<\/span>\n    <span class=\"kt-service-tag\" style=\"color:rgba(255,255,255,0.75)\">Strategie<\/span>\n    <p class=\"kt-service-title\" style=\"color:#fff\">Positionierung &amp; Botschaft<\/p>\n    <p class=\"kt-service-desc\" style=\"color:#fff\">Wir erarbeiten gemeinsam, wof\u00fcr Ihr Unternehmen steht, wen Sie ansprechen \u2014 und wie Sie das so ausdr\u00fccken, dass es \u00fcberzeugt. Substanz, kein Hochglanz.<\/p>\n  <\/div>\n  <div class=\"kt-service-card kt-animate kt-d3\">\n    <span class=\"kt-card-ghost\">03<\/span>\n    <span class=\"kt-service-tag\" style=\"color:rgba(255,255,255,0.75)\">Retainer<\/span>\n    <p class=\"kt-service-title\" style=\"color:#fff\">Laufende Begleitung<\/p>\n    <p class=\"kt-service-desc\" style=\"color:#fff\">Monatlicher Retainer. Direkter Zugang zu einem Kommunikationsprofi \u2014 f\u00fcr Feedback, Texte und strategische Entscheidungen. Kein Ticket-System.<\/p>\n  <\/div>\n<\/div>\n<div style=\"text-align:center;margin-top:2.8rem\" class=\"kt-animate kt-d4\">\n  <a href=\"#kontakt\" class=\"kt-inline-cta\">Kommunikations-Check anfragen &rarr;<\/a>\n<\/div>\n\n\n<\/div>\n\n\n<!-- VORGEHEN -->\n<span id=\"vorgehen\" style=\"position:absolute;visibility:hidden;pointer-events:none\"><\/span>\n\n\n<div class=\"wp-block-manifesto-gutenberg-container content-row light-section full row_padding_top row_padding_bottom row_padding_left row_padding_right change-header-color fadeout-element kt-pb72\" data-bgcolor=\"#f5f4f0\" style=\"text-align:left\">\n\n\n<h2 class=\"kt-animate\" style=\"color:#111;font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;line-height:1.08;margin:0 0 2.5rem;hyphens:none\">Kein Konzept f\u00fcr die Schublade.<\/h2>\n<div class=\"kt-process\">\n  <div class=\"kt-pcard kt-animate kt-d1\">\n    <div class=\"kt-pcard-top\">\n      <span class=\"kt-pcard-num\">01<\/span>\n      <p class=\"kt-pcard-title\">Zuh\u00f6ren<\/p>\n      <p class=\"kt-pcard-desc\">Ich verstehe Ihr Unternehmen, Ihre Ziele und Ihre Zielgruppe \u2014 bevor ich eine Zeile schreibe.<\/p>\n    <\/div>\n    <div class=\"kt-pcard-bot\">\n      <span class=\"kt-pcard-label\">F\u00fcr Sie heisst das<\/span>\n      <p class=\"kt-pcard-text\">Ich stelle viele Fragen \u2014 auch unbequeme. Was genau tun Sie? F\u00fcr wen? Was sagen Ihre Kunden, wenn sie Sie weiterempfehlen? Erst wenn ich das wirklich verstanden habe, fange ich an zu arbeiten.<\/p>\n    <\/div>\n  <\/div>\n  <div class=\"kt-pcard kt-animate kt-d2\">\n    <div class=\"kt-pcard-top\">\n      <span class=\"kt-pcard-num\">02<\/span>\n      <p class=\"kt-pcard-title\">Hinterfragen<\/p>\n      <p class=\"kt-pcard-desc\">Ich stelle die Fragen, die intern niemand stellt \u2014 und bringe auf den Punkt, was Ihr Unternehmen wirklich ausmacht.<\/p>\n    <\/div>\n    <div class=\"kt-pcard-bot\">\n      <span class=\"kt-pcard-label\">F\u00fcr Sie heisst das<\/span>\n      <p class=\"kt-pcard-text\">Sie bekommen eine Botschaft, die wirklich stimmt \u2014 nicht eine, die \u00abgut klingt\u00bb. Oft liegt die klarste Formulierung in der Antwort auf eine Frage, die vorher nie gestellt wurde.<\/p>\n    <\/div>\n  <\/div>\n  <div class=\"kt-pcard kt-animate kt-d3\">\n    <div class=\"kt-pcard-top\">\n      <span class=\"kt-pcard-num\">03<\/span>\n      <p class=\"kt-pcard-title\">Liefern<\/p>\n      <p class=\"kt-pcard-desc\">Texte, Konzepte, Empfehlungen \u2014 fertig ausgearbeitet, direkt einsetzbar. Kein Entwurf zum \u00dcberarbeiten, keine Rohfassung zum Weiterspinnen.<\/p>\n    <\/div>\n    <div class=\"kt-pcard-bot\">\n      <span class=\"kt-pcard-label\">F\u00fcr Sie heisst das<\/span>\n      <p class=\"kt-pcard-text\">Sie halten am Ende ein fertiges Dokument in der Hand. Kein Konzept zum Weiterdenken \u2014 ein Ergebnis, das Sie direkt einsetzen k\u00f6nnen.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n<div style=\"margin-top:3rem\" class=\"kt-animate kt-d4\">\n  <a href=\"#kontakt\" class=\"kt-inline-cta-light\">Bereit? Dann starten wir. \u2192<\/a>\n<\/div>\n\n\n<\/div>\n\n\n<!-- WARUM KLARTEXT -->\n<span id=\"ueber-mich\" style=\"position:absolute;visibility:hidden;pointer-events:none\"><\/span>\n\n\n<div class=\"wp-block-manifesto-gutenberg-container content-row dark-section full\" data-bgcolor=\"#0c0c0c\" style=\"text-align:left\">\n\n\n<div class=\"kt-warum-wrap\">\n  <div class=\"kt-warum-left kt-animate-left\">\n    <img decoding=\"async\" src=\"https:\/\/klartext-kommunikation.ch\/wp-content\/uploads\/2026\/05\/yannick_trachsel-scaled.jpg\" alt=\"Yannick Trachsel\" loading=\"lazy\">\n  <\/div>\n  <div class=\"kt-warum-right\">\n    <p class=\"kt-warum-hl kt-animate\">Warum Klartext \u2014<br\/>und nicht eine Agentur?<\/p>\n    <p class=\"kt-warum-intro kt-animate kt-d1\">Ich bin Kommunikationsberater \u2014 kein Konzeptlieferant, der Sie danach mit einer Pr\u00e4sentation alleine l\u00e4sst. Ich arbeite mit KMU in der Deutschschweiz, die wissen, was sie k\u00f6nnen, aber M\u00fche haben, es zu sagen.<\/p>\n    <div class=\"kt-warum-strip kt-animate kt-d2\">\n      <span class=\"kt-warum-label\">Direkter Zugang<\/span>\n      <p class=\"kt-warum-body\">Sie reden immer mit mir \u2014 nicht mit einem Junior-Account, nicht mit einem Projektmanager, der weiterleitet. Sie sind direkt bei der Person, die Ihre Kommunikation umsetzt.<\/p>\n    <\/div>\n    <div class=\"kt-warum-strip kt-animate kt-d3\">\n      <span class=\"kt-warum-label\">Journalistische Sch\u00e4rfe<\/span>\n      <p class=\"kt-warum-body\">Als Journalist habe ich gelernt, f\u00fcr Leser zu schreiben \u2014 nicht f\u00fcr Auftraggeber. Das heisst: klar, ohne Umwege, und mit dem Blick von aussen, den Sie intern nie kriegen.<\/p>\n    <\/div>\n    <div class=\"kt-warum-strip kt-animate kt-d4\">\n      <span class=\"kt-warum-label\">Keine Agentur-Logik<\/span>\n      <p class=\"kt-warum-body\">Kein Overhead, kein Aufbl\u00e4hungsanreiz, kein Konzept f\u00fcr die Schublade. Sie bezahlen f\u00fcr fertige Arbeit \u2014 nicht f\u00fcr Strukturen, Meetings und Stundens\u00e4tze.<\/p>\n    <\/div>\n    <div class=\"kt-warum-strip kt-animate kt-d5\">\n      <span class=\"kt-warum-label\">Klartext statt Optionen<\/span>\n      <p class=\"kt-warum-body\">Ich liefere eine Empfehlung, keine drei Varianten zur Auswahl. Ich sage Ihnen, was funktioniert \u2014 und auch, was nicht. Das ist manchmal unbequem. Es ist immer ehrlich.<\/p>\n    <\/div>\n    <div class=\"kt-warum-divider\"><\/div>\n    <a href=\"#kontakt\" class=\"kt-warum-cta\">\u00dcberzeugt? 30 Minuten reichen. \u2192<\/a>\n    <span class=\"kt-warum-creds\">Kommunikationsberater seit 2020 \u00b7 MAZ \u2014 Die Schweizer Journalistenschule, Luzern \u00b7 Biel, Schweiz<\/span>\n  <\/div>\n<\/div>\n\n\n<\/div>\n\n\n<!-- KONTAKT -->\n<span id=\"kontakt\" style=\"position:absolute;visibility:hidden;pointer-events:none\"><\/span>\n\n\n<div class=\"wp-block-manifesto-gutenberg-container content-row dark-section full row_padding_top row_padding_bottom row_padding_left row_padding_right kt-pb72\" data-bgcolor=\"#0c0c0c\" style=\"text-align:left\">\n\n\n<h2 class=\"kt-contact-hl kt-animate\">30 Minuten.<br\/>Kein Verkaufsgespr\u00e4ch.<\/h2>\n<span class=\"kt-contact-sub kt-animate kt-d1\">Ich h\u00f6re zu. Das ist alles.<\/span>\n<div class=\"kt-contact-wrap\">\n  <div class=\"kt-animate kt-d2\">\n    <div>\n      <div class=\"kt-cdetail-row\">\n        <span class=\"kt-cdetail-label\">E-Mail<\/span>\n        <span class=\"kt-cdetail-val\"><a href=\"mailto:info@klartext-kommunikation.ch\">info@klartext-kommunikation.ch<\/a><\/span>\n      <\/div>\n      <div class=\"kt-cdetail-row\">\n        <span class=\"kt-cdetail-label\">Telefon<\/span>\n        <span class=\"kt-cdetail-val\"><a href=\"tel:+41786533295\">+41 78 653 32 95<\/a><\/span>\n      <\/div>\n      <div class=\"kt-cdetail-row\">\n        <span class=\"kt-cdetail-label\">Standort<\/span>\n        <span class=\"kt-cdetail-val\">Biel, Schweiz<\/span>\n      <\/div>\n      <div class=\"kt-cdetail-row\">\n        <span class=\"kt-cdetail-label\">Antwortzeit<\/span>\n        <span class=\"kt-cdetail-val\">Innerhalb von 24 Stunden<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"kt-animate kt-d3\">\n    <form id=\"kt-contact-form\" style=\"width:100%\">\n      <div class=\"kt-field\">\n        <label for=\"kt-name\">Ihr Name *<\/label>\n        <input type=\"text\" id=\"kt-name\" name=\"your-name\" required placeholder=\"Ihr Name\">\n      <\/div>\n      <div class=\"kt-field\">\n        <label for=\"kt-email\">Ihre E-Mail-Adresse *<\/label>\n        <input type=\"email\" id=\"kt-email\" name=\"your-email\" required placeholder=\"ihre@email.ch\">\n      <\/div>\n      <div class=\"kt-field\">\n        <label for=\"kt-message\">Ihre Nachricht<\/label>\n        <textarea id=\"kt-message\" name=\"your-message\" rows=\"4\" placeholder=\"Womit kann ich Ihnen helfen?\"><\/textarea>\n      <\/div>\n      <div id=\"kt-status\" style=\"margin:1rem 0;font-size:0.9rem;min-height:1.4rem\"><\/div>\n      <button type=\"submit\">Nachricht senden &rarr;<\/button>\n    <\/form>\n  <\/div>\n<\/div>\n<script>\n(function() {\n  var form = document.getElementById('kt-contact-form');\n  if (!form) { return; }\n  form.addEventListener('submit', function(e) {\n    e.preventDefault();\n    var btn = form.querySelector('button[type=\"submit\"]');\n    var status = document.getElementById('kt-status');\n    btn.disabled = true;\n    btn.textContent = 'Wird gesendet\u2026';\n    var fd = new FormData(form);\n    fd.append('_wpcf7', '14');\n    fd.append('_wpcf7_version', '5');\n    fd.append('_wpcf7_locale', 'de_DE');\n    fd.append('_wpcf7_unit_tag', 'wpcf7-f14-p656-o1');\n    fd.append('_wpcf7_container_post', '656');\n    fetch('\/index.php\/wp-json\/contact-form-7\/v1\/contact-forms\/14\/feedback', {\n      method: 'POST',\n      body: fd\n    })\n    .then(function(r) { return r.json(); })\n    .then(function(d) {\n      if (d.status === 'mail_sent') {\n        status.style.color = 'rgba(255,255,255,0.7)';\n        status.textContent = 'Danke! Ich melde mich in K\u00fcrze.';\n        form.reset();\n      } else {\n        status.style.color = '#f66';\n        status.textContent = d.message ? d.message : 'Fehler. Bitte versuchen Sie es erneut.';\n      }\n      btn.disabled = false;\n      btn.textContent = 'Nachricht senden \u2192';\n    })\n    .catch(function() {\n      status.style.color = '#f66';\n      status.textContent = 'Netzwerkfehler.';\n      btn.disabled = false;\n      btn.textContent = 'Nachricht senden \u2192';\n    });\n  });\n})();\n<\/script>\n\n\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>Werden Sie verstanden? KLARTEXT. Kommunikation f\u00fcr KMU Scroll<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-656","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/pages\/656","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/comments?post=656"}],"version-history":[{"count":66,"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/pages\/656\/revisions"}],"predecessor-version":[{"id":770,"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/pages\/656\/revisions\/770"}],"wp:attachment":[{"href":"https:\/\/klartext-kommunikation.ch\/index.php\/wp-json\/wp\/v2\/media?parent=656"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}