/* =========================================================================
   Amuri Yoga Sizilien - Frontend & Editor-Leinwand
   1 Basis · 2 Kopfbereich · 3 Navigation · 4 Inhalt
   5 Blog · 5c Kontaktseite · 6 Fussbereich · 7 Mobil
   ========================================================================= */

/* -------------------------------------------------------------------------
   1 · Basis
   ---------------------------------------------------------------------- */

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

img,
video {
	max-width: 100%;
	height: auto;
}

/* Initial (Drop Cap) - Playfair Display Regular, Schriftvorgabe 80 px. */
p.has-drop-cap:not(:focus)::first-letter,
.is-style-amuri-dropcap p::first-letter,
.is-style-amuri-dropcap::first-letter {
	float: left;
	margin: 0.06em 0.12em 0 0;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 5.2em;
	font-style: normal;
	font-weight: 400;
	line-height: 0.78;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
}

/* Fliesstext im Blocksatz wie in der Layout-Vorgabe. */
.amuri-justify,
.amuri-justify p,
.amuri-justify .wp-block-post-excerpt__excerpt {
	text-align: justify;
	hyphens: auto;
}

/* Kleine Auszeichnungszeile (Datum, Ort, Label). */
.amuri-label {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.7;
}

.amuri-lead {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: clamp(1.25rem, 0.95rem + 1.2vw, 1.75rem);
	line-height: 1.4;
}

/* Sachliche Zwischenueberschrift in Open Sans Bold (Layout-Vorgabe). */
.amuri-h-sans {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
}

h2.amuri-h-sans {
	font-size: 1.25rem;
}

h3.amuri-h-sans {
	font-size: 1.0625rem;
}

h4.amuri-h-sans {
	font-size: 1rem;
}

/* Karte mit feinem Rahmen. */
.wp-block-group.is-style-amuri-card {
	border: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40);
}

/* -------------------------------------------------------------------------
   2 · Kopfbereich - Bildband mit Logo
   ---------------------------------------------------------------------- */

.amuri-header-band.wp-block-cover {
	min-height: 200px;
	aspect-ratio: 1920 / 409;
	padding: 0;
	align-items: center;
	justify-content: center;
}

.amuri-header-band .wp-block-cover__inner-container {
	display: flex;
	justify-content: center;
}

.amuri-header-band .wp-block-site-logo,
.amuri-header-band .wp-block-image {
	margin: 0;
}

/*
 * Die Bandhoehe folgt dem Seitenverhaeltnis 1920/409, ist also rund 0,213 mal
 * die Fensterbreite. Damit das Logo ueberall im gleichen Verhaeltnis darin
 * sitzt, waechst es mit derselben Einheit mit. Der Deckel lag vorher bei
 * 220px und griff schon ab ~1300px – auf breiten Schirmen blieb das Logo
 * dadurch klein, waehrend das Band weiterwuchs.
 */
.amuri-header-band .wp-block-site-logo img,
.amuri-header-band .wp-block-image img {
	width: clamp(150px, 18.5vw, 300px);
	height: auto;
}

/* -------------------------------------------------------------------------
   2b · Kopfbereich – Bewegung
   Ruhig und aquarellhaft: Das Bildband zoomt beim Laden sanft aus, das Logo
   steigt kurz danach auf. Beim Scrollen loest sich das Logo nach oben auf,
   waehrend die Navigationsleiste seinen Platz einnimmt.
   ---------------------------------------------------------------------- */

.amuri-header-band.wp-block-cover {
	overflow: clip;
}

@media (prefers-reduced-motion: no-preference) {

	.amuri-header-band .wp-block-cover__image-background {
		animation: amuri-band-zoom 1600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
		transform-origin: 50% 45%;
	}

	.amuri-header-band .wp-block-site-logo img,
	.amuri-header-band .wp-block-image img {
		animation: amuri-logo-auf 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms both;
	}
}

/* Kein Opacity-Fade auf dem Bild: das Kopfbild ist das LCP-Element. */
@keyframes amuri-band-zoom {

	from {
		transform: scale(1.07);
	}

	to {
		transform: scale(1);
	}
}

