{"id":125,"date":"2026-03-09T18:52:55","date_gmt":"2026-03-09T17:52:55","guid":{"rendered":"https:\/\/dev.katharina-salanga.de\/?page_id=125"},"modified":"2026-04-08T00:11:44","modified_gmt":"2026-04-07T22:11:44","slug":"animation","status":"publish","type":"page","link":"https:\/\/dev.katharina-salanga.de\/","title":{"rendered":""},"content":{"rendered":"\n<div class=\"ideen-section\">\n  <div class=\"ideen-block\">\n\n    <p class=\"ideen-line\">\n      Ich arbeite an der Schnittstelle von Sprache, Pr\u00e4zision und Resonanz.\n    <\/p>\n\n    <p class=\"ideen-line\">\n      Ich entwickle Klarheit aus Komplexit\u00e4t und mache Gedanken sichtbar.\n    <\/p>\n\n    <p class=\"ideen-line\">\n      Ich gebe Ideen eine Form, die \n      <span id=\"ideen-rotierend\" class=\"typing\"><\/span>\n      ist.\n    <\/p>\n\n  <\/div>\n<\/div>\n\n<style>\n  \/* Abstand *\/\n  .ideen-section {\n    padding: 25px 0 70px 0;\n  }\n\n  \/* Block *\/\n  .ideen-block {\n    text-align: center;\n    margin: 0 auto;\n    max-width: 1100px;\n    background: #f2f2f2;\n    padding: 28px 36px;\n    position: relative;\n\n    \/* \u2728 Soft Block Fade *\/\n    opacity: 0;\n    transform: translateY(10px);\n    animation: ideenBlockFade 0.9s ease-out forwards;\n    animation-delay: 0.2s;\n  }\n\n  @keyframes ideenBlockFade {\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  \/* \u2728 Underline Reveal *\/\n  .ideen-block::after {\n    content: \"\";\n    position: absolute;\n    bottom: -18px;\n    left: 50%;\n    width: 0;\n    height: 1px;\n    background: #ccc;\n    transform: translateX(-50%);\n    animation: ideenUnderline 1.2s ease-out forwards;\n    animation-delay: 1.1s; \/* nach dem Fade *\/\n  }\n\n  @keyframes ideenUnderline {\n    to { width: 120px; }\n  }\n\n  \/* Textzeilen *\/\n  .ideen-line {\n    font-family: \"Crimson Text\", serif;\n    font-size: 26px;\n    font-weight: 500;\n    color: #111;\n    line-height: 1.2 !important;\n    margin: 0 0 -1px 0 !important;\n    padding: 0 !important;\n  }\n\n  \/* Typing-Effekt *\/\n  .typing {\n    display: inline-block;\n    white-space: nowrap;\n    overflow: hidden;\n    vertical-align: bottom;\n    border-right: 2px solid #666;\n    padding-right: 2px;\n    color: #666;\n    text-shadow: 0 1px 1px rgba(0,0,0,0.18);\n  }\n<\/style>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", function () {\n    const words = [\n      \"\u00fcberzeugend\",\n      \"durchdacht\",\n      \"inspirierend\",\n      \"stimmig\",\n      \"zeitgem\u00e4\u00df\",\n      \"strukturiert\",\n      \"kraftvoll\"\n    ];\n\n    const span = document.getElementById(\"ideen-rotierend\");\n    let wordIndex = 0;\n    let charIndex = 0;\n    let deleting = false;\n\n    const typingSpeed = 90;\n    const deletingSpeed = 60;\n    const pauseTime = 900;\n\n    function type() {\n      const currentWord = words[wordIndex];\n\n      if (!deleting) {\n        span.textContent = currentWord.substring(0, charIndex + 1);\n        charIndex++;\n\n        if (charIndex === currentWord.length) {\n          deleting = true;\n          setTimeout(type, pauseTime);\n          return;\n        }\n      } else {\n        span.textContent = currentWord.substring(0, charIndex - 1);\n        charIndex--;\n\n        if (charIndex === 0) {\n          deleting = false;\n          wordIndex = (wordIndex + 1) % words.length;\n        }\n      }\n\n      setTimeout(type, deleting ? deletingSpeed : typingSpeed);\n    }\n\n    type();\n  });\n<\/script>\n\n\n\n<div class=\"sadie-grid\">\n  \n  <!-- MARKETING -->\n  <div class=\"sadie-item reveal\">\n    <img decoding=\"async\" class=\"sadie-bg marketing-bg\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Marketing.jpg\" alt=\"Marketing\">\n    <div class=\"sadie-overlay\">\n      <svg class=\"sadie-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 108.95 122.88\" fill=\"#ffffff\">\n        <path d=\"M35.48,0H79.61A13.28,13.28,0,0,1,92.88,13.28V39.85H88.29V13.15H26.78v4.5H22.2V13.26A13.25,13.25,0,0,1,35.48,0ZM20.6,40.08l9.12,6.36a1.42,1.42,0,0,1,.42.39,1.36,1.36,0,0,1-.35,1.9L20.69,55a1.39,1.39,0,0,1-.87.3A1.37,1.37,0,0,1,18.45,54V41.19a1.43,1.43,0,0,1,.26-.78,1.36,1.36,0,0,1,1.89-.33ZM5,25.67H43.89a5,5,0,0,1,3.5,1.45l.09.1a4.92,4.92,0,0,1,1.37,3.41V58.84a5,5,0,0,1-5,5H5a5,5,0,0,1-5-5V30.63a5,5,0,0,1,5-5Zm41.22,8.41H2.66V58.84A2.32,2.32,0,0,0,5,61.15H43.89a2.29,2.29,0,0,0,2.3-2.31V34.08Zm37,53-9.59,9.19a1.48,1.48,0,0,1-1.13.51A1.52,1.52,0,0,1,71,95.25V87.07H65.92A3.93,3.93,0,0,1,62,83.18V53.34a3.93,3.93,0,0,1,3.89-3.89h39.14A3.91,3.91,0,0,1,109,53.34V83.18a3.91,3.91,0,0,1-3.89,3.89Zm-10.12-12a2,2,0,1,1,0-4h21a2,2,0,1,1,0,4Zm0-10.63a2,2,0,0,1,0-4H98.83a2,2,0,0,1,0,4Zm19.77,31V109.6a13.28,13.28,0,0,1-13.27,13.28H35.48A13.28,13.28,0,0,1,22.2,109.6V71.83h4.58v32.61H88.29v-9ZM57.52,108.6a5.46,5.46,0,1,1-5.46,5.45,5.44,5.44,0,0,1,5.46-5.45Z\"\/>\n      <\/svg>\n      <div class=\"sadie-line\"><\/div>\n      <h3>Marketing<\/h3>\n      <p>Durchdachte Marketingstrategien und hochwertige Inhalte, die Unternehmen sichtbar, relevant und konsistent positionieren.<\/p>\n      <a href=\"\/kompetenz\/\" class=\"pc-btn sadie-btn\">Mehr erfahren <span class=\"pc-arrow\">\u203a<\/span><\/a>\n    <\/div>\n  <\/div>\n\n  <!-- RHETORIK -->\n  <div class=\"sadie-item reveal\">\n    <img decoding=\"async\" class=\"sadie-bg\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Rhetorik.jpg\" alt=\"Rhetorik\">\n    <div class=\"sadie-overlay\">\n      <svg class=\"sadie-icon rhetorik-icon\"\n           xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n           viewBox=\"0 0 373 511.86\"\n           fill=\"#ffffff\"\n           stroke=\"#ffffff\"\n           stroke-width=\"3\">\n        <path fill-rule=\"nonzero\" d=\"M22.16 0h328.68c6.07 0 11.61 2.5 15.62 6.5 4.04 4.05 6.54 9.59 6.54 15.66v43.73c0 6.04-2.5 11.58-6.51 15.61l-.05.04c-4.01 4.01-9.54 6.5-15.6 6.5h-5.36v43.83c0 6.05-2.5 11.61-6.53 15.63a21.966 21.966 0 0 1-15.63 6.53h-18.09v347.95c0 5.45-4.43 9.88-9.88 9.88H77.65c-5.46 0-9.88-4.43-9.88-9.88V154.03H49.68c-6.07 0-11.61-2.5-15.62-6.51-4.04-4.04-6.54-9.58-6.54-15.65V88.04h-5.36c-6.08 0-11.61-2.49-15.62-6.5C2.5 77.49 0 71.96 0 65.89V22.16c0-6.07 2.5-11.61 6.5-15.62C10.55 2.5 16.08 0 22.16 0zm174.22 440.61c0 5.45-4.42 9.88-9.88 9.88-5.45 0-9.88-4.43-9.88-9.88V206.58c0-5.46 4.43-9.88 9.88-9.88 5.46 0 9.88 4.42 9.88 9.88v234.03zm52.89 0c0 5.45-4.43 9.88-9.88 9.88-5.46 0-9.88-4.43-9.88-9.88V206.58c0-5.46 4.42-9.88 9.88-9.88 5.45 0 9.88 4.42 9.88 9.88v234.03zm-105.78 0c0 5.45-4.43 9.88-9.88 9.88-5.45 0-9.88-4.43-9.88-9.88V206.58c0-5.46 4.43-9.88 9.88-9.88 5.45 0 9.88 4.42 9.88 9.88v234.03zM78.16 134.28h216.68l.51-.01h27.97c.65 0 1.26-.28 1.69-.72.44-.4.71-1.01.71-1.68V87.69H47.28v44.18c0 .66.27 1.28.69 1.71.43.42 1.04.69 1.71.69h27.97l.51.01zm207.31 19.76H87.53V492.1h197.94V154.04zM35.46 68.28c.84-.23 1.72-.35 2.64-.35h294.68c.92 0 1.81.12 2.66.36l.16-.01h15.24c.67 0 1.27-.26 1.69-.67.44-.45.71-1.05.71-1.72V22.16c0-.67-.27-1.28-.69-1.71-.43-.42-1.04-.69-1.71-.69H22.16c-.67 0-1.28.27-1.71.69-.42.43-.69 1.04-.69 1.71v43.73c0 .66.27 1.27.69 1.7.43.42 1.04.69 1.71.69h13.3z\"\/>\n      <\/svg>\n      <div class=\"sadie-line rhetorik-line\"><\/div>\n      <h3>Rhetorik<\/h3>\n      <p>Professionelle Rhetorik und Kommunikationsberatung mit Fokus auf klare Botschaften, \u00fcberzeugende Auftritte und wirksame Gespr\u00e4che.<\/p>\n      <a href=\"\/kompetenz\/\" class=\"pc-btn sadie-btn\">Mehr erfahren <span class=\"pc-arrow\">\u203a<\/span><\/a>\n    <\/div>\n  <\/div>\n\n  <!-- TEXT -->\n  <div class=\"sadie-item reveal\">\n    <img decoding=\"async\" class=\"sadie-bg text-bg\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Text.jpg\" alt=\"Text\">\n    <div class=\"sadie-overlay\">\n      <svg class=\"sadie-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 108.81 122.88\" fill=\"#ffffff\">\n        <path fill-rule=\"evenodd\" d=\"M62.72,69.75H99.84a9,9,0,0,1,9,9V113.9a9,9,0,0,1-9,9H62.72a9,9,0,0,1-9-9V78.72a9,9,0,0,1,9-9Zm24-33.24H94.6a6.82,6.82,0,0,1,4.88,2,6.91,6.91,0,0,1,2,4.88V60.21h-6V43.42a1,1,0,0,0-.28-.7,1,1,0,0,0-.71-.28H86.75V60.2H80.44V35H54.21A3.17,3.17,0,0,1,51,31.83V6.29H6.32v95.48H43.76v6.31H16.37V116a1,1,0,0,0,1,1H43.74v5.93H17.39A7,7,0,0,1,10.47,116v-7.88H5.66a5.66,5.66,0,0,1-4-1.65,5.6,5.6,0,0,1-1.66-4V5.65A5.65,5.65,0,0,1,5.66,0H54.21a3.09,3.09,0,0,1,2.42,1.16l27.83,27a3.15,3.15,0,0,1,2.29,3v5.29Z\"\/>\n      <\/svg>\n      <div class=\"sadie-line\"><\/div>\n      <h3>Text<\/h3>\n      <p>Zielgruppengerechter Text f\u00fcr Web, Print oder Corporate\u2011Kommunikation, der aus pr\u00e4ziser Analyse, klarer Formulierung und stilistischer Sorgfalt entsteht.<\/p>\n      <a href=\"\/kompetenz\/\" class=\"pc-btn sadie-btn\">Mehr erfahren <span class=\"pc-arrow\">\u203a<\/span><\/a>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<style>\n.sadie-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 30px;\n}\n\n.sadie-item {\n  position: relative;\n  overflow: hidden;\n  height: 350px;\n  background: #111;\n  cursor: pointer;\n}\n\n.sadie-bg {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  filter: brightness(0.55);\n  transition: filter 0.4s ease;\n}\n\n.marketing-bg,\n.text-bg {\n  filter: brightness(0.45);\n}\n\n.sadie-overlay {\n  position: absolute;\n  inset: 0;\n  padding: 28px 22px;\n  text-align: center;\n  color: #fff;\n}\n\n.sadie-icon {\n  width: 42px;\n}\n\n.rhetorik-icon {\n  width: 32px;\n  margin-top: 4px;\n}\n\n.sadie-line {\n  width: 34px;\n  height: 1px;\n  background: #fff;\n  margin: 8px auto 18px auto;\n}\n\n.rhetorik-line {\n  margin-top: 10px; \/* FIX: Linie nach unten verschoben *\/\n}\n\n.sadie-overlay h3 {\n  position: absolute;\n  top: 36%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 24px;\n  letter-spacing: 1.8px;\n  font-weight: 300;\n  text-transform: uppercase;\n  color: #fff;\n}\n\n.sadie-overlay p {\n  position: absolute;\n  bottom: -55px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 80%;\n  opacity: 0;\n  color: #fff;\n  transition: all 0.45s ease;\n  font-family: \"Crimson Text\", serif;\n  font-size: 17px;\n  line-height: 1.35;\n}\n\n.sadie-item:hover .sadie-bg { filter: brightness(0.35); }\n.sadie-item:hover .text-bg { filter: brightness(0.30); }\n.sadie-item:hover h3 { opacity: 0; }\n.sadie-item:hover p { bottom: 32px; opacity: 1; }\n\n.sadie-btn {\n  margin-top: 22px;\n  padding: 8px 18px;\n  background: #fff;\n  border: 1px solid #111;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: \"Crimson Text\", serif;\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: #111;\n  opacity: 0;\n  transform: translateY(8px);\n  transition: opacity .35s ease, transform .35s ease;\n}\n\n.sadie-item:hover .sadie-btn {\n  opacity: 1;\n  transform: translateY(0);\n  transition-delay: .18s;\n}\n\n@media (max-width: 600px) {\n  .sadie-grid { grid-template-columns: 1fr; gap: 18px; }\n  .sadie-item { height: auto; }\n  .sadie-overlay { position: relative; padding: 18px 16px 20px; }\n  .sadie-bg { height: 200px; }\n  .sadie-overlay h3 { position: static; transform: none; margin: 12px 0 8px; }\n  .sadie-overlay p { position: static; opacity: 1; margin-top: 4px; }\n  .sadie-btn { opacity: 1; transform: none; position: static; margin-top: 14px; }\n}\n\n.sadie-item.reveal {\n  opacity: 0;\n  transform: translateY(60px);\n  transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n}\n\n.sadie-item.reveal.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n.sadie-item:nth-child(1) { transition-delay: 0.1s; }\n.sadie-item:nth-child(2) { transition-delay: 0.45s; }\n.sadie-item:nth-child(3) { transition-delay: 0.8s; }\n<\/style>\n\n\n\n<section class=\"katharina-counter\">\n  <div class=\"counter-wrapper\">\n\n    <!-- 1. abgeschlossene Projekte -->\n    <div class=\"counter-item\">\n      <div class=\"counter-icon\">\n        <svg viewBox=\"0 0 36 36\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M5 11a3 3 0 0 1 3-3h7l3 3h13a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V11z\"\/>\n          <path d=\"M5 15h29\"\/>\n          <path d=\"M15 8l3 3\"\/>\n        <\/svg>\n      <\/div>\n      <div class=\"counter-number\" data-target=\"150\">0<\/div>\n      <div class=\"counter-text\">abgeschlossene Projekte<\/div>\n    <\/div>\n\n    <!-- 2. n\u00e4chtliche Einf\u00e4lle -->\n    <div class=\"counter-item\">\n      <div class=\"counter-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M11 5c0 4 3 7.5 7.5 7.5 1.2 0 2.3-.3 3.3-.8-0.4 4.5-4.1 8.3-8.8 8.3C7.9 20 4 16.1 4 11.5 4 7 7.4 3.2 11.8 2.5c-0.5 1-0.8 2.2-0.8 3.5z\"\/>\n          <path d=\"M18.2 2.3L18.7 2.4v0.7l-0.5.1c-.5.1-.8.5-.9.9L17.1 5h-.7l-.2-.8c-.1-.5-.5-.8-.9-.9l-.5-.1v-.7l.5-.1c.5-.1.8-.5.9-.9l.2-.8h.7l.2.8c.1.5.5.8.9.9z\"\/>\n          <path d=\"M22.2 7.3L22.7 7.4v0.7l-0.5.1c-.5.1-.8.5-.9.9L21.1 10h-.7l-.2-.8c-.1-.5-.5-.8-.9-.9l-.5-.1v-.7l.5-.1c.5-.1.8-.5.9-.9l.2-.8h.7l.2.8c.1.5.5.8.9.9z\"\/>\n        <\/svg>\n      <\/div>\n      <div class=\"counter-number\" data-target=\"7100\">0<\/div>\n      <div class=\"counter-text\">n\u00e4chtliche Einf\u00e4lle<\/div>\n    <\/div>\n\n    <!-- 3. gerettete Kommata -->\n    <div class=\"counter-item\">\n      <div class=\"counter-icon\">\n        <svg viewBox=\"0 -40 329 551.255\"\n             fill=\"none\"\n             stroke=\"white\"\n             stroke-width=\"20\"\n             stroke-linecap=\"round\"\n             stroke-linejoin=\"round\"\n             style=\"width: 36px; height: 36px;\">\n          <path d=\"M43.039 465.486c109.455-30.366 180.7-93.86 198.415-204.36 4.817-30.057-1.914-7.349-22.297 7.903C152.602 318.821 21.754 301.2 3.603 187.448-32.944-13.929 218.853-48.799 293.385 62.422c17.331 25.863 28.816 56.028 32.946 89.175 17.96 144.128-55.9 272.5-185.664 332.795-24.003 11.151-49.297 19.883-76.528 26.29-13.633 2.757-23.542-4.661-28.1-17.214-3.875-10.705-5.195-22.517 7-27.982z\"\/>\n        <\/svg>\n      <\/div>\n      <div class=\"counter-number\" data-target=\"570\">0<\/div>\n      <div class=\"counter-text\">gerettete Kommata<\/div>\n    <\/div>\n\n    <!-- 4. geschriebene W\u00f6rter -->\n    <div class=\"counter-item\">\n      <div class=\"counter-icon\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <path d=\"M4 20c1-6 4-15 16-17-1 3-2 5-3 6l-2 2 2 2c-1 3-4 6-8 6-2 .3-4 1.5-5 3z\"\/>\n        <\/svg>\n      <\/div>\n      <div class=\"counter-number\" data-target=\"1300000\">0<\/div>\n      <div class=\"counter-text\">geschriebene W\u00f6rter<\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n  const counters = document.querySelectorAll(\".counter-number\");\n\n  const observer = new IntersectionObserver(entries => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n\n        const counter = entry.target;\n        const target = +counter.getAttribute(\"data-target\");\n\n        const duration = 6000;\n        const startTime = performance.now();\n\n        function update(now) {\n          const elapsed = now - startTime;\n          const progress = Math.min(elapsed \/ duration, 1);\n\n          const value = Math.floor(progress * target);\n          counter.innerText = value.toLocaleString(\"de-DE\");\n\n          if (progress < 1) {\n            requestAnimationFrame(update);\n          } else {\n            counter.innerText = target.toLocaleString(\"de-DE\");\n          }\n        }\n\n        requestAnimationFrame(update);\n        observer.unobserve(counter);\n      }\n    });\n  }, { threshold: 0.8 });\n\n  counters.forEach(counter => observer.observe(counter));\n});\n<\/script>\n\n<style>\n.katharina-counter {\n  margin-top: 60px;\n  width: 100vw;\n  position: relative;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  background: #000;\n  padding: 50px 0 36px 0;\n  color: #fff;\n}\n\n.counter-wrapper {\n  width: 1200px;\n  max-width: 92%;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  text-align: center;\n  column-gap: 30px;\n}\n\n.counter-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-right: 1px solid rgba(255,255,255,0.15);\n  padding: 0 18px;\n}\n\n.counter-item:last-child {\n  border-right: none;\n}\n\n.counter-icon {\n  width: 40px;\n  height: 40px;\n  margin-bottom: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.counter-icon svg {\n  width: 40px;\n  height: 40px;\n  opacity: 0.9;\n  stroke: #f2f2f2;\n}\n\n.counter-number {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 52px;\n  font-weight: 500;\n  letter-spacing: 0.5px;\n  margin-bottom: 4px;\n  color: #ffffff;\n}\n\n.counter-text {\n  font-family: \"Crimson Text\", serif;\n  font-size: 16px;\n  line-height: 1.3;\n  color: #f2f2f2;\n  max-width: 160px;\n  opacity: 0.9;\n}\n\n\/* Tablet: 2 Spalten *\/\n@media (max-width: 1024px) {\n  .counter-wrapper {\n    grid-template-columns: repeat(2, 1fr);\n    row-gap: 26px;\n    column-gap: 24px;\n  }\n\n  .counter-item {\n    border-right: none;\n    border-bottom: 1px solid rgba(255,255,255,0.12);\n    padding-bottom: 18px;\n  }\n\n  .counter-item:nth-child(3),\n  .counter-item:nth-child(4) {\n    border-bottom: none;\n  }\n\n  .counter-number {\n    font-size: 44px;\n  }\n\n  .counter-text {\n    font-size: 15px;\n  }\n}\n\n\/* Mobile: 2\u00d72, kompakt *\/\n@media (max-width: 600px) {\n  .katharina-counter {\n    padding: 40px 0 28px 0;\n  }\n\n  .counter-wrapper {\n    grid-template-columns: repeat(2, 1fr);\n    row-gap: 20px;\n    column-gap: 18px;\n  }\n\n  .counter-item {\n    padding: 0 8px 14px 8px;\n    border-bottom: 1px solid rgba(255,255,255,0.12);\n  }\n\n  .counter-item:nth-child(3),\n  .counter-item:nth-child(4) {\n    border-bottom: none;\n  }\n\n  .counter-icon {\n    margin-bottom: 8px;\n  }\n\n  .counter-icon svg {\n    width: 32px;\n    height: 32px;\n  }\n\n  .counter-number {\n    font-size: 34px;\n    margin-bottom: 2px;\n  }\n\n  .counter-text {\n    font-size: 14px;\n    max-width: 120px;\n  }\n}\n<\/style>\n\n\n\n<h2 class=\"portfolio-heading\">\n  <span class=\"ph-top\">PORTFOLIO<\/span>\n  <span class=\"ph-bottom\">Ausgew\u00e4hlte Projekte<\/span>\n<\/h2>\n\n<section class=\"portfolio-cards\">\n  <div class=\"pc-grid\">\n\n    <!-- ITEM 1 \u2013 KL\u00dcBER -->\n    <div class=\"pc-item reveal\">\n      <div class=\"pc-frame\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio-Mockup_Klueber.jpg\" alt=\"Content Creation f\u00fcr Kl\u00fcber Lubrication\">\n      <\/div>\n      <div class=\"pc-overlay\">\n        <div class=\"pc-textblock\">\n          <h3>Content Creation<\/h3>\n          <p>Blogartikel, Whitepaper, Mailings, Newsletter, Social Content, Messekommunikation<\/p>\n        <\/div>\n        <a href=\"\/portfolio\/\" class=\"pc-btn\">\n          Mehr entdecken\n          <span class=\"pc-arrow\">\u203a<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ITEM 2 \u2013 AMS -->\n    <div class=\"pc-item reveal\">\n      <div class=\"pc-frame\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_AMSMaler.jpg\" alt=\"Corporate Publishing f\u00fcr AMS Malerwerkst\u00e4tte\">\n      <\/div>\n      <div class=\"pc-overlay\">\n        <div class=\"pc-textblock\">\n          <h3>Corporate Publishing<\/h3>\n          <p>Fachartikel, Interviews, Unternehmensportraits, Case Studies, Magazinartikel<\/p>\n        <\/div>\n        <a href=\"\/portfolio\/\" class=\"pc-btn\">\n          Mehr entdecken\n          <span class=\"pc-arrow\">\u203a<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ITEM 3 \u2013 JUNIIK -->\n    <div class=\"pc-item reveal\">\n      <div class=\"pc-frame\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_juniikAgentur.jpg\" alt=\"Brand Messaging f\u00fcr juniik\">\n      <\/div>\n      <div class=\"pc-overlay\">\n        <div class=\"pc-textblock\">\n          <h3>Brand Messaging<\/h3>\n          <p>Markenbotschaften, Claims, Tone of Voice, Positionierung, Storytelling<\/p>\n        <\/div>\n        <a href=\"\/portfolio\/\" class=\"pc-btn\">\n          Mehr entdecken\n          <span class=\"pc-arrow\">\u203a<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ITEM 4 \u2013 ZELTWANGER -->\n    <div class=\"pc-item reveal\">\n      <div class=\"pc-frame\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_Zeltwanger-1.jpg\" alt=\"Employer Branding f\u00fcr Zeltwanger\">\n      <\/div>\n      <div class=\"pc-overlay\">\n        <div class=\"pc-textblock\">\n          <h3>Employer Branding<\/h3>\n          <p>Karrierewebsites, Stellenanzeigen, Recruiting\u2011Strategien, interne Kommunikation, EVP\u2011Texte, Personalmarketing<\/p>\n        <\/div>\n        <a href=\"\/portfolio\/\" class=\"pc-btn\">\n          Mehr entdecken\n          <span class=\"pc-arrow\">\u203a<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ITEM 5 \u2013 FINK DIFFERENT -->\n    <div class=\"pc-item reveal\">\n      <div class=\"pc-frame\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_fd-1.jpg\" alt=\"Coaching &#038; Training f\u00fcr fink different\">\n      <\/div>\n      <div class=\"pc-overlay\">\n        <div class=\"pc-textblock\">\n          <h3>Coaching &#038; Training<\/h3>\n          <p>Rhetoriktraining, Kommunikationscoaching, Social Media Schulungen, Pr\u00e4sentationscoaching, Workshops<\/p>\n        <\/div>\n        <a href=\"\/portfolio\/\" class=\"pc-btn\">\n          Mehr entdecken\n          <span class=\"pc-arrow\">\u203a<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <!-- ITEM 6 \u2013 TERRA -->\n    <div class=\"pc-item reveal\">\n      <div class=\"pc-frame\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_TERRAWeiss.jpg\" alt=\"Webkommunikation f\u00fcr Terra Raumtechnik \u2013 Wei\u00dfversion\">\n      <\/div>\n      <div class=\"pc-overlay\">\n        <div class=\"pc-textblock\">\n          <h3>Webkommunikation<\/h3>\n          <p>Webseitentexte, Landingpages, UX\u2011Copy, Webkonzeption, SEO\u2011Texte<\/p>\n        <\/div>\n        <a href=\"\/portfolio\/\" class=\"pc-btn\">\n          Mehr entdecken\n          <span class=\"pc-arrow\">\u203a<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n\n  <\/div>\n\n  <!-- Button: jetzt mit .reveal f\u00fcr Scroll-Animation -->\n  <div class=\"portfolio-bottom-btn reveal\">\n    <a href=\"\/portfolio\/\" class=\"pc-btn pc-btn-large pc-btn-shadow\">\n      Zu den Projekten\n      <span class=\"pc-arrow-large\">\u203a<\/span>\n    <\/a>\n  <\/div>\n<\/section>\n\n<style>\n.portfolio-heading {\n  text-align: center;\n  margin-top: 140px;\n  margin-bottom: 50px;\n}\n\n.ph-top {\n  display: block;\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 64px;\n  letter-spacing: 4px;\n  color: #b3b3b3;\n  font-weight: 400;\n  margin-bottom: -20px;\n}\n\n.ph-bottom {\n  display: block;\n  font-family: \"Crimson Text\", serif;\n  font-size: 20px;\n  letter-spacing: 0.2px;\n  color: #000;\n  font-weight: 400;\n}\n\n.portfolio-cards {\n  margin-top: 20px;\n}\n\n.pc-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 18px;\n}\n\n.pc-item {\n  position: relative;\n  background: #fff;\n  overflow: hidden;\n  cursor: pointer;\n  transition: box-shadow .3s ease;\n}\n\n.pc-item:hover {\n  box-shadow: 0 12px 28px rgba(0,0,0,0.15);\n}\n\n.pc-frame {\n  width: 100%;\n  aspect-ratio: 16 \/ 10;\n  background: #111;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n}\n\n.pc-frame img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform .4s ease;\n}\n\n.pc-item:hover .pc-frame img {\n  transform: scale(1.03);\n}\n\n.pc-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to bottom,\n    rgba(255,255,255,0.96),\n    rgba(255,255,255,0.92)\n  );\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  opacity: 0;\n  transition: opacity .4s ease;\n  padding: 40px 20px 40px;\n  text-align: center;\n}\n\n.pc-textblock {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.pc-item:hover .pc-overlay {\n  opacity: 1;\n}\n\n.pc-overlay h3 {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 27px;\n  margin: 0;\n}\n\n.pc-overlay p {\n  font-family: \"Crimson Text\", serif;\n  font-size: 18px;\n  line-height: 1.35;\n  max-width: 85%;\n  margin-top: 10px;\n}\n\n.pc-overlay h3,\n.pc-overlay p,\n.pc-overlay a {\n  opacity: 0;\n  transform: translateY(8px);\n  transition: opacity .35s ease, transform .35s ease;\n}\n\n.pc-item:hover .pc-overlay h3 {\n  opacity: 1;\n  transform: translateY(0);\n  transition-delay: .05s;\n}\n\n.pc-item:hover .pc-overlay p {\n  opacity: 1;\n  transform: translateY(0);\n  transition-delay: .12s;\n}\n\n.pc-item:hover .pc-overlay a {\n  opacity: 1;\n  transform: translateY(0);\n  transition-delay: .18s;\n}\n\n.pc-arrow,\n.pc-arrow-large {\n  font-size: 18px;\n  line-height: 0.8;\n  position: relative;\n  top: -1px;\n}\n\n.pc-btn {\n  margin-top: 32px;\n  padding: 8px 18px;\n  background: #fff;\n  border: 1px solid #111;\n  border-radius: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-family: \"Crimson Text\", serif;\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  text-decoration: none;\n  color: #111;\n  transition: all .3s ease;\n}\n\n.pc-btn:hover {\n  background: #111;\n  color: #fff;\n}\n\n.pc-btn-shadow {\n  background: #fff;\n  color: #000;\n  border: 1px solid #000;\n  padding: 12px 22px;\n  font-size: 13px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  border-radius: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  box-shadow: none;\n  transition: all .3s ease;\n}\n\n.pc-btn-shadow:hover {\n  background: #000;\n  color: #fff;\n  border-color: #000;\n  box-shadow: none;\n}\n\n\/* Button-Wrapper: wieder mittig + Abstand *\/\n.portfolio-bottom-btn {\n  text-align: center;\n  margin-top: 11px;\n  padding-bottom: 40px;\n}\n\n\/* Scroll-Animation (wie gehabt, jetzt auch f\u00fcr Button) *\/\n.reveal {\n  opacity: 0;\n  transform: translateY(40px);\n  transition: opacity .7s ease, transform .7s ease;\n}\n\n.reveal.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* Mobile ausblenden *\/\n@media (max-width: 600px) {\n  .portfolio-cards,\n  .portfolio-heading,\n  .portfolio-bottom-btn {\n    display: none !important;\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const items = document.querySelectorAll(\".reveal\");\n\n  const observer = new IntersectionObserver((entries) => {\n    entries.forEach(entry => {\n      if (entry.isIntersecting) {\n        entry.target.classList.add(\"visible\");\n        observer.unobserve(entry.target);\n      }\n    });\n  }, { threshold: 0.15 });\n\n  items.forEach(item => observer.observe(item));\n});\n<\/script>\n\n\n\n<div class=\"mobile-only-slider-wrapper\">\n\n<style>\n\/* ------------------------------ *\/\n\/* PANZER-VERSION: Sichtbarkeit   *\/\n\/* ------------------------------ *\/\n\n\/* Standard: Slider komplett ausblenden *\/\n.mobile-only-slider-wrapper {\n  display: none !important;\n}\n\n\/* Nur auf echten Mobile-Ger\u00e4ten sichtbar *\/\n@media screen and (max-width: 600px) {\n  .mobile-only-slider-wrapper {\n    display: block !important;\n  }\n}\n\n\/* ------------------------------ *\/\n\/* Slider-Styling (nur Mobile)    *\/\n\/* ------------------------------ *\/\n\n@media screen and (max-width: 600px) {\n\n  .portfolio-slider-mobile {\n    margin-top: 40px;\n    padding-bottom: 20px;\n  }\n\n  .psm-heading {\n    text-align: center;\n    margin-bottom: 20px;\n  }\n\n  .psm-top {\n    display: block;\n    font-family: \"Cormorant Garamond\", serif;\n    font-size: 42px;\n    letter-spacing: 3px;\n    color: #b3b3b3;\n    margin-bottom: -10px;\n  }\n\n  .psm-bottom {\n    display: block;\n    font-family: \"Crimson Text\", serif;\n    font-size: 18px;\n    color: #000;\n  }\n\n  \/* Carousel *\/\n  .psm-carousel {\n    display: flex;\n    overflow-x: auto;\n    gap: 16px;\n    padding: 10px 4px 20px;\n    scroll-snap-type: x mandatory;\n  }\n\n  .psm-carousel::-webkit-scrollbar {\n    display: none;\n  }\n\n  \/* Card *\/\n  .psm-card {\n    flex: 0 0 80%;\n    background: #fff;\n    border: 1px solid #ddd;\n    border-radius: 4px;\n    overflow: hidden;\n    scroll-snap-align: start;\n    box-shadow: 0 6px 16px rgba(0,0,0,0.12);\n  }\n\n  .psm-card img {\n    width: 100%;\n    height: 180px;\n    object-fit: cover;\n    display: block;\n  }\n\n  .psm-info {\n    padding: 16px;\n    text-align: center;\n  }\n\n  .psm-info h3 {\n    font-family: \"Cormorant Garamond\", serif;\n    font-size: 22px;\n    margin: 0 0 8px 0;\n  }\n\n  .psm-info p {\n    font-family: \"Crimson Text\", serif;\n    font-size: 15px;\n    line-height: 1.35;\n    color: #333;\n  }\n}\n<\/style>\n\n<section class=\"portfolio-slider-mobile\">\n  <h2 class=\"psm-heading\">\n    <span class=\"psm-top\">PORTFOLIO<\/span>\n    <span class=\"psm-bottom\">Ausgew\u00e4hlte Projekte<\/span>\n  <\/h2>\n\n  <div class=\"psm-carousel\">\n\n    <!-- SLIDE 1 -->\n    <div class=\"psm-card\">\n      <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio-Mockup_Klueber.jpg\" alt=\"Content Creation f\u00fcr Kl\u00fcber Lubrication\">\n      <div class=\"psm-info\">\n        <h3>Content Creation<\/h3>\n        <p>Blogartikel, Whitepaper, Mailings, Newsletter, Social Content, Messekommunikation<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- SLIDE 2 -->\n    <div class=\"psm-card\">\n      <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_AMSMaler.jpg\" alt=\"Corporate Publishing f\u00fcr AMS Malerwerkst\u00e4tte\">\n      <div class=\"psm-info\">\n        <h3>Corporate Publishing<\/h3>\n        <p>Fachartikel, Interviews, Unternehmensportraits, Case Studies, Magazinartikel<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- SLIDE 3 -->\n    <div class=\"psm-card\">\n      <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_juniikAgentur.jpg\" alt=\"Brand Messaging f\u00fcr juniik\">\n      <div class=\"psm-info\">\n        <h3>Brand Messaging<\/h3>\n        <p>Markenbotschaften, Claims, Tone of Voice, Positionierung, Storytelling<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- SLIDE 4 -->\n    <div class=\"psm-card\">\n      <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_Zeltwanger-1.jpg\" alt=\"Employer Branding f\u00fcr Zeltwanger\">\n      <div class=\"psm-info\">\n        <h3>Employer Branding<\/h3>\n        <p>Karrierewebsites, Stellenanzeigen, Recruiting\u2011Strategien, interne Kommunikation, EVP\u2011Texte, Personalmarketing<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- SLIDE 5 -->\n    <div class=\"psm-card\">\n      <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_fd-1.jpg\" alt=\"Coaching &#038; Training f\u00fcr fink different\">\n      <div class=\"psm-info\">\n        <h3>Coaching &#038; Training<\/h3>\n        <p>Rhetoriktraining, Kommunikationscoaching, Social Media Schulungen, Pr\u00e4sentationscoaching, Workshops<\/p>\n      <\/div>\n    <\/div>\n\n    <!-- SLIDE 6 -->\n    <div class=\"psm-card\">\n      <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Portfolio_Mockup_TERRAWeiss.jpg\" alt=\"Webkommunikation f\u00fcr Terra Raumtechnik\">\n      <div class=\"psm-info\">\n        <h3>Webkommunikation<\/h3>\n        <p>Webseitentexte, Landingpages, UX\u2011Copy, Webkonzeption, SEO\u2011Texte<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<\/div>\n\n\n\n<!-- USP-BLOCK MIT ANIMATIONEN -->\n<section class=\"katharina-usps reveal\">\n  <div class=\"usps-wrapper\">\n\n    <div class=\"usps-item reveal\" style=\"transition-delay: 0.1s;\">\n      <h3 class=\"usps-head\">Reflexion statt Schreibkraft<\/h3>\n      <p class=\"usps-text\">\n        Ich hinterfrage Briefings, erkenne Chancen, decke L\u00fccken auf und setze Impulse, bevor sie jemand erwartet.\n      <\/p>\n    <\/div>\n\n    <div class=\"usps-item reveal\" style=\"transition-delay: 0.2s;\">\n      <h3 class=\"usps-head\">Positionierung statt Phrasen<\/h3>\n      <p class=\"usps-text\">\n        Ich sorge daf\u00fcr, dass Unternehmen in ihrer Tiefe und inneren Ausrichtung erkennbar werden. Nicht nur korrekt beschrieben.\n      <\/p>\n    <\/div>\n\n    <div class=\"usps-item reveal\" style=\"transition-delay: 0.3s;\">\n      <h3 class=\"usps-head\">Strategie statt Foliensatz<\/h3>\n      <p class=\"usps-text\">\n        Ich denke Konzepte nicht bis zur PowerPoint, sondern bis zur tats\u00e4chlichen Umsetzung. Anspruch, Realit\u00e4t und Wirkung bilden die Ma\u00dfst\u00e4be.\n      <\/p>\n    <\/div>\n\n    <div class=\"usps-item reveal\" style=\"transition-delay: 0.4s;\">\n      <h3 class=\"usps-head\">Rhetorik statt Zufall<\/h3>\n      <p class=\"usps-text\">\n        Ich wei\u00df, warum etwas wirkt und warum nicht. Das spart Umwege, Diskussionen und kommunikative Selbstt\u00e4uschung.\n      <\/p>\n    <\/div>\n\n    <div class=\"usps-item reveal\" style=\"transition-delay: 0.5s;\">\n      <h3 class=\"usps-head\">Originalit\u00e4t statt Kopie<\/h3>\n      <p class=\"usps-text\">\n        Ich entwickle L\u00f6sungen, die wirklich tragen, ohne mich an Standards abzuarbeiten. Jede Aufgabe verlangt eigene Wege.\n      <\/p>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- BUTTON UNTER DEM USP-BALKEN -->\n<div class=\"usp-button-wrapper reveal\" style=\"transition-delay: 0.65s;\">\n  <a href=\"#blog-artikel\" class=\"usp-btn\">\n    Mehr zu meiner Arbeitsweise\n    <span class=\"usp-arrow\">\u203a<\/span>\n  <\/a>\n<\/div>\n\n<style>\n\/* GANZES ELEMENT *\/\n.katharina-usps {\n  margin-top: 60px;\n  width: 100vw;\n  position: relative;\n  left: 50%;\n  right: 50%;\n  margin-left: -50vw;\n  margin-right: -50vw;\n  background: #000;\n  padding: 10px 0 28px 0;\n  color: #fff;\n}\n\n\/* GRID *\/\n.katharina-usps .usps-wrapper {\n  width: 1200px;\n  max-width: 92%;\n  margin: 0 auto;\n  display: grid;\n  grid-template-columns: repeat(5, 1fr);\n  text-align: center;\n  column-gap: 30px;\n}\n\n\/* EINZELFELDER *\/\n.katharina-usps .usps-item {\n  border-right: 1px solid rgba(255,255,255,0.15);\n  padding: 0 18px;\n}\n\n.katharina-usps .usps-item:last-child {\n  border-right: none;\n}\n\n\/* HEADLINES \u2013 wie Katharina *\/\n.katharina-usps .usps-head {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 26px;\n  font-weight: 500;\n  letter-spacing: 0;\n  margin-bottom: 10px;\n  color: #b3b3b3 !important;\n}\n\n\/* FLIESSTEXT \u2013 reinwei\u00df *\/\n.katharina-usps .usps-text {\n  font-family: \"Crimson Text\", serif;\n  font-size: 16px;\n  line-height: 1.35;\n  color: #ffffff !important;\n  max-width: 240px;\n  margin: 0 auto;\n}\n\n\/* BUTTON-BEREICH *\/\n.usp-button-wrapper {\n  text-align: center;\n  margin-top: 40px; \/* bewusst wenig Abstand *\/\n  margin-bottom: 40px;\n}\n\n\/* BUTTON \u2013 exakt wie eure Buttons *\/\n.usp-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 18px;\n  border: 1px solid #111;\n  text-decoration: none;\n  color: #111;\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-family: \"Crimson Text\", serif;\n}\n\n.usp-btn:hover {\n  background: #111;\n  color: #fff;\n}\n\n.usp-arrow {\n  font-size: 16px;\n  line-height: 0.8;\n  position: relative;\n  top: -1px;\n}\n\n\/* TABLET *\/\n@media (max-width: 1024px) {\n  .katharina-usps .usps-wrapper {\n    grid-template-columns: repeat(2, 1fr);\n    row-gap: 26px;\n    column-gap: 24px;\n  }\n\n  .katharina-usps .usps-item {\n    border-right: none;\n    border-bottom: 1px solid rgba(255,255,255,0.12);\n    padding-bottom: 18px;\n  }\n\n  .katharina-usps .usps-item:nth-child(4),\n  .katharina-usps .usps-item:nth-child(5) {\n    border-bottom: none;\n  }\n\n  .katharina-usps .usps-head {\n    font-size: 24px;\n  }\n\n  .katharina-usps .usps-text {\n    font-size: 15px;\n  }\n}\n\n\/* MOBILE *\/\n@media (max-width: 600px) {\n  .katharina-usps {\n    padding: 32px 0 24px 0;\n  }\n\n  .katharina-usps .usps-wrapper {\n    grid-template-columns: 1fr;\n    row-gap: 22px;\n  }\n\n  .katharina-usps .usps-item {\n    border-bottom: 1px solid rgba(255,255,255,0.12);\n    padding-bottom: 16px;\n  }\n\n  .katharina-usps .usps-item:last-child {\n    border-bottom: none;\n  }\n\n  .katharina-usps .usps-head {\n    font-size: 22px;\n  }\n\n  .katharina-usps .usps-text {\n    font-size: 15px;\n    max-width: 100%;\n  }\n}\n<\/style>\n\n\n\n<!-- TEAM-\u00dcBERSCHRIFT MIT SUBHEAD -->\n<h2 class=\"portfolio-heading\">\n  <span class=\"ph-top\">TEAM<\/span>\n  <span class=\"ph-bottom\">Strategie, Sprache &#038; ein wenig Fell<\/span>\n<\/h2>\n\n<section class=\"team-block\"  \n         style=\"background:url('https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Hintergrund_Teamsektion_white.jpg') center -60px\/cover no-repeat; color:#fff;\">\n\n<style>\n\/* FULL WIDTH *\/\n.team-block {\n    padding: 20px 0;\n    font-family: \"Crimson Text\", serif;\n\n    width: 100vw;\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw;\n    margin-right: -50vw;\n\n    backdrop-filter: blur(14px);\n}\n\n\/* --- DESKTOP EDITORIAL LAYOUT --- *\/\n.team-inner {\n    width: 1300px;\n    margin: 0 auto;\n    position: relative;\n\n    background: rgba(0,0,0,0.78);\n    padding: 8px 40px 8px 200px;\n}\n\n\/* Bild links herausragend *\/\n.team-image {\n    position: absolute;\n    left: -80px;\n    top: 8px;\n}\n\n.team-image img {\n    width: 150px;\n    height: 210px;\n    object-fit: cover;\n}\n\n\/* Siegel rechts vom Bild \u2013 VERTIKAL *\/\n.siegel-row {\n    position: absolute;\n    left: 90px; \/* etwas weiter rechts *\/\n    top: 8px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px; \/* lockerer *\/\n}\n\n.siegel-row img {\n    width: 60px; \/* gr\u00f6\u00dfer *\/\n    height: 60px;\n    object-fit: cover;\n    opacity: 0.95;\n}\n\n\/* Headline *\/\n.team-content h3 {\n    font-family: \"Cormorant Garamond\", serif;\n    font-size: 24px;\n    margin-bottom: 12px;\n    color: #b3b3b3;\n}\n\n\/* Text *\/\n.team-content p {\n    font-size: 17px;\n    line-height: 1.42;\n    margin-bottom: 12px;\n    color: #fff;\n}\n\n\/* ----------------------------- *\/\n\/* MIETZI: HELLE BOX + KLARE HIERARCHIE *\/\n\/* ----------------------------- *\/\n\n.team-inner.light-box {\n    background: rgba(255,255,255,0.70);\n}\n\n.team-inner.light-box .team-content h3 {\n    color: #000;\n}\n\n.team-inner.light-box .team-content p {\n    color: #666;\n}\n\n\/* Abstand zwischen den Boxen *\/\n.team-inner + .team-inner {\n    margin-top: 30px;\n}\n\n\/* ----------------------------- *\/\n\/* TABLET VERSION (unter 1024px) *\/\n\/* ----------------------------- *\/\n\n@media (max-width: 1024px) {\n\n    .team-inner {\n        width: 90%;\n        padding: 20px;\n    }\n\n    .team-image {\n        position: relative;\n        left: 0;\n        top: 0;\n        margin-bottom: 20px;\n    }\n\n    .siegel-row {\n        position: relative;\n        left: 0;\n        top: 0;\n        margin: 10px 0 20px 0;\n        flex-direction: row;\n        gap: 16px;\n    }\n}\n\n\/* ----------------------------- *\/\n\/* MOBILE VERSION (unter 600px) *\/\n\/* ----------------------------- *\/\n\n@media (max-width: 600px) {\n\n    .team-inner {\n        width: 92%;\n        padding: 24px 16px 32px 16px; \/* mehr Platz unten *\/\n    }\n\n    .team-inner.light-box {\n        padding-top: 48px; \/* verhindert Abschneiden *\/\n        padding-bottom: 40px;\n    }\n\n    .team-image img {\n        width: 130px;\n        height: 180px;\n        margin: 0 auto 16px auto;\n        display: block;\n    }\n\n    .siegel-row {\n        flex-direction: row;\n        justify-content: center;\n        gap: 14px;\n        margin-bottom: 20px;\n    }\n\n    .team-content h3 {\n        text-align: center;\n        margin-top: 10px;\n    }\n\n    .team-content p {\n        text-align: left;\n        font-size: 16px;\n    }\n}\n<\/style>\n\n\n<!-- PERSON 1 \u2013 Katharina -->\n<div class=\"team-inner\">\n    \n    <!-- Bild -->\n    <div class=\"team-image\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Teambild_Katharina-scaled.jpg\" alt=\"Portrait Katharina\">\n    <\/div>\n\n    <!-- Siegel -->\n    <div class=\"siegel-row\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Siegel_Certfified_Content_Marketing_Manager.png\" alt=\"Content Marketing Manager Siegel\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Siegel_Certfified_SEM_Manager.png\" alt=\"SEM Manager Siegel\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Siegel_Certfified_Social_Media_Manager.png\" alt=\"Social Media Manager Siegel\">\n    <\/div>\n\n    <!-- Text -->\n    <div class=\"team-content\">\n        <h3>Katharina \u2013 Head of Sentence Wrestling<\/h3>\n\n        <p>Ich arbeite mit Sprache. Und mit Menschen. Manchmal auch mit sehr vielen Gedanken gleichzeitig.<\/p>\n\n        <p>Studiert habe ich Neuere Deutsche Literatur, Linguistik, Medi\u00e4vistik und Allgemeine Rhetorik \u2013 kurz: alles, was man braucht, um Sprache zu verstehen, zu sezieren und wieder zusammenzusetzen, ohne dass sie dabei stirbt.<\/p>\n\n        <p>Seit 20 Jahren besch\u00e4ftige ich mich beruflich mit Kommunikation, seit 2013 als Freiberuflerin. Ich mag pr\u00e4zise Worte, gute Gedanken und Konzepte, die funktionieren. Gleichzeitig wei\u00df ich: Kommunikation ist nie nur Logik. Sie hat immer auch mit Ton, Gef\u00fchl und Timing zu tun.<\/p>\n\n        <p>W\u00e4hrend ich also schreibe, denke und manchmal f\u00fcnf Versionen eines Satzes gegeneinander antreten lasse, sitzt meistens jemand in meiner N\u00e4he, der sich f\u00fcr die wahre Chefin h\u00e4lt. Ich lasse sie.<\/p>\n    <\/div>\n<\/div>\n\n\n<!-- PERSON 2 \u2013 Mietzi -->\n<div class=\"team-inner light-box\">\n    \n    <!-- Bild -->\n    <div class=\"team-image\">\n        <img decoding=\"async\" src=\"https:\/\/dev.katharina-salanga.de\/wp-content\/uploads\/2026\/03\/Teambild_Mietzi.jpg\" alt=\"Mietzi\">\n    <\/div>\n\n    <!-- Text -->\n    <div class=\"team-content\">\n        <h3>Mietzi \u2013 Head of Strategic Paper Reshuffling<\/h3>\n\n        <p>Ich bin Mietzi. Offiziell bin ich die Katze. Inoffiziell das Management.<\/p>\n\n        <p>Meine Aufgaben sind vielf\u00e4ltig: Ich bin Mood-Managerin, flauschiges Anti-Burnout-System und zielgerichtete Schreibtischbesetzung. Videomeetings crashe ich grunds\u00e4tzlich ohne Einladung \u2013 meistens genau dann, wenn es dramaturgisch sinnvoll ist. Au\u00dferdem sorge ich daf\u00fcr, dass Katharina nicht in Perfektionismus versinkt, indem ich regelm\u00e4\u00dfig ihre Unterlagen neu sortiere. Durch strategisches Drauflegen.<\/p>\n\n        <p>Viele Kunden begr\u00fc\u00dfen mich inzwischen genauso selbstverst\u00e4ndlich wie sie Katharina. Manche sogar zuerst. V\u00f6llig zu Recht.<\/p>\n\n        <p>Und ja \u2013 ich habe bisher noch keinen einzigen Text selbst geschrieben. Aber das ist nat\u00fcrlich eine bewusste F\u00fchrungsentscheidung. Immerhin sitzt hier die wahre Chefin.<\/p>\n    <\/div>\n<\/div>\n\n<\/section>\n\n\n\n<style>\n.blog-section {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 40px;\n  margin: 80px 0;\n}\n\n\/* WARMES DUNKELGRAU + WEICHER RAHMEN *\/\n.blog-card {\n  background: #2a2a2a;\n  border: 1px solid #111;\n  padding: 28px;\n  transition: background 0.3s ease, border-color 0.3s ease;\n}\n\n.blog-card:hover {\n  background: #4a4a4a;\n  border-color: #444;\n}\n\n\/* SCHMALE SCHWARZ-WEISS-BILDER *\/\n.blog-card img {\n  width: 100%;\n  height: auto;\n  aspect-ratio: 5 \/ 2;\n  object-fit: cover;\n  margin-bottom: 20px;\n  transition: transform 0.4s ease;\n}\n\n.blog-card:hover img {\n  transform: scale(1.03);\n}\n\n.blog-card h3 {\n  font-family: \"Cormorant Garamond\", serif;\n  font-size: 26px;\n  margin: 0 0 12px 0;\n  color: #fff;\n}\n\n.blog-card p {\n  font-family: \"Crimson Text\", serif;\n  font-size: 18px;\n  line-height: 1.5;\n  margin-bottom: 16px;\n  color: #e6e6e6;\n}\n\n\/* TAGS *\/\n.blog-tags {\n  font-family: \"Crimson Text\", serif;\n  font-size: 14px;\n  color: #aaa;\n  margin-bottom: 16px;\n}\n\n.blog-tags a {\n  color: #aaa;\n  text-decoration: none;\n  margin-right: 6px;\n}\n\n\/* BUTTON *\/\n.blog-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 10px 18px;\n  border: 1px solid #fff;\n  text-decoration: none;\n  color: #fff;\n  font-size: 12px;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  font-family: \"Crimson Text\", serif;\n  transition: all 0.3s ease;\n  margin-top: 24px;\n}\n\n.blog-btn:hover {\n  background: #fff;\n  color: #000;\n}\n\n.blog-btn-arrow {\n  font-size: 16px;\n  line-height: 0.8;\n  position: relative;\n  top: -1px;\n}\n\n\/* Reveal Animation *\/\n.reveal {\n  opacity: 0;\n  transform: translateY(30px);\n  transition: all 0.8s ease;\n}\n\n.reveal.visible {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n\/* Responsive *\/\n@media (max-width: 900px) {\n  .blog-section {\n    grid-template-columns: 1fr 1fr;\n  }\n}\n\n@media (max-width: 600px) {\n  .blog-section {\n    grid-template-columns: 1fr;\n    gap: 28px;\n  }\n}\n<\/style>\n\n<div class=\"blog-section\">\n\n<?php\n\/\/ WordPress Loop: 3 neueste Artikel\n$latest_posts = new WP_Query(array(\n  'posts_per_page' => 3,\n  &#8218;post_status&#8216; => &#8218;publish&#8216;\n));\n\nif ($latest_posts->have_posts()) :\n  $delay = 0;\n  while ($latest_posts->have_posts()) : $latest_posts->the_post();\n?>\n\n  <div class=\"blog-card reveal\" style=\"transition-delay: <?php echo $delay; ?>s;&#8220;>\n    \n    <?php if (has_post_thumbnail()) : ?>\n      <img decoding=\"async\" src=\"<?php echo get_the_post_thumbnail_url(get_the_ID(), 'large'); ?>&#8220; alt=&#8220;<?php the_title(); ?>&#8222;>\n    <?php endif; ?>\n\n    <h3><?php the_title(); ?><\/h3>\n\n    <p><?php echo wp_trim_words(get_the_excerpt(), 25, '...'); ?><\/p>\n\n    <div class=\"blog-tags\">\n      <?php the_category(' '); ?>\n    <\/div>\n\n   <a class=\"blog-btn\" href=\"https:\/\/dev.katharina-salanga.de\/?page_id=551\">\n  Weiterlesen\n  <span class=\"blog-btn-arrow\">\u203a<\/span>\n<\/a>\n\n  <\/div>\n\n<?php\n    $delay += 0.1;\n  endwhile;\nendif;\n\nwp_reset_postdata();\n?>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Ich arbeite an der Schnittstelle von Sprache, Pr\u00e4zision und Resonanz. Ich entwickle Klarheit aus Komplexit\u00e4t und mache Gedanken sichtbar. Ich gebe Ideen eine Form, die ist. Marketing Durchdachte Marketingstrategien und hochwertige Inhalte, die Unternehmen sichtbar, relevant und konsistent positionieren. Mehr erfahren \u203a Rhetorik Professionelle Rhetorik und Kommunikationsberatung mit Fokus auf &hellip;<\/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-125","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages\/125","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=125"}],"version-history":[{"count":400,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages\/125\/revisions"}],"predecessor-version":[{"id":725,"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=\/wp\/v2\/pages\/125\/revisions\/725"}],"wp:attachment":[{"href":"https:\/\/dev.katharina-salanga.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}