/*
Theme Name: Anna redet
Theme URI: https://anna-redet.de
Description: Child-Theme von GeneratePress für den Relaunch von anna-redet.de. Design-Tokens, Typografie und Patterns gemäß Brand Bible V2 (kein Kitsch, viel YEAH).
Author: JA KLAR
Template: generatepress
Version: 0.10.2
Requires PHP: 8.1
Text Domain: anna-redet
*/

/*
 * Markenregeln (Brand Bible V2 / Relaunch-Plan 2.1):
 * - Rubik Black 900: Headlines, sentence case, IMMER linksbündig, nie ALL CAPS
 *   (Ausnahme: YEAH). Letter-spacing -2,5 %, Line-height 0.95-1.0.
 * - Sacramento: gesprochene Stimme, max. 3-4 Wörter, Rotation -2° bis -4°.
 * - Lora Italic: editoriale Stimme, gerade (max. -1°), ganze Sätze erlaubt.
 * - Hot Pink: EIN Akzent pro Sektion, nur Display-Größen (Kontrast auf Cream 3,3:1).
 * - Auf Pastel-Pink-Flächen wechselt der Akzent zu Ink - nie doppeln.
 * - Mindestens 30 % Weißraum pro Sektion.
 */

/* ==========================================================================
   Basis
   ========================================================================== */

html, body {
	/* .ar-bleed nutzt 100vw - ohne clip erzeugt die Scrollbar-Breite
	   horizontales Scrollen auf schmalen Viewports. */
	overflow-x: clip;
}

body {
	background-color: var(--ar-cream);
	color: var(--ar-ink);
	font-family: var(--ar-font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ar-font-display);
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 0.97;
	text-align: left;
	color: var(--ar-ink);
	/* Lange deutsche Komposita („Außergewöhnliche") sauber trennen statt hart umbrechen. */
	hyphens: auto;
	-webkit-hyphens: auto;
}

a {
	color: var(--ar-ink);
}

/* ==========================================================================
   Stimmen (Zwei-Script-System)
   ========================================================================== */

.ar-script {
	font-family: var(--ar-font-script);
	font-weight: 400;
	line-height: 1;
	color: var(--ar-hot-pink);
	transform: rotate(-3deg);
	display: inline-block;
}

.ar-bg-pastel .ar-script { color: var(--ar-ink); }

.ar-editorial {
	font-family: var(--ar-font-editorial);
	font-style: italic;
	font-weight: 400;
	color: var(--ar-ink);
}

/* Kleine Uppercase-Labels („TRAUREDNER SAGEN" / Kicker über Headlines) -
   einzige erlaubte Uppercase-Anwendung neben YEAH. */
.ar-label {
	font-family: var(--ar-font-body);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ar-gray);
	display: block;
}

.ar-label--pink { color: var(--ar-hot-pink); }
.ar-bg-pastel .ar-label--pink { color: var(--ar-ink); }

/* Strikethrough-Muster: Klischee durchgestrichen, 3pt Pink (Ink auf Pastel). */
.ar-strike {
	color: var(--ar-gray-light);
	text-decoration: line-through;
	text-decoration-color: var(--ar-hot-pink);
	text-decoration-thickness: 3px;
}

.ar-bg-pastel .ar-strike { text-decoration-color: var(--ar-ink); }

/* Wavy-Divider + Herz-Icon erben Farbe über currentColor. */
.ar-wave { color: var(--ar-hot-pink); display: block; }
.ar-bg-pastel .ar-wave { color: var(--ar-ink); }

/* ==========================================================================
   Layout
   ========================================================================== */

.ar-section {
	padding-block: var(--ar-space-section);
}

