/*
Theme Name: RaceBikeBlog
Theme URI: https://mediskape.de
Author: Harald
Description: Privater Rennrad-Blog. Großzügige Typografie, farbige Flächen, Fotos als echte Polaroids. Block-Theme für Desktop, Tablet und Smartphone.
Version: 1.0.3
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: racebikeblog
*/

/* ===== Grundlagen ===== */
:root {
	--rb-akzent: var(--wp--preset--color--beere);
	--rb-magenta: var(--wp--preset--color--magenta);
	--rb-schatten: 0 1px 2px rgba(0, 0, 0, 0.12), 0 16px 34px rgba(28, 35, 41, 0.18);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { max-width: 100%; height: auto; }
em { font-style: italic; }
.akzent, em.akzent { color: var(--rb-akzent); }
.magenta { color: var(--rb-magenta); }

/* Überschriften: kursive Akzentwörter in Farbe */
.wp-block-heading em, .wp-block-post-title em { color: var(--rb-akzent); }
.gross-titel { font-variation-settings: "opsz" 144; }

/* Meta-Zeilen (Rubrik, Datum) */
.meta, .wp-block-post-terms.meta, .wp-block-post-date.meta {
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--rb-akzent);
}
.meta a { color: inherit; text-decoration: none; }
.meta-grau { color: var(--wp--preset--color--stahl) !important; }

/* Zitat-Autor */
.is-style-autor {
	font-family: var(--wp--preset--font-family--instrument-sans);
	font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--wp--preset--color--stahl);
}
.is-style-autor::before { content: "— "; }

/* Handschrift-Notiz */
.is-style-notiz {
	font-family: var(--wp--preset--font-family--caveat);
	font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15;
	color: var(--wp--preset--color--seeblau); transform: rotate(-2deg);
}

/* Papierkarte */
.is-style-karte {
	background: rgba(247, 244, 238, 0.95);
	padding: clamp(1.75rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.25rem);
	box-shadow: 0 18px 40px rgba(15, 20, 40, 0.28);
}

/* ===== Kopfbereich ===== */
.rb-kopf { padding-top: clamp(1rem, 2.5vw, 2rem); padding-bottom: clamp(1rem, 2.5vw, 2rem); }
.rb-kopf .wp-block-site-title {
	font-family: var(--wp--preset--font-family--fraunces);
	font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1;
}
.rb-kopf .wp-block-site-title a { text-decoration: none; color: var(--wp--preset--color--tinte); }
.wp-block-site-title a::after, .rb-marke::after { content: "."; color: var(--rb-magenta); font-style: normal; }
.rb-nav .wp-block-navigation-item__content {
	font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
	text-decoration: none; padding: 0.75rem 0;
}
.rb-nav .current-menu-item > .wp-block-navigation-item__content,
.rb-nav .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--rb-akzent); box-shadow: inset 0 -2px 0 var(--rb-akzent);
}
/* Mobiles Menü (Overlay) */
.rb-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--papier) !important; padding: 2rem 1.5rem;
}
.rb-nav .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--fraunces); font-size: 2.5rem; font-weight: 300;
	letter-spacing: -0.01em; text-transform: none;
}
.rb-nav .wp-block-navigation__responsive-container-open svg,
.rb-nav .wp-block-navigation__responsive-container-close svg { width: 32px; height: 32px; }

/* ===== Polaroids =====
   Variante per Blockstil, Schräglage per Variable --kipp.
   Zusätzliche CSS-Klassen im Block: kippen-links, kippen-rechts, gerade */
