/*
Theme Name:   Kanarenzeit
Theme URI:    https://kanarenzeit.de/
Description:  Schlankes Block-Theme für Kanarenzeit (Child von Twenty Twenty-Five). Kopf mit Inselleiste, Inhaltsseite mit Seitenleiste für Mediavine, Inselseite mit Steckbrief und Wetter, Teilen ohne Fremdskripte, nur Manrope (lokal).
Author:       Kanarenzeit
Template:     twentytwentyfive
Version:      1.0.13
Requires at least: 6.6
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  kanarenzeit
*/

/* ==========================================================================
   Grundlagen (Farben aus theme.json, Werte wie Stil-Konzept.md)
   ========================================================================== */
:root {
	--kz-weiss: var(--wp--preset--color--base);
	--kz-sand: var(--wp--preset--color--sand);
	--kz-linie: var(--wp--preset--color--linie);
	--kz-lava: var(--wp--preset--color--contrast);
	--kz-leise: var(--wp--preset--color--leise);
	--kz-atlantik: var(--wp--preset--color--atlantik);
	--kz-atlantik-dunkel: var(--wp--preset--color--atlantik-dunkel);
	--kz-atlantik-hell: var(--wp--preset--color--atlantik-hell);
	--kz-knopf: var(--wp--preset--color--terrakotta);
	--kz-knopf-hover: var(--wp--preset--color--terrakotta-dunkel);
	--kz-sonne-hell: var(--wp--preset--color--sonne-hell);
	--kz-rund: 14px;
	--kz-schatten: 0 1px 3px rgba(31, 42, 48, .08);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
iframe, video, embed { max-width: 100%; }
/* lange Adressen als Linktext umbrechen, sonst ragt die Seite auf dem Handy über den Rand */
.wp-block-post-content { overflow-wrap: break-word; }
:where(h1, h2, h3, h4) { scroll-margin-top: 20px; }

/* Abstände zwischen Kopf, Inhalt und Fuß (Twenty Twenty-Five setzt sonst blockGap) */
.wp-site-blocks > * { margin-block-start: 0; }

.kz-wrap { max-width: 1160px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; box-sizing: content-box; }
.kz-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kz-leise { color: var(--kz-leise); font-size: .95rem; }
.kz-vorspann { color: var(--kz-leise); max-width: 640px; }
.kz-einleitung { font-size: 1.15rem; }
.kz-mehr a { font-weight: 700; }

/* Kleine Zeile mit Farbpunkt („Teneriffa · Strände“) */
.kz-marke { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--kz-leise); margin: 0 0 6px; }
.kz-marke i { width: 9px; height: 9px; border-radius: 50%; background: var(--farbe, var(--kz-atlantik)); flex: 0 0 auto; }