/* Volle Browserbreite auch innerhalb des GP-Containers (für Farbbänder). */
.ar-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.ar-wrap {
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.ar-wrap--narrow { max-width: 760px; }

.ar-grid {
	display: grid;
	gap: var(--ar-space-block);
}

@media (min-width: 782px) {
	.ar-grid--2 { grid-template-columns: 1fr 1fr; }
	.ar-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.ar-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Headline-Größen (fluid) */
.ar-display-xl { font-size: clamp(2.6rem, 7vw, 5rem); }
.ar-display-l  { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.ar-display-m  { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.ar-btn {
	display: inline-block;
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	line-height: 1;
	padding: 1.1rem 1.9rem;
	border: 2px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Primär: Hot Pink + Ink (5,1:1 - AA-konform). Hover invertiert zu Ink/Cream. */
.ar-btn--primary {
	background: var(--ar-hot-pink);
	color: var(--ar-ink);
}

.ar-btn--primary:hover,
.ar-btn--primary:focus {
	background: var(--ar-ink);
	color: var(--ar-cream);
}

/* Sekundär: Outline Ink. */
.ar-btn--ghost {
	background: transparent;
	color: var(--ar-ink);
	border-color: var(--ar-ink);
}

.ar-btn--ghost:hover,
.ar-btn--ghost:focus {
	background: var(--ar-ink);
	color: var(--ar-cream);
}

/* Auf Pastel-Flächen: Akzent wird Ink (kein Pink doppeln). */
.ar-bg-pastel .ar-btn--primary {
	background: var(--ar-ink);
	color: var(--ar-cream);
}

.ar-bg-pastel .ar-btn--primary:hover,
.ar-bg-pastel .ar-btn--primary:focus {
	background: var(--ar-cream);
	color: var(--ar-ink);
}

/* ==========================================================================
   Marquee / Laufband (CSS-only, < 2 KB, Anna-Favorit)
   ========================================================================== */

.ar-marquee {
	display: flex;
	overflow: hidden;
	gap: 3rem;
	padding-block: 1.1rem;
	border-block: 2px solid var(--ar-ink);
	background: var(--ar-cream);
}

.ar-marquee__track {
	flex: none;
	display: flex;
	align-items: center;
	gap: 3rem;
	min-width: 100%;
	justify-content: space-around;
	animation: ar-marquee-scroll 28s linear infinite;
}

.ar-marquee:hover .ar-marquee__track { animation-play-state: paused; }

.ar-marquee__item {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: clamp(1.1rem, 2.2vw, 1.5rem);
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--ar-ink);
}

.ar-marquee__heart {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	color: var(--ar-hot-pink);
}

@keyframes ar-marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - 3rem)); }
}

@media (prefers-reduced-motion: reduce) {
	.ar-marquee__track { animation: none; }
	.ar-marquee__track[aria-hidden="true"] { display: none; }
	.ar-marquee { justify-content: center; }
}

/* ==========================================================================
   Karten (Leistungen, Testimonials)
   ========================================================================== */