[class*="is-style-polaroid"] {
	--kipp: -2deg; --rahmen: #F4F5F3; --schrift: var(--wp--preset--color--tinte);
	position: relative; display: block; width: fit-content; max-width: 100%;
	margin-left: auto; margin-right: auto;
	background-color: var(--rahmen);
	background-image: url(assets/img/papier.png);
	background-size: 256px;
	padding: clamp(10px, 1.5vw, 18px) clamp(10px, 1.5vw, 18px) clamp(10px, 1.5vw, 18px);
	box-shadow: var(--rb-schatten);
	transform: rotate(var(--kipp));
	transition: transform 0.25s ease;
}
[class*="is-style-polaroid"]:not(:has(figcaption)) { padding-bottom: clamp(44px, 6.5vw, 78px); }
[class*="is-style-polaroid"] img {
	display: block; width: 100%; height: auto;
	outline: 1px solid rgba(20, 18, 16, 0.35); outline-offset: -1px;
	filter: contrast(0.94) saturate(0.92) brightness(1.02);
}
[class*="is-style-polaroid"] a { display: block; }
[class*="is-style-polaroid"] figcaption, [class*="is-style-polaroid"] .wp-element-caption {
	margin: 0; padding: clamp(10px, 1.6vw, 18px) 6px 2px; min-height: clamp(32px, 5vw, 58px);
	font-family: var(--wp--preset--font-family--caveat); font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	line-height: 1.1; text-align: center; color: var(--schrift);
}
a:hover [class*="is-style-polaroid"], [class*="is-style-polaroid"]:hover { transform: rotate(calc(var(--kipp) * 0.4)) scale(1.01); }