/* Buttons außerhalb von Blöcken (Startbild, Suche) */
.kz-knopf { display: inline-block; background: var(--kz-knopf); color: #fff; font: inherit; font-weight: 700; text-decoration: none; padding: 12px 22px; border-radius: 12px; border: 0; cursor: pointer; line-height: 1.3; }
.kz-knopf:hover, .kz-knopf:focus { background: var(--kz-knopf-hover); color: #fff; }
.kz-knopf--zweit { background: transparent; box-shadow: inset 0 0 0 2px #fff; }
.kz-knopf--zweit:hover { background: rgba(255, 255, 255, .15); }
.kz-knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }

/* Block-Button „Nur Rahmen“ */
.wp-block-button.is-style-zweit .wp-block-button__link { background: transparent; color: var(--kz-atlantik); box-shadow: inset 0 0 0 2px var(--kz-atlantik); }
.wp-block-button.is-style-zweit .wp-block-button__link:hover { background: var(--kz-atlantik); color: #fff; }

/* ==========================================================================
   Kopf und Menü
   ========================================================================== */
.kz-kopf { background: var(--kz-atlantik-dunkel); color: #fff; position: relative; z-index: 30; }
.kz-kopf__innen { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.kz-logo { display: block; flex: 0 0 auto; }
.kz-logo img { display: block; width: 190px; height: auto; }
.kz-menue { display: flex; align-items: center; gap: 4px; margin-left: auto; font-weight: 700; font-size: .95rem; }
.kz-menue > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.kz-menue > ul > li { position: relative; }
.kz-menue a, .kz-menue summary { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 7px; padding: 10px; border-radius: 10px; cursor: pointer; }
.kz-menue a:hover, .kz-menue summary:hover, .kz-menue details[open] > summary { background: rgba(255, 255, 255, .1); color: #fff; }
.kz-menue summary { list-style: none; }
.kz-menue summary::-webkit-details-marker { display: none; }
.kz-menue .kz-auf:not(.kz-suche) > summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 0 0 3px; }
.kz-auf { position: relative; }
.kz-aufklapp { position: absolute; right: 0; top: calc(100% + 8px); background: var(--kz-weiss); color: var(--kz-lava); border-radius: var(--kz-rund); box-shadow: 0 12px 34px rgba(10, 40, 50, .22); padding: 18px; width: min(680px, 92vw); display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 18px; }
.kz-menue .kz-aufklapp a { color: var(--kz-lava); padding: 9px 10px; align-items: flex-start; }
.kz-menue .kz-aufklapp a:hover { background: var(--kz-sand); color: var(--kz-lava); }
.kz-aufklapp a span { display: block; }
.kz-aufklapp a small { display: block; color: var(--kz-leise); font-weight: 500; font-size: .85rem; line-height: 1.35; }
.kz-suche { margin-left: 6px; }
.kz-suche > summary { border: 1px solid rgba(255, 255, 255, .35); }
.kz-suche svg, .kz-themen svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kz-aufklapp--suche { width: min(420px, 92vw); grid-template-columns: 1fr; }
.kz-suchfeld { display: flex; gap: 8px; }
.kz-suchfeld input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 11px 14px; border: 1px solid var(--kz-linie); border-radius: 12px; }
.kz-burger { display: none; }

/* Inselleiste unter dem Kopf: alle 7 Inseln immer sichtbar */
.kz-inselleiste { background: var(--kz-atlantik); border-top: 1px solid rgba(255, 255, 255, .08); }
.kz-inselleiste ul { display: flex; justify-content: space-between; gap: 4px; list-style: none; margin: 0 auto; padding: 0 20px; max-width: 1160px; overflow-x: auto; scrollbar-width: none; }
.kz-inselleiste a { display: flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; padding: 11px 8px; white-space: nowrap; border-bottom: 3px solid transparent; }
.kz-inselleiste a:hover, .kz-inselleiste a[aria-current] { border-bottom-color: var(--farbe); color: #fff; }
.kz-inselleiste i, .kz-burger-flaeche i, .kz-fuss i, .kz-leiste-inseln i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--farbe); flex: 0 0 auto; }

@media (max-width: 900px) {
	.kz-kopf__innen { min-height: 64px; }
	.kz-logo img { width: 150px; }
	.kz-menue { display: none; }
	.kz-burger { display: block; margin-left: auto; }
	.kz-burger > summary { list-style: none; cursor: pointer; color: #fff; display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; }
	.kz-burger > summary::-webkit-details-marker { display: none; }
	.kz-burger > summary b { display: block; width: 20px; height: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; }
	.kz-burger[open] > summary b { box-shadow: none; background: transparent; position: relative; }
	.kz-burger[open] > summary b::before, .kz-burger[open] > summary b::after { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 2px; background: #fff; transform: rotate(45deg); }
	.kz-burger[open] > summary b::after { transform: rotate(-45deg); }
	.kz-burger-flaeche { position: absolute; left: 0; right: 0; top: 100%; background: var(--kz-weiss); color: var(--kz-lava); padding: 16px 20px 22px; box-shadow: 0 14px 30px rgba(10, 40, 50, .25); max-height: calc(100vh - 64px); overflow: auto; }
	.kz-burger-flaeche p { margin: 14px 0 4px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--kz-leise); }
	.kz-burger-flaeche ul { list-style: none; margin: 0; padding: 0; }
	.kz-burger-flaeche a { display: flex; align-items: center; gap: 10px; padding: 11px 4px; color: var(--kz-lava); text-decoration: none; font-weight: 700; border-bottom: 1px solid var(--kz-linie); }
	.kz-inselleiste ul { justify-content: flex-start; }
}

/* ==========================================================================
   Startbild (Startseite und Inselseite)
   ========================================================================== */
.kz-held { position: relative; min-height: min(70vh, 560px); display: flex; align-items: flex-end; color: #fff; background: var(--kz-atlantik-dunkel); overflow: hidden; }
.kz-held__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kz-held::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 30, 40, 0) 25%, rgba(10, 30, 40, .78) 100%); }
.kz-held .kz-wrap { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 44px; width: 100%; }
.kz-held h1, .kz-held h2 { color: #fff; max-width: 760px; margin: 0 0 .3em; font-size: var(--wp--preset--font-size--xx-large); }
.kz-held p { font-size: 1.2rem; max-width: 580px; margin: 0 0 22px; }
.kz-held .kz-marke { color: #fff; font-size: .85rem; }
.kz-held--klein { min-height: 380px; }
.kz-held--klein .kz-wrap { padding-bottom: 64px; }
/* Startbild im Seiteninhalt (Shortcode) über die ganze Breite, wie „volle Breite“ */
.is-layout-constrained > .kz-held { max-width: none !important; margin-left: calc(var(--wp--style--root--padding-left, 20px) * -1) !important; margin-right: calc(var(--wp--style--root--padding-right, 20px) * -1) !important; }
.kz-volle-breite > .wp-block-post-content > .kz-held:first-child { margin-top: 0; }

/* ==========================================================================
   Abschnitte (Startseite, Inselseite)
   ========================================================================== */
.kz-abschnitt { padding-top: 56px; padding-bottom: 56px; }
.kz-abschnitt.alignwide { padding-top: 40px; padding-bottom: 40px; }
.kz-weiss { background: var(--kz-weiss); }
.kz-abschnitt h2:first-child { margin-top: 0; }
.wp-block-post-content > .kz-abschnitt { margin-block-start: 0; }
.kz-volle-breite, .kz-inselseite { padding-bottom: 20px; }

/* ==========================================================================
   Karten
   ========================================================================== */
.kz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin-top: 26px; padding: 0; list-style: none; }
.kz-raster--drei { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.kz-raster--vier { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kz-karte { background: var(--kz-weiss); border-radius: var(--kz-rund); overflow: hidden; box-shadow: var(--kz-schatten); text-decoration: none; color: inherit; display: flex; flex-direction: column; border-top: 5px solid var(--farbe, var(--kz-atlantik)); transition: transform .15s, box-shadow .15s; }
a.kz-karte:hover, .kz-karte--block:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31, 42, 48, .12); color: inherit; }
.kz-karte img, .kz-karte__leer { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }
.kz-karte__leer { background: var(--kz-atlantik-hell); }
.kz-raster--4-3 .kz-karte img, .kz-raster--4-3 .kz-karte__leer { aspect-ratio: 4/3; }
.kz-karte > div, .kz-karte__text { padding: 14px 18px 18px; }
.kz-karte h3, .kz-karte .wp-block-post-title { margin: 0 0 4px; font-size: 1.15rem; }
.kz-karte p { margin: 0; color: var(--kz-leise); font-size: .95rem; }
.kz-karte--ohne-linie { border-top: 0; }
.kz-raster--4-3 .kz-karte h3 { font-size: 1.05rem; }
/* Karten aus der Abfrage (Magazin, Suche) */
.kz-karte--block { margin: 0; gap: 0; }
.kz-karte--block .wp-block-post-featured-image { margin: 0; }
.kz-karte--block .wp-block-post-title a { color: inherit; text-decoration: none; }
.kz-karte--block .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.kz-karte--block { position: relative; }
.kz-karte--block .wp-block-post-excerpt { margin-top: 4px; }
.kz-karte--block .wp-block-post-excerpt__more-text { display: none; }

/* Themen-Kacheln (klein, ohne Bild) */
.kz-themen { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-top: 22px; }
.kz-themen a { min-width: 0; hyphens: auto; overflow-wrap: break-word; background: var(--kz-weiss); border: 1px solid var(--kz-linie); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--kz-lava); font-weight: 700; display: flex; align-items: center; gap: 10px; }
.kz-themen a:hover { border-color: var(--kz-atlantik); color: var(--kz-atlantik); }
.kz-themen svg { width: 22px; height: 22px; stroke: var(--kz-atlantik); stroke-width: 1.8; }

/* Tabelle „Welche Insel passt zu dir?“ (Zeilen in der Reihenfolge der Inselleiste) */
.wp-block-table.is-style-inselwahl table { width: 100%; border-collapse: collapse; background: var(--kz-weiss); border-radius: var(--kz-rund); overflow: hidden; font-size: .97rem; }
.wp-block-table.is-style-inselwahl :is(th, td) { text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--kz-linie); vertical-align: top; }
.wp-block-table.is-style-inselwahl thead { border: 0; }
.wp-block-table.is-style-inselwahl th { background: var(--kz-atlantik-hell); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.wp-block-table.is-style-inselwahl td:first-child { font-weight: 800; white-space: nowrap; }
.wp-block-table.is-style-inselwahl td:first-child::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--farbe, var(--kz-atlantik)); margin-right: 8px; }
.is-style-inselwahl tbody tr:nth-child(1) { --farbe: var(--wp--preset--color--teneriffa); }
.is-style-inselwahl tbody tr:nth-child(2) { --farbe: var(--wp--preset--color--gran-canaria); }
.is-style-inselwahl tbody tr:nth-child(3) { --farbe: var(--wp--preset--color--lanzarote); }
.is-style-inselwahl tbody tr:nth-child(4) { --farbe: var(--wp--preset--color--fuerteventura); }
.is-style-inselwahl tbody tr:nth-child(5) { --farbe: var(--wp--preset--color--la-palma); }
.is-style-inselwahl tbody tr:nth-child(6) { --farbe: var(--wp--preset--color--la-gomera); }
.is-style-inselwahl tbody tr:nth-child(7) { --farbe: var(--wp--preset--color--el-hierro); }
.wp-block-table.is-style-inselwahl { overflow-x: auto; }

