/*
Theme Name: Flugspur
Description: Schlankes Block-Theme für den Flugspur-Shop, nach Markenstyleguide v1.0 (Oktober 2026).
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: flugspur
License: GPL-2.0-or-later
*/

:root {
	--flug-radius-s: 8px;
	--flug-radius-l: 16px;
	--flug-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19 64 11.5 16'%3E%3Cpath d='M30 72L19.5 64.5V79.5Z'/%3E%3C/svg%3E");
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3 {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

:where(.wp-block-post-content, .entry-content) > p,
:where(.wp-block-post-content, .entry-content) > ul,
:where(.wp-block-post-content, .entry-content) > ol {
	max-width: 70ch;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--gruen);
	outline-offset: 3px;
	border-radius: 2px;
}

.has-gruen-background-color :focus-visible {
	outline-color: var(--wp--preset--color--papier);
}

/* Kennungsleiste und Labels: Plex Mono, Versalien, +8 % */
.flug-kennung {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau);
}

/* Startbahn-Balken: höchstens einmal pro Fläche */
.flug-balken::before {
	content: "";
	display: block;
	width: 64px;
	height: 8px;
	margin-bottom: 16px;
	background: var(--wp--preset--color--gelb);
}

/* Pfeilspitze aus dem Logo als Aufzählungszeichen und in Links */
ul.is-style-pfeil {
	list-style: none;
	padding-left: 0;
}

ul.is-style-pfeil li {
	position: relative;
	padding-left: 24px;
}

ul.is-style-pfeil li::before,
.flug-pfeil-link::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--flug-arrow) center / contain no-repeat;
	mask: var(--flug-arrow) center / contain no-repeat;
}

ul.is-style-pfeil li::before {
	position: absolute;
	left: 0;
	top: 0.45em;
}

.flug-pfeil-link::after {
	margin-left: 8px;
	vertical-align: -1px;
}

/* Kopfbereich */
.flug-header {
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.flug-header .wp-block-navigation {
	font-weight: 500;
}

.flug-header .wp-block-navigation a {
	text-decoration: none;
}

.flug-header .wp-block-navigation a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Fußbereich */
.flug-footer a {
	color: inherit;
}

/* Buttons: Kaufen-Buttons gelb mit grünem Text */
.single_add_to_cart_button,
.wp-block-woocommerce-add-to-cart-form .wp-element-button,
.wp-block-woocommerce-product-button .wp-element-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--gelb) !important;
	color: var(--wp--preset--color--gruen) !important;
}

.wp-element-button,
.wp-block-button__link,
.wc-block-components-button {
	cursor: pointer;
	transition: filter 0.15s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.wc-block-components-button:hover {
	filter: brightness(0.92);
}

/* Karten: weiß, 16 px Radius */
.wc-block-product,
.wp-block-woocommerce-product-template > li {
	background: var(--wp--preset--color--weiss);
	border-radius: var(--flug-radius-l);
	padding: 16px;
	overflow: hidden;
}

.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	border-radius: var(--flug-radius-s);
}

/* Formulare */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea textarea {
	border: 1px solid var(--wp--preset--color--grau);
	border-radius: var(--flug-radius-s);
	background: var(--wp--preset--color--weiss);
	color: var(--wp--preset--color--gruen);
	font-family: inherit;
	font-size: 17px;
}

/* Hinweise */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info {
	background: var(--wp--preset--color--gelb-hell);
	color: var(--wp--preset--color--gruen);
	border-color: var(--wp--preset--color--linie);
	border-radius: var(--flug-radius-s);
}

/* Preis und Kleingedrucktes */
.wc-block-components-product-price,
.wp-block-woocommerce-product-price {
	font-weight: 600;
}

.woocommerce-de_price_taxrate,
.wc-gzd-additional-info,
.legal-price-info {
	font-size: 14px;
	line-height: 1.5;
	color: var(--wp--preset--color--grau);
}

