/* =========================================================================
 * Tortuga Reisen — root.css
 *
 * ====================================================================== */
/* =========================================================================
 * 0. Schriften — lokal gehostet, keine Google Fonts
 * ====================================================================== */

@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Source Sans 3";
	src: url("../fonts/source-sans-3-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* =========================================================================
 * 1. Design-Tokens

 * ====================================================================== */

:root {
	/* Marke */
	--t-blau-900:  #0a2540;   /* Tiefsee — Fußleiste, Überschriften */
	--t-blau-700:  #14497a;   /* Hover, Ränder                      */
	--t-blau-600:  #1b5d9e;   /* Primär, Links, Logo                */
	--t-tuerkis:   #0f7f7f;   /* Akzent — abgedunkelt für 4.5:1     */
	--t-sand:      #f4efe6;   /* Flächen                            */

	/* CTA. #e2593f trägt auf Weiß nur 3,3:1 — als Textfarbe unbrauchbar,
	   als Fläche mit weißer Schrift ebenso. Deshalb abgedunkelt: 5,1:1. */
	--t-korall:      #c14328;
	--t-korall-tief: #9e3520;

	--t-text:      #1c1c1c;
	--t-text-mute: #565656;   /* 7,0:1 auf Weiß */
	--t-linie:     #d9d4ca;
	--t-weiss:     #ffffff;

	/* Auf dunklem Grund */
	--t-auf-dunkel:      #eef2f6;
	--t-auf-dunkel-mute: #a9bccd;   /* 5,4:1 auf --t-blau-900 */

	/* Fokusfarbe. Wird in Kopf- und Fußleiste lokal überschrieben,
	   damit der Ring dort seine 3:1 gegen den Untergrund behält. */
	--t-fokus: var(--t-korall);

	/* Typografie */
	--t-font-text:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
	--t-font-titel: "Fraunces", Georgia, "Times New Roman", serif;

	--t-fs-300: 0.9375rem;
	--t-fs-400: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--t-fs-600: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	--t-fs-700: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--t-fs-900: clamp(2rem, 1.6rem + 2vw, 3.25rem);

	--t-space-1: 0.25rem;
	--t-space-2: 0.5rem;
	--t-space-3: 0.75rem;
	--t-space-4: 1rem;
	--t-space-6: 2rem;
	--t-space-8: 4rem;

	--t-radius: 6px;
	--t-breite: 1200px;
	--t-breite-text: 68ch;

	--t-kopf-hoehe: 5rem;
	--t-schatten: 0 4px 20px rgb(10 37 64 / 0.10);
}


/* =========================================================================
 * 2. Reset / Basis
 * ====================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--t-font-text);
	font-size: var(--t-fs-400);
	line-height: 1.65;
	color: var(--t-text);
	background: var(--t-weiss);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--t-font-titel);
	font-weight: 700;
	line-height: 1.15;
	text-wrap: balance;
	color: var(--t-blau-900);
	margin: 0 0 var(--t-space-4);
}

h1 { font-size: var(--t-fs-900); }
h2 { font-size: var(--t-fs-700); }
h3 { font-size: var(--t-fs-600); }

p { margin: 0 0 var(--t-space-4); }

a {
	color: var(--t-blau-600);
	text-underline-offset: 0.18em;
}
a:hover { color: var(--t-blau-900); }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { padding-left: 1.25rem; }


/* =========================================================================
 * 3. WCAG 2.2 / EAA
 * ====================================================================== */

/* 2.4.7 Fokus sichtbar. Der weiße Zweitring hält den Kontrast auch dann,
   wenn das Element selbst auf einer farbigen Fläche liegt. */
:focus-visible {
	outline: 3px solid var(--t-fokus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* 2.4.1 Skip-Link */
.t-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: var(--t-space-4);
	background: var(--t-weiss);
	color: var(--t-blau-900);
	font-weight: 600;
}
.t-skip:focus { left: 0; }

/* Nur für Screenreader. .screen-reader-text ist der Kern-Klassenname,
   den tortuga_logo() und wp_nav_menu() ausgeben. */
.t-sr,
.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Zielgröße 24×24 CSS-Pixel (2.5.8). Nur echte Bedienelemente,
   nicht jeder Inline-Link im Fließtext. */
button,
input, select, textarea, summary,
.t-nav__liste a,
.t-fuss__recht a {
	min-height: 24px;
}

/* 2.3.3 Bewegung aus Interaktionen */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* =========================================================================
 * 4. Layout
 * ====================================================================== */

.t-mass {
	width: min(100% - 2rem, var(--t-breite));
	margin-inline: auto;
}

/* Der Skip-Ziel-Anker aus tortuga_header(). Kein Fokusring nötig,
   er ist leer und rein programmatisch. */
#inhalt:focus { outline: none; }

main { display: block; }


/* =========================================================================
 * 5. Buttons
 *
 * .t-btn          Grundform
 * .t-btn--voll    gefüllt, Primäraktion    (Kopfleiste)
 * .t-btn--hell    weiß auf dunkel          (Fußleiste)
 * .t-btn--rand    Umriss, Sekundäraktion
 * .t-btn--klein   Modifikator für die Kopfleiste
 * ====================================================================== */

.t-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--t-space-2);
	min-height: 44px;                 /* Touch-Ziel, großzügiger als 24px */
	padding: 0.75rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--t-radius);
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.t-btn--voll {
	background: var(--t-korall);
	color: var(--t-weiss);
}
.t-btn--voll:hover,
.t-btn--voll:focus-visible {
	background: var(--t-korall-tief);
	color: var(--t-weiss);
}