/* ==========================================================================
   Inhaltsseite (Seite und Beitrag): Inhalt 720 px + Seitenleiste 300 px ab 1100 px
   ========================================================================== */
.kz-seite { padding-bottom: 40px; }
.kz-brotkrumen { font-size: .88rem; color: var(--kz-leise); margin: 22px 0 14px; }
.kz-brotkrumen a { color: var(--kz-leise); }
.kz-artikel-raster { display: grid; grid-template-columns: minmax(0, 720px) 300px; gap: 56px; justify-content: center; }
.kz-artikel-raster > * { margin-block-start: 0; }
.kz-artikel-raster:not(:has(.kz-seitenleiste)) { grid-template-columns: minmax(0, 860px); } /* Startseite, schlichte Seiten */
.kz-artikel { min-width: 0; }
.kz-artikel .wp-block-post-title { margin: 0 0 .3em; }
.kz-titelbild { margin: 22px 0 6px; }
.kz-titelbild img { border-radius: var(--kz-rund); }
.kz-inhalt-text figure.wp-block-image { margin-top: 22px; margin-bottom: 22px; }
.kz-inhalt-text .wp-block-image img { border-radius: 12px; }
.kz-inhalt-text > h2 { margin-top: 1.6em; }

/* Seitenleiste: nur am großen Bildschirm. Mediavine setzt die klebende Anzeige in .kz-leiste-anzeige */
.kz-seitenleiste { position: relative; min-width: 0; }
.kz-leiste-anzeige { position: sticky; top: 20px; }
.kz-leiste-box { background: var(--kz-weiss); border: 1px solid var(--kz-linie); border-radius: var(--kz-rund); padding: 18px; margin: 42px 0 22px; font-size: .95rem; }
.kz-leiste-box__titel { margin: 0 0 8px; font-size: 1rem; font-weight: 800; }
.kz-leiste-box ul { list-style: none; margin: 0; padding: 0; }
.kz-leiste-box li a { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--kz-linie); text-decoration: none; font-weight: 600; }
.kz-leiste-box li:last-child a { border-bottom: 0; }
@media (max-width: 1100px) {
	.kz-artikel-raster { grid-template-columns: minmax(0, 720px); }
	.kz-seitenleiste { display: none; }
}