.ar-card {
	background: #fff;
	border: 2px solid var(--ar-ink);
	border-radius: 4px;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.ar-card h3 { margin: 0; }

.ar-card__price {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 1.15rem;
}

.ar-card__link {
	margin-top: auto;
	font-weight: 900;
	font-family: var(--ar-font-display);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* Testimonial-Karte: Zitat + Sacramento-Signatur (das Paar „spricht"). */
.ar-testimonial p { margin: 0; }

.ar-testimonial__meta {
	font-size: 1.6rem;
	margin-top: 0.35rem;
}

.ar-testimonial__location {
	font-size: 0.85rem;
	color: var(--ar-gray);
}

/* Ankerziele: die alten Story-URLs (/julia-benni/ usw.) leiten per 301 auf
   /lobhudelei/#slug. scroll-margin haelt die Karte unter dem Header frei,
   :target hebt sie kurz hervor, damit der Besucher sein Zitat sofort sieht.
   Dasselbe fuer die alten /faq-items/-URLs auf /faq/#frage-slug. */
.ar-testimonial[id],
.ar-faq details[id] { scroll-margin-top: 6rem; }

.ar-faq details:target > summary {
	color: var(--ar-hot-pink);
}

.ar-testimonial:target {
	border-color: var(--ar-hot-pink);
	box-shadow: 0 0 0 4px var(--ar-pastel-pink);
}

/* ==========================================================================
   Ablauf (4 Schritte, Sacramento-Nummern)
   ========================================================================== */

.ar-step__no {
	font-family: var(--ar-font-script);
	font-size: 1.9rem;
	line-height: 1;
	color: var(--ar-hot-pink);
	transform: rotate(-3deg);
	display: inline-block;
}

.ar-step h3 { margin: 0.4rem 0 0.5rem; }

.ar-step p { margin: 0; color: var(--ar-ink); }

/* ==========================================================================
   FAQ-Akkordeon (native details/summary - kein JS)
   ========================================================================== */

.ar-faq details {
	border-bottom: 2px solid var(--ar-ink);
	padding-block: 1.1rem;
}

.ar-faq details:first-of-type { border-top: 2px solid var(--ar-ink); }

.ar-faq summary {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 1.15rem;
	letter-spacing: -0.02em;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.ar-faq summary::-webkit-details-marker { display: none; }

.ar-faq summary::after {
	content: "+";
	font-family: var(--ar-font-display);
	font-weight: 900;
	color: var(--ar-hot-pink);
	flex: none;
}

.ar-faq details[open] summary::after { content: "-"; }

.ar-faq details > div { padding-top: 0.75rem; max-width: 65ch; }

/* ==========================================================================
   Platzhalter für [INPUT]-Material (darf NIE live gehen)
   ========================================================================== */

.ar-placeholder {
	border: 2px dashed var(--ar-gray-light);
	border-radius: 4px;
	background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 24px);
	display: grid;
	place-items: center;
	text-align: center;
	padding: 2rem;
	min-height: 320px;
	color: var(--ar-gray);
	font-size: 0.9rem;
}

/* ==========================================================================
   Fotos
   ========================================================================== */

.ar-photo {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block;
}

.ar-photo--hero {
	aspect-ratio: 16 / 8.5;
	object-fit: cover;
}

.ar-photo--portrait {
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Detail-Bilder (Statt Ringen …) einheitlich hoch, egal welches Original-Format. */
.ar-photo--detail {
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

/* ==========================================================================
   Header / Navigation (GeneratePress-Overrides)
   ========================================================================== */

.site-header {
	background-color: var(--ar-cream);
	border-bottom: 2px solid var(--ar-ink);
}

/* Bild-Logo ist gesetzt - Text-Titel daneben ausblenden. */
.site-header .main-title,
.site-header .site-description {
	display: none;
}

.site-header .header-image {
	max-height: 44px;
	width: auto;
}

.main-navigation,
.main-navigation ul ul {
	background-color: var(--ar-cream);
}

.main-navigation .main-nav ul li a {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 0.95rem;
	letter-spacing: -0.01em;
	color: var(--ar-ink);
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
	color: var(--ar-hot-pink);
}

/* „Anfragen"-Menüpunkt als Pink-Pill (Menü-Item-Klasse ar-nav-cta). */
.main-navigation .main-nav ul li.ar-nav-cta > a {
	background: var(--ar-hot-pink);
	color: var(--ar-ink);
	border-radius: 999px;
	padding-left: 1.4rem;
	padding-right: 1.4rem;
	margin-left: 0.5rem;
}

.main-navigation .main-nav ul li.ar-nav-cta:hover > a {
	background: var(--ar-ink);
	color: var(--ar-cream);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ar-footer {
	background: var(--ar-cream);
	border-top: 2px solid var(--ar-ink);
	padding-block: var(--ar-space-section);
}

.ar-footer__grid {
	display: grid;
	gap: var(--ar-space-block);
}

@media (min-width: 782px) {
	.ar-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; }
}

.ar-footer__brand {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 1.6rem;
	letter-spacing: -0.025em;
	margin: 0 0 0.5rem;
}

.ar-footer__list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.ar-footer__list li { margin-bottom: 0.5rem; }

.ar-footer__list a {
	text-decoration: none;
}

.ar-footer__list a:hover {
	color: var(--ar-hot-pink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

.site-info {
	background: var(--ar-cream);
	color: var(--ar-gray);
	font-size: 0.85rem;
}

/* ==========================================================================
   Themen-Chips („Der rote Faden")
   ========================================================================== */

.ar-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0;
	margin: 0;
	list-style: none;
}

.ar-chips li {
	border: 2px solid var(--ar-ink);
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.95rem;
	background: #fff;
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */

.ar-form {
	max-width: 560px;
}

.ar-form label {
	display: block;
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 1rem;
	margin-bottom: 0.4rem;
}

.ar-form input[type="text"],
.ar-form input[type="email"],
.ar-form input[type="date"],
.ar-form textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 2px solid var(--ar-ink);
	border-radius: 4px;
	background: #fff;
	font-family: var(--ar-font-body);
	font-size: 1rem;
	color: var(--ar-ink);
}

.ar-form input:focus,
.ar-form textarea:focus {
	outline: 3px solid var(--ar-hot-pink);
	outline-offset: 1px;
}

.ar-form__optional {
	font-weight: 400;
	font-family: var(--ar-font-body);
	color: var(--ar-gray);
	font-size: 0.85rem;
}

.ar-form__hint,
.ar-form__hint label {
	font-family: var(--ar-font-body);
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--ar-gray);
	display: block;
	margin-top: 0.4rem;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein Feld wie jedes andere. */
.ar-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ar-form-erfolg {
	background: var(--ar-pastel-pink);
	border-radius: 4px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	max-width: 560px;
}

.ar-form-fehler {
	border: 2px solid var(--ar-hot-pink);
	border-radius: 4px;
	padding: 1rem 1.25rem;
	max-width: 560px;
}

/* ==========================================================================
   Ad-Landingpages (template-lp.php) + Aktualitäts-Zeile
   ========================================================================== */

.ar-lp__header {
	background: var(--ar-cream);
	border-bottom: 2px solid var(--ar-ink);
	padding-block: 1rem;
}

.ar-lp__footer {
	border-top: 2px solid var(--ar-ink);
	padding-block: 1.5rem;
}

.ar-updated {
	font-size: 0.8rem;
	color: var(--ar-gray-light);
	max-width: 1100px;
	margin: 2rem auto 0;
	padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ==========================================================================
   Blog (GeneratePress-Archiv + Einzelartikel)
   ========================================================================== */

/* Byline zeigt „von Anna" (Autor-Anzeigename = Anna). Datum bleibt fürs Aktualitäts-Signal. */

/* Fließtext-Breite und Rhythmus im Blog-Einzelartikel. */
.single-post .entry-content > p,
.single-post .entry-content > h2,
.single-post .entry-content > ul,
.single-post .entry-content > ol { max-width: 70ch; }

.single-post .entry-content h2 { margin-top: 2rem; }

/* „Verwandte Artikel" unter Blogposts. */
.ar-related {
	display: block;
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 2px solid var(--ar-ink);
	max-width: none;
}

.ar-related .ar-card { border-width: 2px; }

/* Foto-Platzhalter im Blog - klar erkennbar, damit nichts versehentlich so live geht. */
.ar-photo-todo {
	border: 2px dashed var(--ar-gray-light);
	border-radius: 4px;
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	color: var(--ar-gray);
	font-size: 0.9rem;
	background: repeating-linear-gradient(-45deg, transparent 0 12px, rgba(0,0,0,0.02) 12px 24px);
}

/* ==========================================================================
   Tabellen (Reisekosten-Stufen etc.)
   ========================================================================== */

.ar-table {
	width: 100%;
	border-collapse: collapse;
	margin-block: 1rem;
}

.ar-table th {
	font-family: var(--ar-font-display);
	font-weight: 900;
	text-align: left;
	border-bottom: 2px solid var(--ar-ink);
	padding: 0.6rem 0.75rem 0.6rem 0;
}

.ar-table td {
	border-bottom: 1px solid var(--ar-gray-light);
	padding: 0.6rem 0.75rem 0.6rem 0;
}

.ar-table tr:last-child td {
	border-bottom: 2px solid var(--ar-ink);
}

/* ==========================================================================
   Sonstiges
   ========================================================================== */

.ar-bg-cream { background-color: var(--ar-cream); }
.ar-bg-pastel { background-color: var(--ar-pastel-pink); }

.ar-hint {
	font-size: 0.9rem;
	color: var(--ar-gray);
	max-width: 55ch;
}

/* ==========================================================================
   Echte Trauungen: Story-Hero + Foto-Galerie (Masonry)
   ========================================================================== */

.ar-hero-photo {
	width: 100%;
	height: auto;
	border-radius: 14px;
	margin: 0 0 1.75rem;
	display: block;
}

.ar-gallery { columns: 3 260px; column-gap: 1rem; }

.ar-gallery img {
	width: 100%;
	height: auto;
	margin: 0 0 1rem;
	border-radius: 12px;
	display: block;
	break-inside: avoid;
}

@media (max-width: 640px) { .ar-gallery { columns: 2 150px; } }

/* Entwurfs-Hinweis für Lorem-Ipsum-Platzhaltertexte (Story folgt von Anna). */
.ar-draft-note {
	display: inline-block;
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ar-hot-pink);
	border: 2px solid var(--ar-hot-pink);
	border-radius: 999px;
	padding: 0.2rem 0.7rem;
	margin: 0 0 1.25rem;
}

/* ==========================================================================
   Wedding BFF - Level-Leiter (bewusst anders als die Review-Cards)
   ========================================================================== */

.ar-levels { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1rem; }

.ar-level {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	background: #fff;
	border: 2px solid var(--ar-ink);
	border-radius: 14px;
	padding: 1.1rem 1.25rem;
}

.ar-level--full { background: var(--ar-pastel-pink); }

.ar-level__num {
	font-family: var(--ar-font-script);
	color: var(--ar-hot-pink);
	font-size: 3rem;
	line-height: 0.85;
	flex: 0 0 auto;
	min-width: 1.5rem;
	text-align: center;
}

.ar-level__title {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 1.15rem;
	margin: 0.15rem 0 0.4rem;
}

.ar-level__body p { margin: 0 0 0.6rem; }

.ar-level__price {
	display: inline-block;
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 0.88rem;
	background: var(--ar-ink);
	color: var(--ar-cream);
	border-radius: 999px;
	padding: 0.28rem 0.85rem;
}

.ar-level--full .ar-level__price { background: var(--ar-hot-pink); }

/* Hervorgehobene Hauptkarte (Startseite: Freie Trauung vor den Ergaenzungen) */
.ar-card--feature {
	border-width: 3px;
	background: var(--ar-pastel-pink);
	padding: 1.6rem 1.75rem;
}

.ar-card--feature .ar-card__link { margin-top: 1rem; }

/* ==========================================================================
   Blog-Index - editoriales Karten-Grid
   ========================================================================== */

.ar-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }

.ar-blog-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	border: 2px solid var(--ar-ink);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ar-blog-card__link:hover,
.ar-blog-card__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 6px 6px 0 var(--ar-hot-pink);
}

.ar-blog-card__media { display: block; height: 190px; background-size: cover; background-position: center; }

.ar-blog-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem 1.35rem; flex: 1 1 auto; }

.ar-blog-card__title { font-family: var(--ar-font-display); font-weight: 900; font-size: 1.25rem; line-height: 1.13; color: var(--ar-ink); }

.ar-blog-card__excerpt { color: var(--ar-gray); font-size: 0.95rem; line-height: 1.5; flex: 1 1 auto; }

.ar-blog-card__more { font-family: var(--ar-font-display); font-weight: 900; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ar-hot-pink); }

/* Text-Kacheln (kein Bild): größerer Titel, jede zweite pastellpink für Abwechslung */
.ar-blog-card.is-text .ar-blog-card__title { font-size: 1.4rem; }
.ar-blog-card.is-text:nth-child(even) .ar-blog-card__link { background: var(--ar-pastel-pink); }
.ar-blog-card.is-text:nth-child(even) .ar-blog-card__excerpt { color: var(--ar-ink); opacity: 0.72; }

.ar-pagination { margin-top: 2rem; }
.ar-pagination a,
.ar-pagination .current {
	font-family: var(--ar-font-display);
	font-weight: 900;
	padding: 0.4rem 0.85rem;
	border: 2px solid var(--ar-ink);
	border-radius: 999px;
	text-decoration: none;
	margin: 0 0.2rem;
	display: inline-block;
}
.ar-pagination .current { background: var(--ar-ink); color: var(--ar-cream); }

/* ==========================================================================
   Foto-Trio (Über Anna) - drei kleine Bilder, einheitlich beschnitten
   ========================================================================== */

.ar-photo-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin: 2rem 0 0;
}

.ar-photo-trio img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 12px;
	display: block;
}