.t-btn--hell {
	background: var(--t-weiss);
	color: var(--t-blau-900);
}
.t-btn--hell:hover,
.t-btn--hell:focus-visible {
	background: var(--t-sand);
	color: var(--t-blau-900);
}

.t-btn--rand {
	background: transparent;
	color: var(--t-blau-600);
	border-color: currentColor;
}
.t-btn--rand:hover {
	background: var(--t-blau-600);
	color: var(--t-weiss);
}

.t-btn--klein {
	min-height: 40px;
	padding: 0.5rem 1.15rem;
	font-size: var(--t-fs-300);
}


/* =========================================================================
 * 6. Kopfleiste
 *
 * Weißer Grund, weil das Logo blaue Linien auf transparent trägt.
 * Auf Tiefsee-Blau wäre es unsichtbar.
 * ====================================================================== */

.t-kopfleiste {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--t-weiss);
	border-bottom: 1px solid var(--t-linie);
	transition: box-shadow 0.2s ease;
}

/* Klasse setzt der IntersectionObserver im Footer-Snippet. */
.t-kopfleiste--gescrollt {
	box-shadow: var(--t-schatten);
}

/* Die WP-Adminbar schiebt das html-Element nach unten — sticky muss folgen. */
body.admin-bar .t-kopfleiste { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .t-kopfleiste { top: 46px; }
}

.t-kopfleiste__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-space-4);
	min-height: var(--t-kopf-hoehe);
	padding-block: var(--t-space-2);
}

/* --- Logo --------------------------------------------------------------- */

.t-logo {
	display: block;
	flex: 0 0 auto;
	text-decoration: none;
	line-height: 0;
}

.t-logo__bild {
	width: auto;
	max-height: 3.5rem;
}

/* Wortmarke, falls im Customizer kein Logo hinterlegt ist */
.t-logo__wort {
	display: block;
	font-family: var(--t-font-titel);
	font-size: var(--t-fs-700);
	line-height: 1;
	color: var(--t-blau-600);
}
.t-logo__zusatz {
	display: block;
	font-size: var(--t-fs-300);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--t-text-mute);
	line-height: 1.4;
}

/* --- Burger ------------------------------------------------------------- */

.t-burger {
	display: inline-flex;
	align-items: center;
	gap: var(--t-space-2);
	min-height: 44px;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 1px solid var(--t-linie);
	border-radius: var(--t-radius);
	font: inherit;
	font-weight: 600;
	color: var(--t-blau-900);
	cursor: pointer;
}

.t-burger__striche,
.t-burger__striche::before,
.t-burger__striche::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.t-burger__striche { position: relative; }
.t-burger__striche::before,
.t-burger__striche::after {
	content: "";
	position: absolute;
	left: 0;
}
.t-burger__striche::before { top: -7px; }
.t-burger__striche::after  { top:  7px; }

/* Offener Zustand: Kreuz. Klasse sitzt auf <html>. */
.t-nav-offen .t-burger__striche { background: transparent; }
.t-nav-offen .t-burger__striche::before { transform: translateY(7px) rotate(45deg); }
.t-nav-offen .t-burger__striche::after  { transform: translateY(-7px) rotate(-45deg); }

/* --- Navigation --------------------------------------------------------- */