/* Produktseite: Label „SKU:" ausblenden, Bild auf dem Handy begrenzen,
   damit Preis und Kaufen-Button ohne langes Scrollen erreichbar sind */
.sku_wrapper__label,
.wp-block-woocommerce-product-sku strong,
.wp-block-woocommerce-product-sku .wp-block-post-terms__prefix {
	display: none;
}

@media (max-width: 781px) {
	.wp-block-woocommerce-product-image-gallery img {
		max-height: 60vh;
		width: auto;
		max-width: 100%;
		margin-inline: auto;
		object-fit: contain;
	}
}

@media (min-width: 782px) {
	.flug-hero {
		padding-block: 96px;
	}
}

/* Produktgalerie: Miniaturen der Stile in einer Reihe, auf dem Handy kompakt, damit Preis und Kaufen-Button früh erreichbar sind */
.woocommerce-product-gallery .flex-control-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
}
.woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 calc((100% - 40px) / 6);
	width: auto;
	float: none;
	margin: 0;
}
.woocommerce-product-gallery .flex-control-thumbs img {
	border-radius: 4px;
	cursor: pointer;
}
@media (max-width: 781px) {
	.woocommerce-product-gallery {
		max-width: 300px;
		margin-inline: auto;
	}
}

/* ===== Platzporträt ===== */
.fp-portrait { max-width: 1200px; margin-inline: auto; }
.fp-portrait a { text-underline-offset: 3px; }

/* Kopf: Text links, Karte oben rechts */
.fp-hero { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body"; margin-bottom: 8px; }
.fp-hero.has-map { grid-template-areas: "head" "map" "body"; }
.fp-hero__head { grid-area: head; min-width: 0; }
.fp-hero__body { grid-area: body; min-width: 0; }
.fp-lead { font-size: 22px; line-height: 1.36; color: var(--wp--preset--color--grau); margin: 8px 0 0; }
.fp-hero__text { max-width: 62ch; }
.fp-hero__text p { margin: 0 0 16px; }
.fp-about { max-width: 68ch; }
.fp-about p { margin: 0 0 16px; }
.fp-about p:last-child { margin-bottom: 0; }
.fp-hero__map { grid-area: map; margin: 0; padding: 8px; background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: 16px; max-width: 420px; }
.fp-hero__map a { display: block; }
.fp-hero__map img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 8px; }
.fp-hero__map figcaption { padding: 8px 4px 2px; font-size: 12px; line-height: 1.4; color: var(--wp--preset--color--grau); }
.fp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.fp-jump a { display: inline-block; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--weiss); color: var(--wp--preset--color--gruen); text-decoration: none; font-weight: 500; font-size: 14px; }
.fp-jump a:hover { border-color: var(--wp--preset--color--gruen); }

/* Abschnitte als abgesetzte Karten */
.fp-panel { margin-top: 24px; padding: 24px; background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: 16px; scroll-margin-top: 24px; }
.fp-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--wp--preset--color--linie); }
.fp-panel__head .flug-kennung { margin: 0 0 4px; }
.fp-panel__head h2 { margin: 0; font-size: var(--wp--preset--font-size--h-2); line-height: 1.25; }
.fp-panel__no { flex: none; padding: 4px 8px; border: 1px solid var(--wp--preset--color--linie); border-radius: 8px; font-family: var(--wp--preset--font-family--plex-mono); font-size: 13px; font-weight: 500; color: var(--wp--preset--color--grau); }
.fp-sub { margin: 32px 0 16px; font-size: 17px; line-height: 1.6; font-weight: 600; }
.fp-panel__head + .fp-sub, .fp-panel__head + .fp-tiles { margin-top: 0; }
.fp-note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--grau); max-width: 72ch; }