@media (max-width: 600px) { .ar-photo-trio { gap: 0.6rem; } }

/* Stecknadel auf den Wedding-BFF-Stimmen - hebt sie von den Level-Karten ab. */
.ar-testimonial--pin { position: relative; }

.ar-testimonial--pin::before {
	content: '';
	position: absolute;
	top: -14px;
	left: -12px;
	width: 34px;
	height: 34px;
	transform: rotate(-18deg);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5h6l-1.1 5.2 4.1 3.1v2.2H6v-2.2l4.1-3.1L9 2.5z' fill='%23FF2D7A'/%3E%3Cpath d='M12 13v8.5' stroke='%23FF2D7A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Blog-Kategorie-Filter-Chips */
.ar-blog-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ar-blog-filter a {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: 0.85rem;
	padding: 0.35rem 0.9rem;
	border: 2px solid var(--ar-ink);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ar-ink);
	background: transparent;
	transition: background 0.12s ease, color 0.12s ease;
}
.ar-blog-filter a:hover,
.ar-blog-filter a:focus-visible { background: var(--ar-pastel-pink); }
.ar-blog-filter a.is-active { background: var(--ar-ink); color: var(--ar-cream); }

/* GP-Feinschliff: Inhalte auf Cream statt Weiß, Container transparent. */
.site-content, .site-main, .inside-article, .separate-containers .inside-article {
	background-color: transparent;
}