.is-style-polaroid-creme { --rahmen: #ECE2CA; --kipp: 2.2deg; --schrift: #4A3F2A; }
.is-style-polaroid-creme img { filter: sepia(0.12) contrast(0.92) saturate(0.88); }
.is-style-polaroid-creme::before {
	content: ""; position: absolute; top: -14px; left: 50%; width: 34%; height: 30px; margin-left: -17%;
	background: rgba(255, 250, 235, 0.72); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transform: rotate(-4deg);
}
.is-style-polaroid-schwarz { --rahmen: #1C1C1C; --kipp: 2.8deg; --schrift: #F2F0EA; }
.is-style-polaroid-blau { --rahmen: #BFD7EA; --kipp: -3deg; }
.is-style-polaroid-rosa { --rahmen: #F2C3D3; --kipp: -2.2deg; }
.is-style-polaroid-pinn { --kipp: 1.6deg; }
.is-style-polaroid-pinn::before {
	content: ""; position: absolute; top: 6px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #FF9CC9 0 18%, var(--rb-magenta) 22%); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
}
.kippen-links { --kipp: -3deg !important; }
.kippen-rechts { --kipp: 3deg !important; }
.gerade { --kipp: 0deg !important; }

/* Abwechselnde Schräglage in Beitragslisten */
.rb-raster .wp-block-post:nth-child(3n+1) [class*="is-style-polaroid"] { --kipp: -2deg; }
.rb-raster .wp-block-post:nth-child(3n+2) [class*="is-style-polaroid"] { --kipp: 2.5deg; }
.rb-raster .wp-block-post:nth-child(3n+3) [class*="is-style-polaroid"] { --kipp: -1.5deg; }

/* Zwei Polaroids übereinander geworfen */
.rb-stapel { position: relative; aspect-ratio: 1 / 1.32; width: 100%; }
.rb-stapel > .wp-block-image { position: absolute; margin: 0; }
.rb-stapel > .wp-block-image:first-child { left: -4%; bottom: 0; width: 89%; --kipp: -4deg; z-index: 1; }
.rb-stapel > .wp-block-image:last-child { right: -8%; top: 0; width: 73%; --kipp: 6deg; z-index: 2; }
.rb-stapel > .wp-block-image img { width: 100%; }

/* ===== Startseite ===== */
.rb-hero { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(3rem, 8vw, 7.5rem); }
.rb-hero .rb-zitat-gross {
	font-family: var(--wp--preset--font-family--fraunces); font-weight: 300;
	font-size: clamp(3.25rem, 8vw, 8rem); line-height: 0.98; letter-spacing: -0.025em; margin: 0;
}
.rb-hero .rb-hero-text { padding-top: clamp(0px, 8vw, 120px); }

/* Trikot-Fläche */
.rb-trikot .wp-block-cover__image-background { object-position: 50% 0%; }

/* Schuh-Fläche mit Bodenverlauf */
.rb-schuhe .wp-block-cover__image-background { object-position: 100% 50%; }
.rb-schuhe .rb-zitat-gross, .rb-gedanke .rb-zitat-gross {
	font-family: var(--wp--preset--font-family--fraunces); font-weight: 300;
	font-size: clamp(3rem, 7.5vw, 8rem); line-height: 1; letter-spacing: -0.025em; margin: 0;
	color: var(--wp--preset--color--tinte);
}

/* Beitragskarten */
.rb-karten-titel { font-family: var(--wp--preset--font-family--fraunces); font-weight: 400; font-size: clamp(1.625rem, 2.6vw, 2.375rem) !important; line-height: 1.08; margin-top: 0.4rem; }
.rb-karten-titel a { text-decoration: none; }
.rb-raster .wp-block-post-featured-image { margin-bottom: 1.75rem; }
.rb-treppe .wp-block-post:nth-child(3n+2) { margin-top: clamp(0px, 5vw, 80px); }
.rb-treppe .wp-block-post:nth-child(3n+3) { margin-top: clamp(0px, 10vw, 160px); }

/* Themenliste */
.rb-themen a {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: clamp(1rem, 2vw, 1.75rem) 0; border-top: 1px solid var(--wp--preset--color--tinte);
	font-family: var(--wp--preset--font-family--fraunces); font-weight: 300;
	font-size: clamp(2.75rem, 7vw, 6.875rem); line-height: 1; text-decoration: none; color: var(--wp--preset--color--tinte);
}
.rb-themen p:last-child a { border-bottom: 1px solid var(--wp--preset--color--tinte); }
.rb-themen a::after { content: "→"; font-family: var(--wp--preset--font-family--instrument-sans); font-size: clamp(1.5rem, 2.5vw, 2rem); font-style: normal; }
.rb-themen a:hover { color: var(--rb-akzent); }
.rb-themen p { margin: 0; }
.rb-themen em a, .rb-themen a em { color: var(--rb-magenta); }

/* Rad-Steckbrief */
.rb-rad-name { font-family: var(--wp--preset--font-family--fraunces); font-weight: 300; font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.rb-rad-name small { display: block; font-size: 0.55em; font-style: italic; color: var(--rb-akzent); }

/* Filter-Knöpfe (Kategorien) */
.rb-filter .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--tinte); border: 1.5px solid var(--wp--preset--color--tinte);
	font-size: 0.875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.75rem 1.4rem;
}
.rb-filter .wp-block-button__link:hover { background: var(--wp--preset--color--tinte); color: var(--wp--preset--color--papier); }

/* Seitenzahlen */
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--fraunces); font-size: 2.25rem; gap: 1.5rem; }
.wp-block-query-pagination a { text-decoration: none; }
.wp-block-query-pagination .current { color: var(--rb-akzent); font-style: italic; }

/* ===== Beitragsseite ===== */
.rb-artikel-titel { font-size: clamp(2.75rem, 7.4vw, 7.375rem) !important; line-height: 1 !important; }
.rb-vorspann, .rb-vorspann p {
	font-family: var(--wp--preset--font-family--fraunces); font-weight: 300;
	font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.4;
}
.wp-block-post-content > * + * { margin-top: 1.3em; }
.wp-block-post-content h2 { font-size: clamp(2rem, 4vw, 2.875rem); margin-top: 2em; }
.wp-block-post-content h3 { margin-top: 1.6em; }
.wp-block-post-content a { text-decoration-thickness: 1px; text-underline-offset: 3px; color: var(--rb-akzent); }
.wp-block-post-content blockquote, .wp-block-quote {
	border-left: 3px solid var(--rb-akzent); padding-left: clamp(1rem, 2.5vw, 1.75rem); margin-left: 0;
}
.wp-block-quote p { font-style: italic; font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.15; }
.wp-block-quote cite { font-family: var(--wp--preset--font-family--instrument-sans); font-style: normal; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--stahl); }
.wp-block-post-content .wp-block-image[class*="is-style-polaroid"] { margin-top: 2.5em; margin-bottom: 2.5em; }
.rb-weiter a { font-family: var(--wp--preset--font-family--fraunces); font-weight: 300; font-size: clamp(2.25rem, 5.5vw, 5.5rem); line-height: 1; letter-spacing: -0.02em; text-decoration: none; }
.rb-weiter .post-navigation-link-next a::after { content: " →"; }
.has-drop-cap:not(:focus)::first-letter { color: var(--rb-akzent); font-weight: 300; font-size: 6.5em; margin: 0.08em 0.12em 0 0; }