/* Kacheln */
.fp-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fp-tile { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 16px; background: var(--wp--preset--color--papier); border: 1px solid transparent; border-radius: 8px; color: var(--wp--preset--color--gruen); text-decoration: none; }
a.fp-tile--link { border-color: var(--wp--preset--color--linie); }
a.fp-tile--link:hover { border-color: var(--wp--preset--color--gruen); background: var(--wp--preset--color--weiss); }
.fp-tile__icon { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--wp--preset--color--gelb-hell); border-radius: 8px; }
.fp-ico { width: 22px; height: 22px; }
.fp-tile__body { display: flex; flex-direction: column; min-width: 0; }
.fp-tile__label { font-family: var(--wp--preset--font-family--plex-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--grau); line-height: 1.5; }
.fp-tile__value { font-size: 17px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fp-tile__value.fp-mono { font-family: var(--wp--preset--font-family--plex-mono); font-size: 16px; font-weight: 500; }
.fp-tile__note { font-size: 14px; color: var(--wp--preset--color--grau); line-height: 1.4; }

/* METAR und TAF */
.fp-metar { padding: 16px; background: var(--wp--preset--color--gruen); color: var(--wp--preset--color--papier); border-radius: 8px; }
.fp-metar .flug-kennung { margin: 0 0 8px; color: var(--wp--preset--color--linie); }
.fp-metar pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--wp--preset--font-family--plex-mono); font-size: 14px; line-height: 1.6; color: inherit; background: none; padding: 0; }
.fp-metar details { margin-top: 12px; }
.fp-metar summary { cursor: pointer; font-weight: 500; }
.fp-metar details pre { margin-top: 8px; }

/* Andenken: abgesetztes grünes Feld */
.fp-cta { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; margin-top: 48px; padding: 24px; background: var(--wp--preset--color--gruen); color: var(--wp--preset--color--papier); border-radius: 16px; }
.fp-cta .flug-kennung { margin: 0 0 8px; color: var(--wp--preset--color--linie); }
.fp-cta h2 { margin: 0 0 12px; color: var(--wp--preset--color--papier); }
.fp-cta p { margin: 0 0 16px; max-width: 56ch; }
.fp-cta__img img { display: block; width: 100%; max-width: 220px; height: auto; border-radius: 8px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.fp-cta__btn { display: inline-block; padding: 12px 24px; background: var(--wp--preset--color--gelb); color: var(--wp--preset--color--gruen) !important; border-radius: 8px; font-weight: 500; text-decoration: none !important; }
.fp-cta__btn:hover { filter: brightness(0.94); }

.fp-portrait__foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--wp--preset--color--linie); max-width: 760px; font-size: 14px; line-height: 1.5; color: var(--wp--preset--color--grau); }
.fp-portrait__foot h2 { font-size: 17px; line-height: 1.6; color: var(--wp--preset--color--gruen); }
.fp-portrait__foot a { color: inherit; }
.fp-list h2 { margin-top: 48px; }

@media (min-width: 782px) {
	.fp-panel { padding: 32px; }
	.fp-cta { grid-template-columns: 240px 1fr; gap: 40px; padding: 32px; }
}
@media (min-width: 900px) {
	.fp-hero.has-map { grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto 1fr; grid-template-areas: "head map" "body map"; column-gap: 48px; row-gap: 24px; }
	.fp-hero__map { max-width: none; align-self: start; }
}