.t-nav__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.t-nav__liste a {
	display: block;
	padding: var(--t-space-2) 0;
	color: var(--t-blau-900);
	font-weight: 600;
	text-decoration: none;
}
.t-nav__liste a:hover,
.t-nav__liste .current-menu-item > a {
	color: var(--t-blau-600);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Mobil: Panel unter der Kopfleiste, per Burger geschaltet ---------------- */

@media (max-width: 61.999rem) {

	.t-nav {
		position: absolute;
		inset-inline: 0;
		top: 100%;
		display: none;
		padding: var(--t-space-4) 1rem var(--t-space-6);
		background: var(--t-weiss);
		border-bottom: 1px solid var(--t-linie);
		box-shadow: var(--t-schatten);
	}

	.t-nav-offen .t-nav { display: block; }
	.t-nav-offen body   { overflow: hidden; }

	.t-nav__liste a {
		padding: var(--t-space-3) 0;
		border-bottom: 1px solid var(--t-linie);
	}

	.t-nav__aktion { margin-top: var(--t-space-4); }
	.t-nav__aktion .t-btn { width: 100%; }
}

/* Desktop --------------------------------------------------------------- */

@media (min-width: 62rem) {

	.t-burger { display: none; }

	.t-nav {
		display: flex;
		align-items: center;
		gap: var(--t-space-6);
	}

	.t-nav__liste {
		display: flex;
		align-items: center;
		gap: var(--t-space-6);
	}
}


/* =========================================================================
 * 7. Fußleiste
 * ====================================================================== */

.t-fussleiste {
	margin-top: var(--t-space-8);
	color: var(--t-auf-dunkel);
	/* Weißer Fokusring: Korall auf Tiefsee trägt nur 2,3:1. */
	--t-fokus: var(--t-weiss);
}
.t-fussleiste :where(a:not(.t-btn)) {	color: #17589a;	text-decoration: none;}/* nur im Footer, falls .t-btn--hell anderswo so bleiben soll */.t-fussleiste .t-btn--hell {	background: var(--t-weiss);	color: #17589a;}.t-fussleiste .t-btn--hell:hover,.t-fussleiste .t-btn--hell:focus-visible {	background: var(--t-sand);	color: #17589a;}

/* Welle: SVG nutzt fill="currentColor", die Farbe kommt von hier. */
.t-welle {
	display: block;
	line-height: 0;
	color: var(--t-blau-900);
}
.t-welle svg {
	display: block;
	width: 100%;
	height: clamp(40px, 5vw, 80px);
}

.t-fussleiste__haupt {
	background: var(--t-blau-900);
	padding-block: var(--t-space-6) var(--t-space-8);
}

.t-fuss__gitter {
	display: grid;
	gap: var(--t-space-6);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.t-fuss__gitter { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
	.t-fuss__gitter { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
}

/* Das Logo ist blau auf transparent — auf Tiefsee unsichtbar.
   invert() macht daraus eine weiße Strichzeichnung. */
.t-fuss__marke .t-logo__bild {
	max-height: 3.25rem;
	filter: brightness(0) invert(1);
}
.t-fuss__marke .t-logo__wort,
.t-fuss__marke .t-logo__zusatz { color: var(--t-weiss); }

.t-fuss__marke p {
	margin-top: var(--t-space-4);
	max-width: 34ch;
	color: var(--t-auf-dunkel-mute);
}

.t-fuss__titel {
	font-size: var(--t-fs-600);
	color: var(--t-weiss);
	margin-bottom: var(--t-space-3);
}

.t-fuss__spalte ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.t-fuss__spalte li + li { margin-top: var(--t-space-2); }

.t-fuss__adresse {
	font-style: normal;
	color: var(--t-auf-dunkel-mute);
	line-height: 1.8;
}

.t-fuss__cta p { color: var(--t-auf-dunkel-mute); }

/* --- Untere Zeile ------------------------------------------------------- */

.t-fussleiste__unten {
	background: var(--t-blau-900);
	border-top: 1px solid rgb(255 255 255 / 0.14);
	padding-block: var(--t-space-4);
	font-size: var(--t-fs-300);
}

.t-fuss__zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--t-space-4);
}

.t-fuss__copy {
	margin: 0;
	color: var(--t-auf-dunkel-mute);
}

.t-fuss__recht {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--t-space-4);
	margin: 0;
	padding: 0;
}


/* =========================================================================
 * 8. Kachel-Komponente
 *
 * Zwei Einsatzorte, ein Markup:
 *   [tortuga_laender]            → Kontinente auf der Startseite
 *   taxonomy-tortuga_land.php    → Länder auf der Kontinentseite
 *
 * Der Titel steht UNTER dem Bild, nicht darauf. Text über einem beliebigen
 * Foto lässt sich nicht auf 4.5:1 bringen, nur überdecken.
 * ====================================================================== */

.t-laender {
	list-style: none;
	margin: var(--t-space-6) 0 var(--t-space-8);
	padding: 0;
	display: grid;
	gap: var(--t-space-6);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.t-land {
	display: flex;
	flex-direction: column;
	background: var(--t-sand);
	border-radius: var(--t-radius);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.t-land:has(a:hover),
.t-land:has(a:focus-visible) {
	transform: translateY(-2px);
	box-shadow: var(--t-schatten);
}

.t-land img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--t-linie);
}

.t-land__name {
	margin: 0;
	padding: var(--t-space-4);
}

/* Die ganze Kachel ist klickbar, der Link bleibt das Fokusziel. */
.t-land__name a {
	display: block;
	font-family: var(--t-font-titel);
	font-size: var(--t-fs-600);
	color: var(--t-blau-900);
	text-decoration: none;
}
.t-land__name a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.t-land { position: relative; }

.t-land:has(a:hover) .t-land__name a { color: var(--t-blau-600); }

.t-land__anzahl {
	display: block;
	margin-top: var(--t-space-1);
	font-family: var(--t-font-text);
	font-size: var(--t-fs-300);
	color: var(--t-text-mute);
}


/* =========================================================================
 * 9. Leerzustand
 *
 * tortuga_leer() sagt, was zu tun ist. Also sieht es aus wie ein Hinweis,
 * nicht wie ein Fehler.
 * ====================================================================== */

.t-leer {
	max-width: var(--t-breite-text);
	margin-block: var(--t-space-6);
	padding: var(--t-space-4) var(--t-space-6);
	background: var(--t-sand);
	border-left: 4px solid var(--t-tuerkis);
	border-radius: 0 var(--t-radius) var(--t-radius) 0;
	color: var(--t-text-mute);
}/* ============================================================   Galerie-Slider  ·  GETEILT: Schiff + Hotel   ------------------------------------------------------------   Diesen Block ans Ende von css/root.css hängen (geteilter Baustein, §9).   Basis OHNE JS  : eine horizontale, schnappende Bilderreihe                    (scrollen / wischen / mit Pfeiltasten, wenn die Spur                    den Fokus hat). Löst „lange Liste" bereits allein.   MIT JS (.is-enhanced): zusätzlich runde Pfeil-Knöpfe links/rechts.   Markup: section.t-galerie-wrap > div.t-galerie[data-galerie]           > ul.t-galerie__spur > li.t-galerie__folie > img   ============================================================ */.t-galerie-wrap {	margin-block: var(--t-space-8);}.t-galerie-wrap > h2 {	font-family: var(--t-font-titel);	font-size: var(--t-fs-700);	color: var(--t-blau-900);	margin-block-end: var(--t-space-4);}.t-galerie {	position: relative;}/* Die Spur ist der scrollbare Bereich. */.t-galerie__spur {	display: flex;	gap: var(--t-space-3);	margin: 0;	padding: 0;	list-style: none;	overflow-x: auto;	scroll-snap-type: x mandatory;	scroll-behavior: smooth;	scrollbar-width: thin;              /* schmale Leiste als JS-loser Rückfall */	-webkit-overflow-scrolling: touch;}.t-galerie__spur:focus-visible {	outline: 3px solid var(--t-fokus);	outline-offset: 3px;	border-radius: var(--t-radius);}.t-galerie__folie {	flex: 0 0 auto;	inline-size: min(80%, 22rem);      /* mobil: eine Folie + Vorschau der nächsten */	scroll-snap-align: start;}.t-galerie__folie img {	display: block;	inline-size: 100%;	block-size: auto;	aspect-ratio: 4 / 3;	object-fit: cover;	border-radius: var(--t-radius);	background: var(--t-sand);}@media (min-width: 48rem) {	.t-galerie__folie {		inline-size: min(46%, 28rem);  /* Desktop: gut zwei Folien nebeneinander */	}}/* --- Pfeil-Knöpfe: nur sichtbar, wenn JS sie einhängt ------- */.t-galerie__knopf {	display: none;}.t-galerie.is-enhanced .t-galerie__knopf {	display: inline-grid;	place-items: center;	position: absolute;	inset-block-start: 50%;	transform: translateY(-50%);	z-index: 2;	inline-size: 2.75rem;              /* 44px – WCAG 2.2 Zielgröße */	block-size: 2.75rem;	border: 0;	border-radius: 50%;	background: var(--t-weiss);	color: var(--t-blau-900);	box-shadow: var(--t-schatten);	cursor: pointer;}.t-galerie__knopf:hover {	background: var(--t-blau-600);	color: var(--t-weiss);}.t-galerie__knopf:focus-visible {	outline: 3px solid var(--t-fokus);	outline-offset: 2px;}.t-galerie__knopf[disabled] {	opacity: 0.35;	cursor: default;	pointer-events: none;}.t-galerie__knopf svg {	inline-size: 1.25rem;	block-size: 1.25rem;	fill: none;	stroke: currentColor;	stroke-width: 2.5;	stroke-linecap: round;	stroke-linejoin: round;}.t-galerie__knopf--zurueck { inset-inline-start: var(--t-space-2); }.t-galerie__knopf--vor     { inset-inline-end:   var(--t-space-2); }.t-galerie.is-enhanced .t-galerie__spur {	scroll-padding-inline: var(--t-space-2);}@media (prefers-reduced-motion: reduce) {	.t-galerie__spur { scroll-behavior: auto; }}