/* Inhaltsverzeichnis */
.kz-inhalt { background: var(--kz-weiss); border: 1px solid var(--kz-linie); border-radius: var(--kz-rund); padding: 6px 20px; margin: 26px 0; }
.kz-inhalt summary { font-weight: 800; cursor: pointer; padding: 10px 0; }
.kz-inhalt ol { margin: 0 0 14px; padding-left: 22px; columns: 2; column-gap: 30px; }
.kz-inhalt li { break-inside: avoid; padding: 2px 0; }
@media (max-width: 600px) { .kz-inhalt ol { columns: 1; } }

/* Kästen „Unser Tipp“ und „Gut zu wissen“ */
.wp-block-group.is-style-tipp, .wp-block-group.is-style-wissen { background: var(--kz-atlantik-hell); border-left: 5px solid var(--kz-atlantik); border-radius: 10px; padding: 16px 20px; margin-top: 24px; margin-bottom: 24px; }
.wp-block-group.is-style-tipp { background: var(--kz-sonne-hell); border-color: var(--kz-knopf); }
:is(.is-style-tipp, .is-style-wissen) > * { margin-top: 0; margin-bottom: 0; }
:is(.is-style-tipp, .is-style-wissen) > * + * { margin-top: 4px; }
.wp-block-group.is-style-karte { background: var(--kz-weiss); border-radius: var(--kz-rund); box-shadow: var(--kz-schatten); padding: 22px; }