@keyframes amuri-logo-auf {

	from {
		opacity: 0;
		transform: translateY(16px) scale(0.96);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Scrollgesteuertes Ausblenden – nur im Frontend, nicht auf der Editor-Leinwand. */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		body:not(.editor-styles-wrapper) .amuri-header-band .wp-block-cover__inner-container {
			animation: amuri-logo-loesen linear both;
			animation-timeline: view();
			animation-range: exit 10% exit 85%;
		}
	}
}

@keyframes amuri-logo-loesen {

	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: translateY(-20px) scale(0.96);
	}
}

/* -------------------------------------------------------------------------
   3 · Navigationsleiste
   ---------------------------------------------------------------------- */

/* Bleibt beim Scrollen oben stehen. Im Ruhezustand ohne Schatten und ohne Linie. */
.amuri-navbar-wrap {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--wp--preset--color--base);
	box-shadow: none;
}

/* Der Schatten baut sich erst beim Scrollen auf (wo scroll() unterstuetzt wird). */
@supports (animation-timeline: scroll()) {
	.amuri-navbar-wrap {
		animation: amuri-nav-schatten linear both;
		animation-timeline: scroll(root block);
		animation-range: 0 140px;
	}
}

/* Nur die Deckkraft wird interpoliert – die Geometrie bleibt gleich. */
@keyframes amuri-nav-schatten {

	from {
		box-shadow: 0 8px 20px -14px rgba(29, 29, 27, 0);
	}

	to {
		box-shadow: 0 8px 20px -14px rgba(29, 29, 27, 0.5);
	}
}

.amuri-navbar .wp-block-navigation a {
	text-decoration: none;
}

.amuri-navbar .wp-block-navigation .wp-block-navigation-item__content:hover,
.amuri-navbar .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* Menue mittig – auch der Burger-Button auf schmalen Bildschirmen. */
.amuri-navbar .wp-block-navigation {
	justify-content: center;
}

/* -------------------------------------------------------------------------
   4 · Inhalt
   ---------------------------------------------------------------------- */

.amuri-collage img {
	display: block;
	width: 100%;
	height: auto;
}

/* Hero-Cover mit Titel ueber Bild. */
.amuri-hero.wp-block-cover {
	min-height: 0;
	aspect-ratio: 1140 / 620;
	padding: var(--wp--preset--spacing--40);
}

.amuri-hero .wp-block-cover__inner-container > * {
	margin-block: 0.35rem;
}

/* Spaltenreihe: eigener vertikaler Rhythmus, ohne Huellgruppe im Editor. */
.amuri-reihe {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Zimmerkarte: Bild und Preiszeile liegen direkt in der Spalte. */
.amuri-zimmer .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Preiszeile: Bezeichnung links, Betrag rechts. */
.amuri-price {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--20);
	align-items: baseline;
}

.amuri-price p {
	margin: 0;
}

