/*
Theme Name: Kaipuu Bocas
Theme URI: https://bocas-del-toro.de
Author: Kaipuu Travels
Description: Child Theme von Twenty Twenty-Five für bocas-del-toro.de – Kaipuu-Farben, lokale Schriften, Header/Footer und wiederverwendbare Bausteine (Patterns).
Template: twentytwentyfive
Version: 1.5.0
Requires at least: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: kaipuu-bocas
*/

/* Lesbarkeit & Umbruch */
body { -webkit-font-smoothing: antialiased; }
.entry-content p, .wp-block-post-content p { overflow-wrap: break-word; }

/* Sprungmarken nicht unter dem Header verstecken */
:where(h2, h3)[id] { scroll-margin-top: 1.5rem; }


/* =====================================================================
   Sektionen (farbige Bänder wie auf sanblasinseln.de)
   ===================================================================== */
.kp-sektion { padding-block: var(--wp--preset--spacing--60); }
.wp-block-post-content > .kp-sektion:first-child { margin-block-start: 0; }
.wp-block-post-content > .kp-sektion + .kp-sektion { margin-block-start: 0; }
.kp-sektion.has-navy-background-color, .kp-sektion.has-navy-tief-background-color { color: #fff; }
.kp-sektion.has-navy-background-color :where(h2,h3,h4), .kp-sektion.has-navy-tief-background-color :where(h2,h3,h4) { color: #fff; }
.kp-sektion.has-navy-background-color a:not(.wp-element-button), .kp-sektion.has-navy-tief-background-color a:not(.wp-element-button) { color: #8FD9DC; }
/* Wellenkante zwischen Bändern (Horizont-Motiv aus dem Logo) */
.kp-sektion--welle { position: relative; }
.kp-sektion--welle::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 18px;
  background: var(--kp-welle-farbe, #fff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v6c-20 0-20 12-40 12S60 6 40 6 20 18 0 18z'/%3E%3C/svg%3E") 0 0 / 120px 18px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v6c-20 0-20 12-40 12S60 6 40 6 20 18 0 18z'/%3E%3C/svg%3E") 0 0 / 120px 18px repeat-x; }

/* =====================================================================
   Steckbrief: Fakten als Raster statt Tabelle
   ===================================================================== */
.kp-steckbrief { border-radius: 22px 22px 22px 6px; border: 0; background: #FBF8F2 !important; }
.has-sand-background-color .kp-steckbrief { background: #fff !important; }
.kp-steckbrief > h2 { font-size: 1.15rem !important; font-style: italic; font-weight: 400; margin-bottom: .2em; }
.kp-steckbrief .wp-block-table { margin: 0; overflow: visible; }
.kp-steckbrief table, .kp-steckbrief tbody { display: block; border: 0 !important; }
.kp-steckbrief tbody { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .25rem 2rem; }
.kp-steckbrief tr { display: flex; flex-direction: column; padding: .8rem 0 .7rem; border-top: 1px dashed #DCD3C4; }
.kp-steckbrief td { border: 0 !important; padding: 0 !important; }
.kp-steckbrief td:first-child { font-size: .8rem; color: var(--wp--preset--color--tuerkis-dunkel); font-weight: 600; letter-spacing: .01em; margin-bottom: .15rem; }
.kp-steckbrief td:first-child::before { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--wp--preset--color--orange); margin-right: .45rem; vertical-align: .05em; }
.kp-steckbrief td:last-child { font-size: .98rem; line-height: 1.45; }
.kp-steckbrief .kp-stand { margin-top: .6rem; }
@media (max-width: 640px) { .kp-steckbrief tbody { grid-template-columns: 1fr; } }

/* =====================================================================
   Vergleichstabellen: Boho-minimal – Zeilen als ruhige „Kiesel“
   ===================================================================== */
.kp-vergleich { margin-block: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kp-vergleich table { border-collapse: separate; border-spacing: 0 .55rem; width: 100%; font-size: .95rem; border: 0; }
.kp-vergleich thead th { background: none; border: 0; padding: .2rem 1.1rem .1rem; text-align: left; white-space: nowrap;
  font-family: var(--wp--preset--font-family--fraunces); font-style: italic; font-weight: 400; font-size: .92rem; color: var(--wp--preset--color--grau); }
.kp-vergleich tbody td { background: #fff; border: 0; padding: 1rem 1.1rem; vertical-align: top; line-height: 1.45; }
.has-base-background-color .kp-vergleich tbody td { background: #FBF8F2; }
.kp-vergleich tbody td:first-child { border-radius: 16px 0 0 16px; font-family: var(--wp--preset--font-family--fraunces); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--navy); white-space: nowrap; }
.kp-vergleich tbody td:last-child { border-radius: 0 16px 16px 0; }
.kp-vergleich tbody td:first-child::before { content: ""; display: inline-block; width: .7rem; height: .55rem; margin-right: .55rem; vertical-align: .08em;
  background: var(--wp--preset--color--orange); border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; opacity: .85; }
.kp-vergleich tbody tr:nth-child(3n+2) td:first-child::before { background: var(--wp--preset--color--tuerkis); }
.kp-vergleich tbody tr:nth-child(3n+3) td:first-child::before { background: #C9A27E; }
.kp-vergleich td:first-child a { color: inherit; text-decoration: none; background-image: linear-gradient(transparent 62%, rgba(245,166,35,.35) 62%); }
.kp-vergleich tbody tr { transition: transform .25s ease; }
.kp-vergleich tbody tr:hover { transform: translateX(4px); }
.kp-vergleich figcaption { margin: .2rem 0 0; padding: 0 1.1rem; font-size: .8rem; font-style: italic; }
@media (max-width: 720px) { .kp-vergleich table { min-width: 640px; } }

/* =====================================================================
   FAQ: weich aufklappen, Plus/Minus
   ===================================================================== */
:root { interpolate-size: allow-keywords; }
.kp-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--linie); padding: 0; margin: 0; }
.kp-faq .wp-block-details summary { list-style: none; cursor: pointer; font-weight: 600; padding: 1.05rem 2.5rem 1.05rem 0; position: relative; transition: color .2s; }
.kp-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.kp-faq .wp-block-details summary::after { content: ""; position: absolute; right: .25rem; top: 50%; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; border-radius: 50%;
  background: var(--wp--preset--color--tuerkis-hell) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M8 3v10' stroke='%23137A80' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / .8rem no-repeat;
  transition: transform .3s ease, background-color .2s; }
.kp-faq .wp-block-details[open] summary::after { transform: rotate(45deg); background-color: #FCE7C2; }
.kp-faq .wp-block-details summary:hover { color: var(--wp--preset--color--tuerkis-dunkel); }
.kp-faq .wp-block-details::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.kp-faq .wp-block-details[open]::details-content { block-size: auto; }
.kp-faq .wp-block-details > p { margin: 0 0 1.1rem; color: #33424F; }

/* =====================================================================
   Bildkarten (Planung) & Buchungsbanner
   ===================================================================== */
.kp-karten { gap: 1.5rem !important; }
.kp-karte { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--wp--preset--color--linie); display: flex; flex-direction: column; }
.kp-karte figure { margin: 0 !important; overflow: hidden; aspect-ratio: 4/3; }
.kp-karte figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.kp-karte:hover figure img { transform: scale(1.05); }
.kp-karte__inhalt { padding: 1.1rem 1.25rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.kp-karte__inhalt h3 { font-size: 1.25rem; margin: 0; }
.kp-karte__inhalt p { margin: 0; font-size: .95rem; }
.kp-karte__inhalt .kp-btn-wrap { margin-top: auto; padding-top: .4rem; }
.kp-karte .kp-aff-anzeige { margin: .2rem 0 0; }

.kp-banner { position: relative; overflow: hidden; }
.kp-banner .wp-block-cover__image-background { will-change: transform; }
.kp-banner h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); max-width: 14ch; line-height: 1.08; margin-bottom: .35em; }
.kp-banner p { max-width: 46ch; font-size: 1.08rem; }
.kp-banner .kp-banner__buttons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.4rem; }
.kp-banner .kp-aff-anzeige { color: rgba(255,255,255,.75); }

/* Buttons: Varianten + Mikro-Feedback */
.wp-element-button, .wp-block-button__link { transition: background-color .2s, color .2s, transform .15s, box-shadow .2s; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(26,43,60,.45); }
.wp-element-button:active, .wp-block-button__link:active { transform: translateY(0) scale(.98); box-shadow: none; }
.kp-btn--hell { background: #fff !important; color: var(--wp--preset--color--navy) !important; }
.kp-btn--hell:hover { background: var(--wp--preset--color--orange) !important; }
.kp-btn--linie { background: transparent !important; color: inherit !important; box-shadow: inset 0 0 0 2px currentColor; }
.kp-btn--linie:hover { background: rgba(255,255,255,.12) !important; box-shadow: inset 0 0 0 2px currentColor; }
:where(a, button, summary, input, select):focus-visible { outline: 3px solid var(--wp--preset--color--orange); outline-offset: 2px; }

/* Stand-Hinweis, Abschnitt, Autor, Breadcrumb */
.kp-stand { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grau); }
.kp-abschnitt { border-top: 1px dashed #DCD3C4; }
.kp-autor img { border-radius: 50%; }
.kp-breadcrumb { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grau); }
.kp-breadcrumb a { color: inherit; }
blockquote.wp-block-quote { border-left: 0 !important; padding: 0 0 0 2.6rem; position: relative; font-family: var(--wp--preset--font-family--fraunces); font-size: 1.3rem; line-height: 1.4; color: var(--wp--preset--color--navy); }
blockquote.wp-block-quote::before { content: "\201E"; position: absolute; left: 0; top: -.35em; font-size: 3.6rem; color: var(--wp--preset--color--orange); line-height: 1; }

/* =====================================================================
   Header: klebt oben, wird beim Scrollen kompakter
   ===================================================================== */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
header.wp-block-template-part > .wp-block-group { transition: box-shadow .25s; }
header.wp-block-template-part .kp-logo img { transition: height .25s; }
.kp-gescrollt header.wp-block-template-part > .wp-block-group { box-shadow: 0 6px 18px -12px rgba(26,43,60,.35); }
.kp-gescrollt header.wp-block-template-part .kp-logo img { height: 40px; }
@media (max-width: 600px) { .kp-gescrollt header.wp-block-template-part .kp-logo img { height: 34px; } }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

/* Hero: ein ruhiger Auftritt beim Laden */
.kp-hero .wp-block-cover__inner-container { max-width: 760px; }
.kp-hero .wp-block-post-title, .kp-hero h1, .kp-hero h2 { animation: kp-auftauchen .9s cubic-bezier(.2,.7,.2,1) both .1s; }

@keyframes kp-auftauchen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes kp-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }

/* Footer */
.kp-footer a { color: #fff; }
.kp-footer a:hover { color: var(--wp--preset--color--orange); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* Logo */
.kp-logo img { display: block; height: 52px; width: auto; max-width: 68vw; object-fit: contain; object-position: left center; }
@media (max-width: 600px) { .kp-logo img { height: 40px; } }

/* Startseite: Hero direkt unter dem Header, ohne weiße Lücke */
.wp-site-blocks > main:has(> .kp-hero:first-child) { margin-block-start: 0; }
.kp-hero, .kp-banner { overflow: hidden; }
.kp-banner .wp-block-cover__inner-container { width: 100%; max-width: var(--wp--style--global--wide-size) !important; margin-inline: auto !important; padding-inline: var(--wp--style--root--padding-left, 1.5rem); box-sizing: border-box; }
.kp-banner .wp-block-cover__inner-container > * { margin-left: 0 !important; }

/* =====================================================================
   v1.2 – Modern Boho: Bögen, Linien-Icons, erdige Töne
   ===================================================================== */
:root { --kp-ic: url(assets/icons/sonne.svg); }
body { background: var(--wp--preset--color--base); }

/* Bildkarten: Bogenfenster statt Rechteck */
.kp-karte { background: transparent; border: 0; border-radius: 0; overflow: visible; }
.kp-karte figure { aspect-ratio: 4/5; border-radius: 999px 999px 18px 18px; }
.kp-karte__inhalt { padding: 1.1rem .2rem 0; text-align: center; align-items: center; }
.kp-karte__inhalt h3 { font-weight: 500; font-size: 1.45rem; }
.kp-karte__inhalt .kp-btn-wrap { padding-top: .6rem; }
.kp-karte .kp-aff-anzeige { text-align: center; }

/* Buttons: Pille, Terrakotta */
.kp-btn--linie { box-shadow: inset 0 0 0 1.5px currentColor; }
.kp-btn--hell { background: var(--wp--preset--color--base) !important; color: var(--wp--preset--color--navy) !important; }

/* Steckbrief: Linien-Icons statt Punkte */
.kp-steckbrief { border-radius: 26px; background: var(--wp--preset--color--base) !important; box-shadow: inset 0 0 0 1px var(--wp--preset--color--linie); }
.has-base-background-color .kp-steckbrief { background: var(--wp--preset--color--sand) !important; box-shadow: none; }
.kp-steckbrief tr { border-top: 0 !important; padding: .9rem 0 .9rem 3rem; position: relative; }
.kp-steckbrief td:first-child { color: var(--wp--preset--color--salbei); font-family: var(--wp--preset--font-family--fraunces); font-style: italic; font-weight: 400; font-size: .95rem; }
.kp-steckbrief td:first-child::before { content: none; }
.kp-steckbrief tr::before { content: ""; position: absolute; left: 0; top: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--kp-ic) center / 1.45rem no-repeat, var(--wp--preset--color--rose); }
.kp-steckbrief tr:nth-child(6n+1) { --kp-ic: url(assets/icons/sonne.svg); }
.kp-steckbrief tr:nth-child(6n+2) { --kp-ic: url(assets/icons/palme.svg); }
.kp-steckbrief tr:nth-child(6n+3) { --kp-ic: url(assets/icons/boot.svg); }
.kp-steckbrief tr:nth-child(6n+4) { --kp-ic: url(assets/icons/welle.svg); }
.kp-steckbrief tr:nth-child(6n+5) { --kp-ic: url(assets/icons/blatt.svg); }
.kp-steckbrief tr:nth-child(6n+6) { --kp-ic: url(assets/icons/berg.svg); }
.kp-steckbrief tr:nth-child(even)::before { background-color: var(--wp--preset--color--tuerkis-hell); }

/* Sektionen: kleines Ornament über der ersten Überschrift in Farbbändern */
.kp-sektion.has-sand-background-color > h2:first-child::before,
.kp-sektion.has-tuerkis-hell-background-color > h2:first-child::before {
  content: ""; display: block; width: 3rem; height: 3rem; margin-bottom: .6rem;
  background: url(assets/icons/bogen.svg) left center / contain no-repeat; opacity: .75; }
.kp-sektion.has-tuerkis-hell-background-color > h2:first-child::before { background-image: url(assets/icons/blatt.svg); }

/* Tabellen-Kiesel in Creme/Rosé */
.kp-vergleich tbody td { background: var(--wp--preset--color--base); }
.has-base-background-color .kp-vergleich tbody td { background: var(--wp--preset--color--sand); }
.kp-vergleich tbody tr:nth-child(3n+3) td:first-child::before { background: var(--wp--preset--color--salbei); }
.kp-vergleich tbody tr:nth-child(3n+1) td:first-child::before { background: var(--wp--preset--color--terracotta); }

/* Banner: Text in einer Creme-Karte mit Doppellinie über dem Foto */
.kp-banner .wp-block-cover__inner-container > .kp-banner__karte,
.kp-banner__karte { background: var(--wp--preset--color--base); color: var(--wp--preset--color--navy); border-radius: 28px; padding: clamp(1.6rem,4vw,2.8rem);
  max-width: 560px !important; outline: 1px solid rgba(255,255,255,.7); outline-offset: 10px; }
.kp-banner__karte h2 { color: var(--wp--preset--color--navy) !important; font-weight: 500; }
.kp-banner__karte p { color: #3C4A57 !important; }
.kp-banner__karte .kp-aff-anzeige { color: var(--wp--preset--color--grau) !important; }
.kp-banner__karte .kp-btn--linie { color: var(--wp--preset--color--navy) !important; }

/* Zitat: Blatt statt Anführungszeichen */
blockquote.wp-block-quote::before { content: ""; width: 2rem; height: 2rem; top: .1em; background: url(assets/icons/blatt.svg) center / contain no-repeat; }

/* Überschriften etwas weicher */
:where(h2.wp-block-heading) { font-weight: 500; }

/* FAQ-Icon in Erdtönen */
.kp-faq .wp-block-details summary::after { background-color: var(--wp--preset--color--rose); }
.kp-faq .wp-block-details[open] summary::after { background-color: var(--wp--preset--color--tuerkis-hell); }

/* v1.3 – organische Formen (Welle, Bucht, Blatt) statt Bögen; größere Icons */
.kp-karte figure { aspect-ratio: 4/5; border-radius: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 14C14 4 26 4 40 10s28 8 42 0c8-4 14-4 18-2v117H0z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125' preserveAspectRatio='none'%3E%3Cpath d='M0 14C14 4 26 4 40 10s28 8 42 0c8-4 14-4 18-2v117H0z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; }
.kp-karte:nth-child(3n+2) figure { -webkit-mask: none; mask: none; border-radius: 58% 42% 46% 54% / 38% 44% 56% 62%; }
.kp-karte:nth-child(3n+3) figure { -webkit-mask: none; mask: none; border-radius: 12% 70% 14% 62% / 10% 52% 18% 60%; }
.kp-steckbrief tr { padding-left: 3.9rem; min-height: 3.4rem; }
.kp-steckbrief tr::before { width: 3rem; height: 3rem; top: .8rem; background-size: 2rem, auto !important; border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; }
.kp-sektion.has-sand-background-color > h2:first-child::before,
.kp-sektion.has-tuerkis-hell-background-color > h2:first-child::before { width: 4.5rem; height: 4.5rem; opacity: .9; }
.kp-sektion.has-sand-background-color > h2:first-child::before { background-image: url(assets/icons/welle.svg); }

/* v1.4 – Naturmuster im Hintergrund, Papier-Körnung, Wasserringe */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .17 0 0 0 0 .24 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kp-sektion { position: relative; isolation: isolate; }
.kp-sektion > * { position: relative; z-index: 1; }
/* Sand: feine Wellenlinien wie Wasser */
.kp-sektion.has-sand-background-color::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='44' viewBox='0 0 220 44'%3E%3Cpath d='M0 22c27.5 0 27.5-12 55-12s27.5 12 55 12 27.5-12 55-12 27.5 12 55 12' fill='none' stroke='%23E3D9C6' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 220px 44px;
  -webkit-mask: linear-gradient(90deg, #000 0, transparent 26%, transparent 74%, #000 100%); mask: linear-gradient(90deg, #000 0, transparent 26%, transparent 74%, #000 100%); }
/* Türkis hell: Blätter aus dem Dschungel */
.kp-sektion.has-tuerkis-hell-background-color::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180' fill='none' stroke='%23B9DCDC' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M30 70c10-30 40-40 60-38-4 22-24 46-60 38z'/%3E%3Cpath d='M30 70 78 40M44 61l8-14M56 54l10-12M66 48l10-8M42 64l16 2M54 57l18 0'/%3E%3Cpath d='M120 160c-6-26 8-48 30-58 8 22-4 50-30 58z'/%3E%3Cpath d='M120 160 146 108M126 146l-10-6M131 134l-12-4M137 122l-10-6M128 144l12-2M134 130l12-4'/%3E%3C/svg%3E") 0 0 / 180px 180px;
  -webkit-mask: radial-gradient(ellipse at center, transparent 35%, #000 80%); mask: radial-gradient(ellipse at center, transparent 35%, #000 80%); }
/* Navy: Wasserringe in der Ecke */
.kp-sektion.has-navy-background-color { overflow: hidden; }
.kp-sektion.has-navy-background-color::after { content: ""; position: absolute; right: -140px; top: -140px; width: 420px; height: 420px; z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 22px, rgba(143,217,220,.16) 22px 23.5px); }
.kp-sektion.has-navy-background-color::before { content: ""; position: absolute; left: -120px; bottom: -160px; width: 340px; height: 340px; z-index: 0; pointer-events: none; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(245,166,35,.14) 18px 19.5px); }
/* Weiche Wellenkante oben an farbigen Bändern */
.kp-sektion.has-sand-background-color, .kp-sektion.has-tuerkis-hell-background-color, .kp-sektion.has-navy-background-color {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18C180 2 360 2 540 16s360 22 540 8 300-18 360-12V40H0z'/%3E%3C/svg%3E") top / 100% 40px no-repeat, linear-gradient(#000,#000) 0 39px / 100% calc(100% - 39px) no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18C180 2 360 2 540 16s360 22 540 8 300-18 360-12V40H0z'/%3E%3C/svg%3E") top / 100% 40px no-repeat, linear-gradient(#000,#000) 0 39px / 100% calc(100% - 39px) no-repeat;
  margin-top: -20px !important; padding-top: calc(var(--wp--preset--spacing--60) + 20px); }
.kp-sektion.has-navy-background-color { overflow: visible; }
.kp-sektion.has-navy-background-color::after, .kp-sektion.has-navy-background-color::before { clip-path: inset(0); }

/* v1.5 – Autorenbox mit Aufmerksamkeit */
.kp-autor { display: grid !important; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: var(--wp--preset--color--navy) !important; color: #fff; border-radius: 32px; padding: clamp(1.6rem, 4vw, 2.8rem) !important; position: relative; overflow: hidden; margin-block: var(--wp--preset--spacing--50) !important; }
.kp-autor::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(245,166,35,.18) 18px 19.5px); }
.kp-autor__foto { margin: 0; position: relative; z-index: 1; }
.kp-autor__foto::before { content: ""; position: absolute; inset: -10px -14px 10px 14px; border-radius: 58% 42% 46% 54% / 44% 52% 48% 56%; background: var(--wp--preset--color--orange); z-index: -1; }
.kp-autor__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 58% 42% 46% 54% / 44% 52% 48% 56% !important; }
.kp-autor__text { position: relative; z-index: 1; }
.kp-autor__text p { color: rgba(255,255,255,.88); margin: 0 0 .9rem; }
.kp-autor__gruss { font-family: var(--wp--preset--font-family--fraunces); font-style: italic; font-size: clamp(1.7rem, 3.5vw, 2.3rem); line-height: 1.1; color: #fff !important; }
.kp-autor__fakten { display: flex; flex-wrap: wrap; gap: .5rem; }
.kp-autor__fakten span { font-size: .8rem; padding: .35rem .75rem; border-radius: 99px; background: rgba(143,217,220,.16); color: #CFEFF0; }
.kp-autor .kp-btn--linie { color: #fff !important; }
@media (max-width: 680px) { .kp-autor { grid-template-columns: 1fr; text-align: left; } .kp-autor__foto { max-width: 200px; } }
/* FAQ als eigene Sektion: Überschrift zentriert */
.kp-sektion > .kp-faq > h2 { text-align: center; }
.kp-sektion > .kp-faq > h2::before { content: ""; display: block; width: 4rem; height: 3rem; margin: 0 auto .6rem; background: url(assets/icons/stern.svg) center / contain no-repeat; opacity: .85; }
html, body { overflow-x: clip; } .wp-block-cover.kp-hero, .wp-block-cover.kp-banner { overflow: clip; }
.kp-autor__foto img { height: auto !important; aspect-ratio: 1 / 1 !important; } .kp-autor { max-width: 860px !important; }