/* Steckbrief je Ort (Pillen) */
.wp-block-list.is-style-steckbrief { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; padding: 0; list-style: none; }
.wp-block-list.is-style-steckbrief li { background: var(--kz-sand); border: 1px solid var(--kz-linie); border-radius: 999px; padding: 3px 12px; font-size: .88rem; font-weight: 600; margin: 0; }
.kz-inhalt-text .wp-block-list.is-style-steckbrief li { background: var(--kz-weiss); }

/* Linkliste in Spalten (Inselseite „Reise planen“) */
.wp-block-list.is-style-linkliste { columns: 3 220px; column-gap: 28px; margin: 18px 0 0; padding: 0; list-style: none; }
.wp-block-list.is-style-linkliste li { break-inside: avoid; }
.wp-block-list.is-style-linkliste a { display: block; padding: 7px 0; border-bottom: 1px solid var(--kz-linie); text-decoration: none; font-weight: 600; }
.wp-block-list.is-style-linkliste a::before { content: "›"; color: var(--kz-knopf); font-weight: 800; margin-right: 8px; }

/* Liste mit Haken */
.wp-block-list.is-style-haken { list-style: none; padding-left: 0; }
.wp-block-list.is-style-haken li { position: relative; padding-left: 28px; }
.wp-block-list.is-style-haken li::before { content: "✓"; position: absolute; left: 4px; color: var(--kz-atlantik); font-weight: 800; }