/* ==========================================================================
   Video

   Das Hymnen-Video ist ein Handyvideo im Hochformat (9:16). Ueber die volle
   Spaltenbreite waere es hoeher als der Bildschirm, deshalb begrenzte Breite
   und zentriert. preload="none" im Markup: das Video kostet nichts, solange
   niemand darauf klickt - nur das Posterbild wird geladen.
   ========================================================================== */

.ar-video-figure {
	margin: 0 0 1.5rem;
	max-width: 380px;
}

.ar-video-figure--zentriert {
	margin-inline: auto;
}

.ar-video {
	width: 100%;
	aspect-ratio: 9 / 16;
	border-radius: 12px;
	display: block;
	background: var(--ar-ink);
}

.ar-video-figure figcaption {
	font-family: var(--ar-font-editorial, inherit);
	font-size: 0.95rem;
	margin-top: 0.6rem;
	color: var(--ar-ink-soft, inherit);
}

/* ---------------------------------------------------------------------------
   EGG-01: Osterei im Footer der Startseite plus Overlay.
   Geraeteunterscheidung ueber any-pointer, damit ein schmales Fenster am
   Schreibtisch nicht als Handy gilt und ein grosses Tablet nicht als Rechner.
   Ein Notebook mit Touch erfuellt beides und sieht beide Hinweise - stimmt,
   weil dort auch beide Wege funktionieren.
   ------------------------------------------------------------------------ */