/* Weiterlesen-Fläche ausblenden, wenn es keinen weiteren Beitrag gibt */
.rb-weiter:not(:has(a)) { display: none; }

/* Kommentare */
.rb-kommentare { border-top: 1px solid #D6D2CB; }
.rb-kommentare .wp-block-comment-template li { margin-bottom: 2rem; }
.rb-kommentare input, .rb-kommentare textarea { border: 1px solid #C9C4BC; border-radius: 6px; padding: 0.75rem; font: inherit; background: #fff; width: 100%; }
.rb-kommentare .wp-block-post-comments-form input[type="submit"] { width: auto; background: var(--wp--preset--color--tinte); color: var(--wp--preset--color--papier); border-radius: 999px; padding: 0.85rem 1.75rem; border: 0; cursor: pointer; }

/* Reportage-Steckbrief */
.rb-steckbrief { border-bottom: 1px solid #D6D2CB; }
.rb-steckbrief .meta { color: var(--wp--preset--color--stahl); margin-bottom: 0.25rem; }
.rb-steckbrief .rb-wert { font-family: var(--wp--preset--font-family--fraunces); font-size: clamp(1.25rem, 2vw, 1.625rem); margin-top: 0; }

/* ===== Rechtliche Seiten ===== */
.rb-rechtlich .wp-block-post-content { font-family: var(--wp--preset--font-family--instrument-sans); font-size: 1.0625rem; }
.rb-rechtlich .wp-block-post-content h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-top: 2.2em; }
.rb-rechtlich .wp-block-post-content h3 { font-size: 1.25rem; font-family: var(--wp--preset--font-family--instrument-sans); font-weight: 600; letter-spacing: 0; }
.rb-platzhalter { background: #FFF6D6; border-left: 4px solid #E0B400; padding: 1rem 1.25rem; font-size: 0.9375rem; }

/* ===== Fußbereich ===== */
.rb-fuss { background: var(--wp--preset--color--tinte); color: var(--wp--preset--color--papier); }
.rb-fuss a { color: var(--wp--preset--color--papier); text-decoration: none; }
.rb-fuss a:hover { color: #F27AA0; }
.rb-fuss .wp-block-site-title { font-family: var(--wp--preset--font-family--fraunces); font-style: italic; font-weight: 300; font-size: clamp(3.25rem, 8.5vw, 8.75rem); line-height: 0.9; letter-spacing: -0.03em; }
.rb-fuss .wp-block-navigation-item__content { padding: 0.75rem 0; }

/* ===== Tablet (iPad) ===== */
@media (max-width: 1024px) {
	.rb-hero .rb-hero-text { padding-top: 0; }
	.rb-stapel { max-width: 640px; margin: 0 auto; }
	.rb-treppe .wp-block-post:nth-child(3n+2), .rb-treppe .wp-block-post:nth-child(3n+3) { margin-top: 0; }
}

/* ===== Smartphone ===== */
@media (max-width: 781px) {
	/* Spalten stapeln sich automatisch; Schräglage halbieren, damit nichts aus dem Bild ragt */
	[class*="is-style-polaroid"] { transform: rotate(calc(var(--kipp) * 0.5)); }
	.rb-stapel { aspect-ratio: 1 / 1.18; }
	.rb-stapel > .wp-block-image:first-child { left: 0; width: 82%; }
	.rb-stapel > .wp-block-image:last-child { right: 0; width: 66%; }
	/* Schuh-Fläche: Verlauf von oben nach unten, Schuhe unten sichtbar */
	.rb-schuhe { align-items: flex-start !important; min-height: 820px !important; }
	.rb-schuhe .wp-block-cover__gradient-background {
		background: linear-gradient(to bottom, #ECEBE9 0%, #ECEBE9 46%, rgba(236,235,233,0.6) 60%, rgba(236,235,233,0) 76%) !important;
	}
	.rb-schuhe .wp-block-cover__image-background { object-position: 82% 100%; }
	.rb-rad-name { white-space: normal; }
	.rb-themen a { font-size: 2.75rem; }
	.wp-block-query-pagination { font-size: 1.75rem; }
	.is-style-karte { box-shadow: 0 10px 24px rgba(15, 20, 40, 0.25); }
}

/* Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
	[class*="is-style-polaroid"] { transition: none; }
}