/* Angebot / Partner-Kasten */
.wp-block-group.is-style-angebot { display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; align-items: center; background: var(--kz-weiss); border: 1px solid var(--kz-linie); border-radius: var(--kz-rund); padding: 14px; margin-top: 26px; margin-bottom: 26px; }
.is-style-angebot > * { margin: 0 !important; }
.is-style-angebot .wp-block-image img { width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }
.kz-angebot__text > * { margin: 0; }
.kz-angebot__text h4 { font-size: 1.05rem; margin: 2px 0; }
.kz-angebot__text p { font-size: .92rem; color: var(--kz-leise); }
.kz-angebot__marke { font-size: .78rem !important; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.kz-angebot__hinweis { font-size: .75rem !important; margin-top: 4px !important; }
@media (max-width: 600px) {
	.wp-block-group.is-style-angebot { grid-template-columns: 80px 1fr; }
	.is-style-angebot .wp-block-image img { width: 80px; }
	.is-style-angebot .wp-block-buttons { grid-column: 1 / -1; }
	.is-style-angebot .wp-block-button, .is-style-angebot .wp-block-button__link { width: 100%; text-align: center; }
}

/* Teilen (ohne Fremdskripte) */
.kz-teilen { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.kz-teilen a, .kz-teilen button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; color: #fff; text-decoration: none; font: inherit; font-weight: 700; font-size: .92rem; border: 0; cursor: pointer; line-height: 1.3; }
.kz-teilen svg { width: 18px; height: 18px; fill: currentColor; }
.kz-teilen__fb { background: #1877f2; }
.kz-teilen__pin { background: #e60023; }
.kz-teilen__wa { background: #1fa855; }
.kz-teilen__mail { background: var(--kz-leise); }
.kz-teilen__kopie { background: var(--kz-atlantik); }
.kz-teilen a:hover, .kz-teilen button:hover { color: #fff; filter: brightness(.92); }
.kz-teilen--klein a { background: var(--kz-weiss); color: var(--kz-lava); box-shadow: inset 0 0 0 1px var(--kz-linie); }
.kz-teilen--klein a:hover { color: var(--kz-lava); filter: none; box-shadow: inset 0 0 0 1px var(--kz-leise); }
.kz-teilen--klein .kz-teilen__fb svg { fill: #1877f2; }
.kz-teilen--klein .kz-teilen__pin svg { fill: #e60023; }

/* Video erst nach Klick ([kz_video]) */
.kz-video { margin: 26px 0; }
.kz-video__start { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--kz-atlantik-dunkel); border-radius: var(--kz-rund); overflow: hidden; }
.kz-video__start img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kz-video__knopf { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--kz-knopf); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); transition: transform .15s; }
.kz-video__knopf svg { width: 34px; height: 34px; fill: #fff; margin-left: 4px; }
.kz-video__start:hover .kz-video__knopf, .kz-video__start:focus .kz-video__knopf { transform: scale(1.08); background: var(--kz-knopf-hover); }
.kz-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--kz-rund); }
.kz-video figcaption { color: var(--kz-leise); font-size: .9rem; margin-top: 8px; }

/* Ypsilon-Buchungsfenster: Ladebild, bis das Formular da ist (früher Post Snippets) */
#ypsnet-ibe iframe { width: 100%; background: url("https://cdn.kanarenzeit.de/wp-content/uploads/20180205234933/preloader1.gif") no-repeat center top; }

/* Das könnte dich auch interessieren */
.kz-weiter { margin-top: 30px; }
.kz-weiter h2 { margin-top: 0; }

/* ==========================================================================
   Inselseite
   ========================================================================== */
.kz-fakten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: -36px 0 0; position: relative; z-index: 2; }
.kz-fakten > div, .kz-fakten > a { background: var(--kz-weiss); border-radius: 12px; padding: 14px 16px; box-shadow: 0 2px 8px rgba(31, 42, 48, .08); border-top: 4px solid var(--farbe); }
.kz-fakten small { display: block; color: var(--kz-leise); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.kz-fakten b { font-size: 1.05rem; line-height: 1.35; display: block; }
.kz-fakten .kz-wetter { display: block; background: var(--kz-atlantik-hell); text-decoration: none; color: var(--kz-lava); }
.kz-fakten a.kz-wetter:hover { box-shadow: 0 6px 16px rgba(31, 42, 48, .14); color: var(--kz-lava); }
.kz-wetter b { display: flex; align-items: center; gap: 6px; }
.kz-wetter svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--kz-knopf); stroke-width: 2; stroke-linecap: round; }
.kz-wetter span { display: block; font-size: .82rem; color: var(--kz-leise); margin-top: 2px; }
.kz-insel-text { padding-top: 28px; }
/* Fließtext auf 720 px, aber linksbündig mit den breiten Abschnitten */
.kz-insel-text > p, .kz-insel-text > ul:not(.is-style-linkliste) { max-width: 720px; margin-left: max(0px, calc((100% - 1160px) / 2)) !important; }

/* Sprungleiste und „Die anderen Inseln“ (Pillen) */
.kz-sprung { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
.kz-sprung p { margin: 0; }
.kz-sprung a { display: inline-block; background: var(--kz-weiss); border: 1px solid var(--kz-linie); border-radius: 999px; padding: 6px 14px; text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--kz-lava); }
.kz-sprung a:hover { border-color: var(--farbe, var(--kz-atlantik)); box-shadow: inset 0 -3px 0 var(--farbe, var(--kz-atlantik)); color: var(--kz-lava); }

/* ==========================================================================
   Listen (Magazin, Suche, 404)
   ========================================================================== */
.kz-liste { padding-top: 34px; padding-bottom: 50px; }
.kz-liste .wp-block-query-pagination { margin-top: 30px; font-weight: 700; }
.kz-suche-seite { max-width: 560px; }
.kz-suche-seite .wp-block-search__input { border: 1px solid var(--kz-linie); border-radius: 12px; padding: 11px 14px; background: var(--kz-weiss); }
.kz-suche-seite .wp-block-search__button { margin-left: 8px; }

/* ==========================================================================
   Fuß
   ========================================================================== */
.kz-fuss { background: var(--kz-atlantik-dunkel); color: #dfeef1; padding: 48px 0 30px; font-size: .95rem; }
.kz-fuss a { color: #fff; text-decoration: none; }
.kz-fuss a:hover { text-decoration: underline; color: #fff; }
.kz-fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.kz-fuss-raster h2 { color: #fff; font-size: .85rem; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 10px; }
.kz-fuss-raster ul { list-style: none; margin: 0; padding: 0; }
.kz-fuss-raster li { padding: 3px 0; }
.kz-fuss-raster li a { display: inline-flex; align-items: center; gap: 8px; }
.kz-fuss-raster p { margin: 0; }
.kz-fuss .kz-logo img { width: 170px; margin-bottom: 12px; }
.kz-sozial { display: flex; gap: 10px; margin-top: 14px; }
.kz-sozial a { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.kz-sozial a:hover { background: rgba(255, 255, 255, .22); }
.kz-sozial svg { width: 18px; height: 18px; fill: #fff; }
.kz-fuss-unten { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 30px; padding-top: 18px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .88rem; }
@media (max-width: 860px) { .kz-fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kz-fuss-raster { grid-template-columns: 1fr; } }

/* ==========================================================================
   Handy: Grundschrift 18 px, keine Schrift unter 16 px (Wunsch Nutzerin)
   ========================================================================== */
@media (max-width: 700px) {
	body { font-size: 1.125rem; }
	.kz-einleitung, .kz-held p { font-size: 1.2rem; }
	.kz-karte h3, .kz-raster--4-3 .kz-karte h3 { font-size: 1.2rem; }
	.kz-fakten b { font-size: 1.12rem; }
	.kz-leise, .kz-karte p, .kz-leiste-box, .kz-leiste-box__titel, .kz-angebot__text p, .kz-angebot__text h4, .kz-fuss, .kz-fuss-unten, .kz-fuss-raster h2,
	.kz-marke, .kz-held .kz-marke, .kz-fakten small, .kz-wetter span, .kz-brotkrumen,
	.wp-block-table.is-style-inselwahl table, .wp-block-table.is-style-inselwahl th,
	.kz-sprung a, .kz-teilen a, .kz-teilen button, .kz-menue, .kz-inselleiste a, .kz-aufklapp a small, .kz-burger-flaeche p,
	.wp-block-list.is-style-steckbrief li, .has-small-font-size, .wp-element-caption, figcaption, small { font-size: 1rem; }
	.kz-angebot__marke, .kz-angebot__hinweis { font-size: 1rem !important; }
}

/* ==========================================================================
   Editor: Shortcode-Blöcke zeigen nur den Shortcode, etwas Luft
   ========================================================================== */
.editor-styles-wrapper .wp-block-shortcode { font-size: .9rem; }