.ar-egg {
	margin: var(--ar-space-block) 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ar-gray-light);
	font-size: 0.9rem;
	color: var(--ar-gray);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	text-align: center;
}

/* Die Tastenfolge sichtbar, aber leise. Kein Link mehr im Footer:
   der Fund ist nur ueber die Tastenfolge oder fuenf Klicks erreichbar. */
.ar-egg__folge {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

.ar-egg__herz {
	display: inline-flex;
	width: 1.15rem;
	cursor: pointer;
	flex: 0 0 auto;
	-webkit-tap-highlight-color: transparent;
}

.ar-egg__herz svg { width: 100%; height: auto; fill: var(--ar-hot-pink); display: block; }

.ar-egg__herz--puls { animation: ar-egg-puls 0.4s ease; }

@keyframes ar-egg-puls {
	50% { transform: scale(1.45); }
}

.ar-egg__hinweis { display: none; }

@media (any-pointer: fine) {
	.ar-egg__hinweis--tasten { display: inline; opacity: 0.6; }
}

@media (any-pointer: coarse) {
	.ar-egg__hinweis--tippen { display: inline; opacity: 0.7; }
	/* Tippziel auf ~42 px vergroessern, ohne das Layout zu verschieben */
	.ar-egg__herz { padding: 0.7rem; margin: -0.7rem; }
}

/* Galerie der versteckten Seite: Bildunterschrift wandert mit dem Bild */
.ar-gallery--egg .ar-egg-figur { margin: 0 0 1.25rem; break-inside: avoid; }
.ar-gallery--egg .ar-egg-figur img { margin: 0 0 0.4rem; }

.ar-gallery--egg figcaption {
	font-size: 0.9rem;
	color: var(--ar-gray);
	line-height: 1.45;
}

/* --- Overlay --- */

html.ar-osterei-offen { overflow: hidden; }

.ar-osterei {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(26, 26, 26, 0.72);
	overflow: hidden;
	animation: ar-osterei-auf 0.25s ease both;
}

.ar-osterei__karte {
	position: relative;
	z-index: 2;
	max-width: 28rem;
	width: 100%;
	background: var(--ar-cream);
	border: 2px solid var(--ar-ink);
	border-radius: 16px;
	padding: 2rem 1.75rem 1.5rem;
	text-align: center;
	animation: ar-osterei-karte 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

.ar-osterei__titel {
	font-family: var(--ar-font-display);
	font-weight: 900;
	font-size: clamp(2.2rem, 8vw, 3rem);
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 0.5rem;
	color: var(--ar-ink);
}

.ar-osterei__text {
	font-family: var(--ar-font-editorial);
	font-style: italic;
	font-size: 1.05rem;
	margin: 0 0 1.5rem;
}

.ar-osterei__aktion { margin: 0 0 0.75rem; }

.ar-osterei__zu {
	background: none;
	border: 0;
	padding: 0.35rem 0.5rem;
	font: inherit;
	font-size: 0.9rem;
	color: var(--ar-gray);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ar-osterei__zu:hover { color: var(--ar-ink); }

.ar-osterei__regen {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.ar-osterei__herz {
	position: absolute;
	top: -8vh;
	width: var(--ar-egg-groesse, 20px);
	animation-name: ar-osterei-fall;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.ar-osterei__herz svg { width: 100%; height: auto; fill: var(--ar-hot-pink); display: block; }

@keyframes ar-osterei-fall {
	from { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
	10%  { opacity: 0.9; }
	to   { transform: translate3d(var(--ar-egg-drift, 0), 118vh, 0) rotate(220deg); opacity: 0.9; }
}

@keyframes ar-osterei-auf { from { opacity: 0; } to { opacity: 1; } }

@keyframes ar-osterei-karte {
	from { opacity: 0; transform: translateY(18px) scale(0.96); }
	to   { opacity: 1; transform: none; }
}

/* Wer weniger Bewegung will, bekommt Text und Link ohne alles. */
@media (prefers-reduced-motion: reduce) {
	.ar-osterei,
	.ar-osterei__karte,
	.ar-egg__herz--puls { animation: none; }
	.ar-osterei__regen { display: none; }
}

.ar-osterei--ruhig .ar-osterei__regen { display: none; }

/* ==========================================================================
   Vertikaler Rhythmus der Ueberschriften
   --------------------------------------------------------------------------
   Eine Ueberschrift gehoert zum Text DARUNTER, also braucht sie oben mehr
   Luft als unten. Die gebauten Seiten hatten `margin: 0 0 0.75rem` inline,
   damit klebten sie am Absatz davor. Die Werte hier entsprechen dem, was
   GeneratePress in den Ratgeberbeitraegen ohnehin schon macht (32/20 px).

   Der Selektor greift bewusst nur im Hauptfluss (`.ar-wrap > *`):
   Ueberschriften in Karten, Rastern und Zitatbloecken bleiben kompakt.
   ========================================================================== */

.ar-wrap > h2,
.ar-wrap > h3 {
	margin-block: 2.25rem 0.9rem;
}

/* Erste Ueberschrift einer Sektion: der Sektionsabstand reicht schon. */
.ar-wrap > h2:first-child,
.ar-wrap > h3:first-child {
	margin-top: 0;
}

/* Label und Ueberschrift sind ein Paar und bleiben zusammen. */
.ar-wrap > .ar-label + h1,
.ar-wrap > .ar-label + h2,
.ar-wrap > .ar-label + h3,
.ar-wrap > .ar-script + h1,
.ar-wrap > .ar-script + h2 {
	margin-top: 0.35rem;
}

/* h3 sitzt eine Stufe tiefer als h2. */
.ar-wrap > h3 {
	margin-block: 1.75rem 0.6rem;
}

/* Der Abstand UNTER einer Ueberschrift richtet sich nach ihrer Groesse:
   unter einer 52-px-Zeile braucht es mehr Luft als unter einer 24-px-Zeile.
   Sonst wirkt dieselbe Zahl an der einen Stelle eng und an der anderen weit. */
.ar-wrap > h1,
.ar-wrap > .ar-display-xl {
	margin-bottom: 1.75rem;
}

.ar-wrap > .ar-display-l {
	margin-bottom: 1.5rem;
}

.ar-wrap > .ar-display-m {
	margin-bottom: 0.9rem;
}

/* h1 steht immer oben in seiner Sektion, der Sektionsabstand genuegt. */
.ar-wrap > h1 {
	margin-top: 0;
}

/* ==========================================================================
   Hochformat-Video neben dem Text (/freie-trauung/)
   --------------------------------------------------------------------------
   Das Hymnen-Video ist 9:16. Allein im Textfluss bleibt rechts daneben eine
   leere Fläche. Ab 900 px steht es deshalb rechts, der Text läuft daneben
   weiter. Darunter stapelt es normal - Reihenfolge bleibt erhalten.
   ========================================================================== */

/* Rechte Spalte auf /freie-trauung/: Preis-Karte, darunter das Video.
   Ohne diese Huelle waere das Video ein drittes Rasterkind und landete
   in einer neuen Zeile statt unter der Karte. */
.ar-spalte-rechts {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Hochformat in einer Spalte: ohne Deckel wuerde es bei 486 px Spaltenbreite
   919 px hoch und laenger als die ganze linke Spalte. 340 px halten die
   beiden Spalten etwa gleich lang. */
.ar-video-figure--voll {
	max-width: 340px;
	margin: 0;
}

/* Das Beitragsbild auf /trauerrede/ ist ein Hochformat-Porträt und lief sonst
   über die halbe Bildschirmhöhe. Für diesen Anlass zu viel (Anna, 13.09.2026). */
.postid-3487 .featured-image img {
	max-height: 340px;
	width: auto;
	margin-inline: auto;
	display: block;
}

/* Einzelnes Foto im Textfluss mit Bildunterschrift (z. B. /wedding-bff/).
   Gleiche Anmutung wie die Video-Figur, nur ohne Formatvorgabe. */
.ar-foto-figur {
	margin: 1.5rem 0 0;
}

.ar-foto-figur img {
	width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
}

.ar-foto-figur figcaption {
	font-size: 0.95rem;
	color: var(--ar-gray);
	margin-top: 0.6rem;
}

/* Bilderband auf den Trauungsseiten enger anschliessen.
   Der Textteil endet dort mit einer kurzen, mittig stehenden Script-Zeile,
   danach wirkte der normale Kapitelabstand von 154 px wie zu viel Luft
   (Anna, 13.09.2026). Oberer Rand des Bandes von 77 auf 40 px bei 1280,
   der Sprung ist damit 117 statt 154. Gilt NUR fuer Trauungsseiten. */
.single-wedding .ar-bg-cream {
	padding-top: clamp(1.5rem, 3.1vw, 2.6rem);
}

/* ==========================================================================
   Business-Bereich (Startseite)
   „Was ich für euch tue" und „So läuft's ab" gehören zusammen: das eine sagt,
   was es gibt, das andere, wie es abläuft. Zwei Haarlinien klammern die beiden
   Sektionen ein, damit der Teil als eigenes Kapitel lesbar ist.
   Bewusst KEINE weiße Fläche: der Standardgrund ist Cream (#FAF7F2), Weiß
   liegt nur zwei Prozent daneben - und die Karten darin sind selbst weiß,
   die würden auf Weiß ihre Fläche verlieren.
   Die Linien sitzen als Pseudo-Element INNERHALB von .ar-wrap, damit sie
   exakt auf der Textkante stehen und nicht über sie hinausragen.
   ========================================================================== */

.ar-business--auftakt > .ar-wrap::before,
.ar-business--schluss > .ar-wrap::after {
	content: "";
	display: block;
	border-top: 2px solid var(--ar-ink);
}

.ar-business--auftakt > .ar-wrap::before {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ar-business--schluss > .ar-wrap::after {
	margin-top: clamp(2rem, 4vw, 3rem);
}