/* Poster der Plätze in der Nähe (Produktseite) */
.fp-near { margin-top: 64px; }
.fp-near .wp-block-heading { margin: 4px 0 24px; }
.fp-prods { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); }
.fp-prod { display: flex; flex-direction: column; gap: 12px; padding: 12px; background: var(--wp--preset--color--papier); border: 1px solid var(--wp--preset--color--linie); border-radius: 8px; color: var(--wp--preset--color--gruen); text-decoration: none; }
.fp-prod:hover, .fp-prod:focus-visible { border-color: var(--wp--preset--color--gruen); background: var(--wp--preset--color--weiss); }
.fp-prod__img { display: block; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 4px; background: var(--wp--preset--color--linie); }
.fp-prod__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-prod__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-prod__label { font-family: var(--wp--preset--font-family--plex-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--grau); }
.fp-prod__name { font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fp-prod__price { font-size: 15px; color: var(--wp--preset--color--grau); }
@media (max-width: 900px) { .fp-prods { grid-template-columns: repeat(2, 1fr); } }

/* Produktseite: Abschnitte untereinander */
.fp-pdp { margin-top: 64px; }
.fp-pdp > .fp-jump { margin-top: 0; }
.fp-pdp .fp-panel .wp-block-list, .fp-pdp .fp-panel p { max-width: 68ch; }
.fp-more { margin-top: 24px; }
.fp-note { font-size: 14px; color: var(--wp--preset--color--grau); }
.fp-styles { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin: 24px 0 0; padding: 0; list-style: none; }
.fp-style { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 0; background: none; border: 0; font: inherit; text-align: left; color: var(--wp--preset--color--gruen); text-decoration: none; cursor: pointer; }
.fp-style__img { display: block; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 4px; border: 1px solid var(--wp--preset--color--linie); background: var(--wp--preset--color--papier); }
.fp-style__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fp-style:hover .fp-style__img, .fp-style:focus-visible .fp-style__img { border-color: var(--wp--preset--color--gruen); }
.fp-style__name { font-weight: 600; font-size: 17px; }
.fp-style__text { font-size: 14px; line-height: 1.4; color: var(--wp--preset--color--grau); }
.fp-table-wrap { overflow-x: auto; margin: 24px 0 8px; }
.fp-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.fp-table th, .fp-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--wp--preset--color--linie); text-align: left; vertical-align: top; }
.fp-table thead th { font-family: var(--wp--preset--font-family--plex-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--grau); white-space: nowrap; }
.fp-faq details { border-bottom: 1px solid var(--wp--preset--color--linie); padding: 16px 0; }
.fp-faq summary { cursor: pointer; font-weight: 600; font-size: 17px; }
.fp-faq details p { margin: 12px 0 0; }
@media (min-width: 700px) { .fp-styles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .fp-styles { grid-template-columns: repeat(6, 1fr); } .fp-pdp .fp-styles { grid-template-columns: repeat(6, 1fr); } }

/* Startseite */
.fp-prods--wide { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .fp-prods--wide { grid-template-columns: repeat(4, 1fr); } }
.fp-home-steps { display: grid; gap: 24px; grid-template-columns: 1fr; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: step; }
.fp-home-steps li { counter-increment: step; padding: 24px; background: var(--wp--preset--color--weiss); border: 1px solid var(--wp--preset--color--linie); border-radius: 16px; }
.fp-home-steps li::before { content: "0" counter(step); display: block; margin-bottom: 8px; font-family: var(--wp--preset--font-family--plex-mono); font-size: 13px; font-weight: 500; color: var(--wp--preset--color--grau); }
.fp-home-steps h3 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--h-3); }
.fp-home-steps p { margin: 0; }
@media (min-width: 800px) { .fp-home-steps { grid-template-columns: repeat(3, 1fr); } }
.fp-home-search { display: flex; gap: 8px; margin: 24px 0 0; max-width: 520px; }
.fp-home-search input[type="search"] { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--wp--preset--color--linie); border-radius: 8px; background: var(--wp--preset--color--weiss); font: inherit; }
.fp-home-search input[type="search"]:focus { outline: 2px solid var(--wp--preset--color--gelb); outline-offset: 1px; }
.fp-home-search button { padding: 12px 20px; border: 0; border-radius: 8px; background: var(--wp--preset--color--gruen); color: var(--wp--preset--color--papier); font: inherit; font-weight: 500; cursor: pointer; }
.fp-home-why { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 32px; }
.fp-home-why h3 { margin: 0 0 8px; font-size: var(--wp--preset--font-size--h-3); }
.fp-home-why p { margin: 0; }
@media (min-width: 800px) { .fp-home-why { grid-template-columns: repeat(3, 1fr); } }