.amuri-price p:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.amuri-price p:last-child {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Listen etwas luftiger. */
.wp-block-list li + li {
	margin-top: 0.35rem;
}

/* -------------------------------------------------------------------------
   5 · Blog
   ---------------------------------------------------------------------- */

.amuri-backlink a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.amuri-backlink a:hover {
	color: var(--wp--preset--color--accent);
}

/*
 * Startseiten-Teaser: Die Buttons sollen auf einer Linie sitzen, auch wenn
 * die Texte unterschiedlich viele Zeilen brauchen. Dafuer wird die Spalte zur
 * Flex-Spalte und der Button nach unten geschoben.
 */
.amuri-teaser .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.amuri-teaser .wp-block-column .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Abschnitt "Aus dem Sizilien Blog" ganz unten auf der Startseite. */
.amuri-blogteaser-titel {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Button-Stile mit Icon: WhatsApp, E-Mail, Telefon. Das Icon liegt als
 * CSS-Maske vor der Beschriftung und uebernimmt ueber "currentColor" die
 * Buttonfarbe - auch beim Hover. Im gespeicherten Block steht nur die
 * Stil-Klasse, das Markup bleibt damit valide und im Editor umschaltbar.
 */
.wp-block-button.is-style-amuri-whatsapp .wp-block-button__link,
.wp-block-button.is-style-amuri-mail .wp-block-button__link,
.wp-block-button.is-style-amuri-telefon .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.wp-block-button.is-style-amuri-whatsapp .wp-block-button__link::before,
.wp-block-button.is-style-amuri-mail .wp-block-button__link::before,
.wp-block-button.is-style-amuri-telefon .wp-block-button__link::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.15em;
	block-size: 1.15em;
	background-color: currentColor;
	-webkit-mask: var(--amuri-icon) center / contain no-repeat;
	mask: var(--amuri-icon) center / contain no-repeat;
}

.wp-block-button.is-style-amuri-whatsapp .wp-block-button__link {
	--amuri-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.9-4.45 9.91-9.91a9.85 9.85 0 0 0-2.9-7.01A9.82 9.82 0 0 0 12.04 2Zm0 1.67c2.2 0 4.27.86 5.83 2.42a8.2 8.2 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24a8.23 8.23 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.39c0-4.54 3.7-8.24 8.24-8.24Zm-3.2 4.03c-.16 0-.43.06-.66.31-.23.25-.87.85-.87 2.06 0 1.22.89 2.39 1.01 2.56.12.16 1.74 2.66 4.23 3.73.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.47-.07 1.46-.6 1.67-1.18.2-.58.2-1.07.15-1.18-.06-.1-.23-.16-.48-.29-.25-.12-1.46-.72-1.69-.8-.22-.09-.39-.13-.55.12-.17.25-.64.8-.78.97-.15.16-.29.19-.53.06-.25-.12-1.05-.38-1.99-1.23-.74-.65-1.23-1.46-1.38-1.71-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.16.17-.27.25-.45.09-.16.05-.31-.02-.44-.06-.12-.55-1.34-.76-1.83-.2-.48-.4-.41-.55-.42h-.47Z'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-amuri-mail .wp-block-button__link {
	--amuri-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4.5h18A1.5 1.5 0 0 1 22.5 6v.4l-10.5 6.6L1.5 6.4V6A1.5 1.5 0 0 1 3 4.5Zm19.5 3.7V18a1.5 1.5 0 0 1-1.5 1.5H3A1.5 1.5 0 0 1 1.5 18V8.2l9.9 6.2a1.1 1.1 0 0 0 1.2 0l9.9-6.2Z'/%3E%3C/svg%3E");
}

.wp-block-button.is-style-amuri-telefon .wp-block-button__link {
	--amuri-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8Z'/%3E%3C/svg%3E");
}

/*
 * Button-Stil "Dezent": Textlink statt Rahmen-Button. Fuer weiterfuehrende
 * Links, die neben einem echten Button nicht mitkonkurrieren sollen.
 */
.wp-block-button.is-style-amuri-dezent .wp-block-button__link {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.wp-block-button.is-style-amuri-dezent .wp-block-button__link::after {
	content: "\00a0\2192";
}

.wp-block-button.is-style-amuri-dezent .wp-block-button__link:hover,
.wp-block-button.is-style-amuri-dezent .wp-block-button__link:focus {
	background: transparent;
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.amuri-post-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

.amuri-post-card .wp-block-post-title {
	text-align: center;
}

.amuri-post-card .wp-block-post-excerpt__excerpt {
	text-align: justify;
	hyphens: auto;
}

.amuri-post-card .wp-block-post-excerpt__more-text {
	display: none;
}

/* "Weiterlesen" als Rahmen-Button wie in der Layout-Vorgabe. */
.wp-block-read-more {
	display: inline-block;
	margin-inline: auto;
	padding: 0.9rem 1.6rem;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

.wp-block-read-more:hover,
.wp-block-read-more:focus {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

.amuri-post-card .wp-block-read-more {
	display: block;
	width: fit-content;
}

/* Kommentare. */
.wp-block-comment-author-name a {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wp-block-comment-date {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.wp-block-comment-template li + li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--30);
}

/* Verwandte Beitraege: Karten oben ausrichten. */
.amuri-related .wp-block-post-template {
	align-items: start;
}

/* -------------------------------------------------------------------------
   5b · Formulare (Kommentare)
   ---------------------------------------------------------------------- */

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

.wp-block-post-comments-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wp-block-post-comments-form .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.wp-block-post-comments-form .comment-notes,
.wp-block-post-comments-form .comment-form-cookies-consent {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.wp-block-post-comments-form p {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------
   5c · Kontaktseite
   ---------------------------------------------------------------------- */

.amuri-kontakt {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Karte mit den drei CTA-Buttons: Buttons untereinander über die volle Breite. */
.amuri-kontaktkarte .wp-block-buttons {
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}

.amuri-kontaktkarte .wp-block-button {
	width: 100%;
}

.amuri-kontaktkarte .wp-block-button .wp-block-button__link {
	width: 100%;
	justify-content: center;
	/*
	 * Die Buttons fuellen die Karte ohnehin aus, das breite Innenpolster der
	 * Standardbuttons kostet hier nur Platz - auf schmalen Schirmen bricht die
	 * Beschriftung sonst um.
	 */
	padding-inline: var(--wp--preset--spacing--20);
}

/* Rufnummer und Adresse als Nachschlagezeile unter den Buttons. */
.amuri-kontaktdaten {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	line-height: 1.9;
}

.amuri-kontaktdaten a {
	color: inherit;
	text-decoration: none;
}

.amuri-kontaktdaten a:hover,
.amuri-kontaktdaten a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/* -------------------------------------------------------------------------
   6 · Fussbereich
   ---------------------------------------------------------------------- */

.amuri-footer-strip.wp-block-group {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 0;
}

.amuri-footer-strip .wp-block-image {
	margin: 0;
}

.amuri-footer-strip .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.amuri-footer-bar {
	border-top: 1px solid var(--wp--preset--color--line);
}

/*
 * Social-Reihe ueber der Fusszeile: mittig, mit sichtbarer Beschriftung.
 * Formatiert wie die CTA-Buttons der Kontaktseite, damit der Fussbereich zum
 * Rest der Seite passt. Die Regeln tragen auch mehrere Dienste nebeneinander.
 */
.amuri-footer-social.wp-block-social-links {
	gap: var(--wp--preset--spacing--30);
	margin-block-end: var(--wp--preset--spacing--40);
}

/*
 * Farbe sitzt auf dem Listenpunkt, nicht auf dem Link: Core setzt den Link
 * selbst auf "currentColor" und tut das mit hoeherem Gewicht. Ueber den
 * Listenpunkt gilt damit die Akzentfarbe statt der Markenfarbe des Dienstes.
 */
.amuri-footer-social .wp-social-link {
	padding: 0;
	background: none;
	color: var(--wp--preset--color--accent);
}

.amuri-footer-social .wp-social-link:hover,
.amuri-footer-social .wp-social-link:focus-within {
	color: var(--wp--preset--color--base);
}

/*
 * Selektor-Gewicht wie in der Core-Regel .wp-block-social-links .wp-social-link a,
 * sonst gewinnt deren "border-bottom: 0" und der Rahmen ist unten offen.
 */
.amuri-footer-social.wp-block-social-links .wp-social-link a,
.amuri-footer-social.wp-block-social-links .wp-social-link a:hover,
.amuri-footer-social.wp-block-social-links .wp-social-link a:focus {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.9rem 1.6rem;
	border: 1px solid var(--wp--preset--color--accent);
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.amuri-footer-social.wp-block-social-links .wp-social-link a:hover,
.amuri-footer-social.wp-block-social-links .wp-social-link a:focus {
	background-color: var(--wp--preset--color--accent);
}

/* Logo uebernimmt die Textfarbe, damit es beim Hover mitwechselt. */
.amuri-footer-social.wp-block-social-links .wp-social-link svg {
	width: 1.25em;
	height: 1.25em;
	fill: currentColor;
}

/* Core verkleinert die Beschriftung und setzt Seitenabstaende - beides zurueck. */
.amuri-footer-social .wp-social-link span:not(.screen-reader-text) {
	margin: 0;
	font-size: inherit;
}

.amuri-footer-bar p {
	margin: 0;
}

/*
 * In der Fusszeile stehen nur noch Rechtstext und Seitenanfang-Pfeil. Damit der
 * Text trotzdem mittig sitzt, nimmt er den freien Platz ein.
 */
.amuri-footer-zeile > p:not(.amuri-totop) {
	flex: 1 1 auto;
}

/* Impressum und Datenschutz: dezent, aber klar als Links erkennbar. */
.amuri-footer-bar p:not(.amuri-totop) a {
	text-decoration: none;
	color: var(--wp--preset--color--muted);
}

.amuri-footer-bar p:not(.amuri-totop) a:hover,
.amuri-footer-bar p:not(.amuri-totop) a:focus {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * Seitenanfang-Pfeil: runder Knopf im Stil der uebrigen Buttons - Rahmen in
 * der Akzentfarbe, beim Hover gefuellt. Die Flaeche ist gross genug, um sie
 * auf dem Handy sicher zu treffen.
 */
.amuri-totop a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	color: var(--wp--preset--color--accent);
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
}

.amuri-totop a:hover,
.amuri-totop a:focus {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
   7 · Mobil
   ---------------------------------------------------------------------- */

@media (max-width: 781px) {

	.amuri-header-band.wp-block-cover {
		aspect-ratio: auto;
		min-height: 0;
		padding-block: var(--wp--preset--spacing--30);
	}

	/*
	 * Auf dem Handy hat das Band keine feste Hoehe mehr (aspect-ratio: auto),
	 * es waechst also mit dem Logo mit – hier ist mehr Spielraum.
	 */
	.amuri-header-band .wp-block-site-logo img,
	.amuri-header-band .wp-block-image img {
		width: clamp(150px, 46vw, 220px);
	}

	.amuri-hero.wp-block-cover {
		aspect-ratio: 4 / 5;
	}

	/* Raster-Layouts stapeln (Core kollabiert Grid-Spalten nicht selbst). */
	.wp-block-group.is-layout-grid,
	.wp-block-post-template.is-layout-grid,
	.wp-block-columns.is-layout-grid {
		grid-template-columns: 1fr;
	}

	.amuri-footer-strip.wp-block-group {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Fusszeile stapelt - dann alles mittig statt linksbuendig. */
	.amuri-footer-zeile.wp-block-group {
		justify-content: center;
		gap: var(--wp--preset--spacing--30);
	}

	.amuri-footer-social.wp-block-social-links {
		gap: var(--wp--preset--spacing--20);
	}

	/* Kontaktkarte: schmalerer Rand, damit die Buttons einzeilig bleiben. */
	.amuri-kontaktkarte.wp-block-group {
		padding: var(--wp--preset--spacing--30);
	}

	.amuri-price {
		gap: var(--wp--preset--spacing--20);
	}

	p.has-drop-cap:not(:focus)::first-letter,
	.is-style-amuri-dropcap p::first-letter {
		font-size: 4.2em;
	}
}

/* Unter ~480px stehen mehrere Dienste untereinander - dann alle gleich breit
   und mittig, statt unterschiedlich breit und linksbuendig. */
@media (max-width: 480px) {

	.amuri-footer-social.wp-block-social-links {
		flex-direction: column;
		align-items: center;
	}

	.amuri-footer-social .wp-social-link {
		width: 100%;
		max-width: 18rem;
	}

	.amuri-footer-social.wp-block-social-links .wp-social-link a {
		width: 100%;
		justify-content: center;
	}
}

/* Sehr schmale Geraete (iPhone SE u. ae.): Kontaktkarte enger fassen, damit
   die Beschriftung der CTA-Buttons einzeilig bleibt. */
@media (max-width: 400px) {

	.amuri-kontaktkarte.wp-block-group {
		padding: var(--wp--preset--spacing--20);
	}
}