/* ==========================================================================
   Template „herzog" – Schlüsseldienst Herzog Mannheim
   Leitidee: Nachtblau + Messing. Ein Moment fürs Auge (der Zylinder im Hero),
   alles andere ruhig, schnell und lesbar – für Menschen, die gerade
   vor einer verschlossenen Tür stehen.
   Keine externen Schriften: Systemschriften (DSGVO, Core Web Vitals).
   ========================================================================== */

:root {
	--ink: #14202b;        /* Nachtblau – Grundton */
	--ink-2: #22313d;      /* Nachtblau hell – Flächen im Dunkeln */
	--brass: #b8862b;      /* Messing – Hauptakzent (nur auf Dunkel / als Fläche) */
	--brass-hi: #e2be6e;   /* Messing hell – Glanzkante */
	--brass-text: #7a5612; /* Messing dunkel – Akzent als Text auf Hell */
	--paper: #eef1f3;      /* Zinkweiß – Seitengrund */
	--white: #ffffff;
	--steel: #56636d;      /* Stahlgrau – Nebentext */
	--line: #cbd3d9;

	--f-display: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
	--f-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--step--1: 0.875rem;
	--step-0: 1.0625rem;
	--step-1: 1.25rem;
	--step-2: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);
	--step-3: clamp(2.1rem, 1.4rem + 3.4vw, 3.75rem);
	--step-num: clamp(1.9rem, 1.2rem + 3.2vw, 3.6rem);

	--wrap: 76rem;
	--prose: 46rem;
	--gap: clamp(1rem, 0.6rem + 1.8vw, 2rem);
	--radius-s: 4px;
	--radius-m: 10px;
	--header-h: 4.5rem;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
	interpolate-size: allow-keywords;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: var(--step-0);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
}

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

a { color: var(--ink); text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--brass-text); }

:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); margin-top: 2.2em; }
h3 { font-size: var(--step-1); margin-top: 1.8em; }
p, ul, ol, dl { margin: 0 0 1.1em; }
strong { font-weight: 700; }

.hz-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }

.hz-skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--brass); color: var(--ink); padding: .6rem 1rem; font-weight: 700;
}
.hz-skip:focus { top: 1rem; }

.hz-ico { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* --------------------------------------------------------------------------
   Topbar + Header
   -------------------------------------------------------------------------- */
.hz-topbar { background: var(--ink); color: #c9d2d9; font-size: var(--step--1); }
.hz-topbar__in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 2.25rem; }
.hz-topbar p { margin: 0; }
.hz-topbar a { color: var(--white); text-decoration: none; font-variant-numeric: tabular-nums; }
.hz-topbar a:hover { color: var(--brass-hi); }
.hz-topbar__status { display: flex; align-items: center; gap: .55rem; }

/* „Live"-Punkt: einzige Daueranimation – signalisiert Erreichbarkeit */
.hz-live { width: .55rem; height: .55rem; border-radius: 50%; background: #4fbf7a; box-shadow: 0 0 0 0 rgba(79, 191, 122, .55); animation: hz-live 2.4s ease-out infinite; }
@keyframes hz-live { 0% { box-shadow: 0 0 0 0 rgba(79, 191, 122, .55); } 70%, 100% { box-shadow: 0 0 0 .55rem rgba(79, 191, 122, 0); } }

.hz-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(238, 241, 243, .94);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--line);
}
.hz-header__in { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.hz-brand { flex: 0 1 auto; min-width: 0; }
@media (min-width: 86.01rem) { .hz-brand { flex: none; } }
.hz-header .hz-wrap, .hz-topbar .hz-wrap { max-width: 92rem; }

.hz-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.hz-brand img { height: 44px; width: auto; }
.hz-brand__text { display: flex; flex-direction: column; line-height: 1; }
.hz-brand__name { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; }
.hz-brand__place { font-size: var(--step--1); color: var(--steel); margin-top: .2rem; }

/* Navigation (Joomla mod_menu-Ausgabe: ul.mod-menu > li > a) */
.hz-nav ul { list-style: none; margin: 0; padding: 0; }
.hz-nav a, .hz-nav .nav-header, .hz-nav .separator {
	display: block; text-decoration: none; color: var(--ink); font-weight: 600;
	padding: .55rem .6rem; border-radius: var(--radius-s); white-space: nowrap;
}
.hz-nav li.current > a, .hz-nav li.active > a { color: var(--brass-text); box-shadow: inset 0 -2px 0 var(--brass); border-radius: 0; }
.hz-nav a:hover { background: rgba(184, 134, 43, .12); }

.hz-callbtn {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--ink); color: var(--white); text-decoration: none;
	padding: .6rem 1rem; border-radius: 999px; font-weight: 700; white-space: nowrap;
	transition: background-color .2s var(--ease);
}
.hz-callbtn:hover { background: var(--brass); color: var(--ink); }
.hz-callbtn__label { color: var(--brass-hi); }
@media (max-width: 96rem) { .hz-callbtn__label { display: none; } }
.hz-callbtn:hover .hz-callbtn__label { color: var(--ink); }
.hz-callbtn__num { font-family: var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.hz-navtoggle {
	display: none; align-items: center; gap: .5rem;
	background: none; border: 1px solid var(--line); border-radius: var(--radius-s);
	padding: .5rem .7rem; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer;
}
.hz-navtoggle__bars, .hz-navtoggle__bars::before, .hz-navtoggle__bars::after {
	display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .25s var(--ease), opacity .2s;
}
.hz-navtoggle__bars::before, .hz-navtoggle__bars::after { content: ""; position: absolute; left: 0; }
.hz-navtoggle__bars::before { top: -6px; }
.hz-navtoggle__bars::after { top: 6px; }
.hz-navtoggle[aria-expanded="true"] .hz-navtoggle__bars { background: transparent; }
.hz-navtoggle[aria-expanded="true"] .hz-navtoggle__bars::before { transform: translateY(6px) rotate(45deg); }
.hz-navtoggle[aria-expanded="true"] .hz-navtoggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 86.01rem) {
	.hz-nav .mod-menu { display: flex; gap: .15rem; }
	.hz-nav li { position: relative; }
	.hz-nav li ul { display: none; }
}

@media (max-width: 86rem) {
	.hz-navtoggle { display: inline-flex; order: 3; }
	.hz-callbtn { order: 2; }
	.hz-callbtn__label { display: none; }
	.hz-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		background: var(--paper); border-bottom: 1px solid var(--line);
		padding: .5rem var(--gap) 1.25rem;
		display: grid; grid-template-rows: 0fr; visibility: hidden;
		transition: grid-template-rows .3s var(--ease), visibility 0s linear .3s;
	}
	.hz-nav > * { overflow: hidden; min-height: 0; }
	.hz-header.is-open .hz-nav { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s var(--ease), visibility 0s; }
	.hz-nav a { padding: .8rem .25rem; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.1rem; }
	.hz-nav li.current > a { box-shadow: inset 3px 0 0 var(--brass); padding-left: .75rem; }
}
@media (max-width: 36rem) {
	.hz-topbar__office { display: none; }
}
@media (max-width: 30rem) {
	.hz-callbtn__num { display: none; }
	.hz-navtoggle__label { display: none; }
	.hz-brand__name { font-size: 1.05rem; }
	.hz-brand img { height: 36px; }
}

/* --------------------------------------------------------------------------
   Inhalt (com_content)
   -------------------------------------------------------------------------- */
.hz-main { padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem) clamp(3rem, 2rem + 4vw, 6rem); outline: none; }
.is-home .hz-main { padding-top: 0; }

.com-content-article__body > p,
.com-content-article__body > ul,
.com-content-article__body > ol,
.com-content-article__body > h2,
.com-content-article__body > h3,
.hz-sec > p, .hz-sec > ul, .hz-sec > ol, .hz-sec > h2, .hz-sec > h3,
.page-header { max-width: var(--prose); }

.page-header h1, .page-header h2 { margin-top: 0; }
.com-content-article__body ul:not([class]) { padding-left: 1.2rem; }
.com-content-article__body ul:not([class]) li::marker { color: var(--brass); }

/* Joomla-Artefakte, die hier nicht gebraucht werden */
.article-info, .com-content-article .tags, .pagenavigation, .icons { display: none; }

.hz-lead { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: var(--prose); }

.hz-sec { margin-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.hz-sec > h2:first-child { margin-top: 0; }

/* Dunkles Band (für Notruf-Abschnitte) */
.hz-band {
	background: var(--ink); color: #dfe5ea; border-radius: var(--radius-m);
	padding: clamp(1.5rem, 1rem + 3vw, 3rem);
	margin-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.hz-band h2, .hz-band h3 { color: var(--white); margin-top: 0; }
.hz-band a:not(.hz-btn) { color: var(--brass-hi); }

@media (min-width: 60rem) {
	.hz-band:has(> .hz-steps) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
	.hz-band:has(> .hz-steps) > :not(.hz-steps) { grid-column: 1; }
	.hz-band:has(> .hz-steps) > .hz-steps { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}
.hz-band .hz-steps > li { border-left-color: rgba(226, 190, 110, .3); }
.hz-band .hz-steps > li:last-child { border-left-color: transparent; }
.hz-band .hz-steps > li::before { background: var(--brass); color: var(--ink); }
.hz-band .hz-steps h3 { color: var(--white); }

/* Buttons */
.hz-btn {
	display: inline-flex; align-items: center; gap: .55rem;
	font-weight: 700; text-decoration: none; line-height: 1.2;
	padding: .85rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
	transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
	margin: 0 .5rem .6rem 0;
}
.hz-btn--brass { background: var(--brass); color: var(--ink); }
.hz-btn--brass:hover { background: var(--brass-hi); color: var(--ink); }
.hz-btn--ghost { border-color: currentColor; color: inherit; }
.hz-btn--ghost:hover { border-color: var(--brass); color: var(--brass-text); }
.hz-band .hz-btn--ghost:hover { color: var(--brass-hi); }

/* --------------------------------------------------------------------------
   Hero (Startseite)
   -------------------------------------------------------------------------- */
.hz-hero {
	background: var(--ink); color: #dfe5ea;
	margin-inline: calc(var(--gap) * -1);
	padding: clamp(2rem, 1.2rem + 4vw, 4.5rem) var(--gap) clamp(2rem, 1rem + 3vw, 3.5rem);
	display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
}
@media (min-width: 76rem) { .hz-hero { border-radius: 0 0 var(--radius-m) var(--radius-m); } }
.hz-hero h1 { color: var(--white); max-width: 18ch; }
.hz-hero .hz-lead { color: #c9d2d9; }
.hz-hero__call {
	display: inline-flex; flex-direction: column; gap: .2rem;
	text-decoration: none; color: var(--ink); background: var(--brass);
	padding: .9rem 1.5rem 1rem; border-radius: var(--radius-m); margin: .5rem 0 1.25rem;
	transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.hz-hero__call:hover { background: var(--brass-hi); color: var(--ink); }
.hz-hero__call:active { transform: scale(.98); }
.hz-hero__call small { font-size: var(--step--1); font-weight: 700; }
.hz-hero__call span { white-space: nowrap; font-family: var(--f-display); font-weight: 700; font-size: var(--step-num); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.hz-hero__alt { color: #c9d2d9; font-size: var(--step--1); }
.hz-hero__alt a { color: var(--white); }

.hz-facts { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; border-top: 1px solid rgba(226, 190, 110, .35); padding-top: 1.1rem; }
.hz-facts li { font-size: var(--step--1); color: #c9d2d9; }
.hz-facts b { display: block; color: var(--white); font-family: var(--f-display); font-size: 1.15rem; margin-bottom: .15rem; }

@media (max-width: 52rem) {
	.hz-hero { grid-template-columns: 1fr; }
	.hz-hero__figure { max-width: 24rem; }
	.hz-facts { grid-template-columns: 1fr; }
}

/* Der Zylinder – Signatur-Animation (SVG wird per JS eingesetzt) */
.hz-cylinder { margin: 0; }
.hz-cylinder svg { width: 100%; height: auto; overflow: hidden; display: block; }
.hz-cylinder figcaption { font-size: var(--step--1); color: #9fb0bd; margin-top: .6rem; min-height: 1.6em; }
.hz-cyl__key { transform: translateX(-62%); transition: transform 1.1s var(--ease) .35s; }
.hz-cyl__stack { transform: translateY(var(--drop)); transition: transform .45s var(--ease); transition-delay: calc(1.05s + var(--i) * .11s); }
.hz-cyl__spring { transform-origin: 50% 0; transform-box: fill-box; transform: scaleY(var(--stretch)); transition: transform .45s var(--ease); transition-delay: calc(1.05s + var(--i) * .11s); }
.hz-cyl__shear { stroke: #6f8090; stroke-dasharray: 6 6; transition: stroke .4s ease 1.9s, stroke-width .4s ease 1.9s; }
.hz-cylinder.is-open .hz-cyl__key { transform: translateX(0); }
.hz-cylinder.is-open .hz-cyl__stack { transform: translateY(0); }
.hz-cylinder.is-open .hz-cyl__spring { transform: scaleY(1); }
.hz-cylinder.is-open .hz-cyl__shear { stroke: var(--brass-hi); stroke-width: 3; }
.hz-cylinder .hz-cyl__state { opacity: 0; transition: opacity .4s ease 2.1s; }
.hz-cylinder.is-open .hz-cyl__state { opacity: 1; }

/* --------------------------------------------------------------------------
   Leistungsliste, Medien, Karten mit Bedeutung
   -------------------------------------------------------------------------- */
.hz-sec > .hz-services, .com-content-article__body > .hz-services { max-width: none; }
.hz-services {
	list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--ink);
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.hz-services > li {
	display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start;
	padding: 1.25rem 0; border-bottom: 1px solid var(--line);
}
.hz-services img { width: 7.5rem; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s); background: var(--line); }
.hz-services h3 { margin: 0 0 .35rem; }
.hz-services p { margin: 0 0 .4rem; max-width: var(--prose); }
.hz-services a { font-weight: 600; }
@media (max-width: 36rem) {
	.hz-services > li { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .9rem; }
	.hz-services img { width: 4.5rem; }
}

.hz-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
@media (max-width: 48rem) { .hz-split { grid-template-columns: 1fr; } }

.hz-figure { margin: 0 0 1.5rem; }
.hz-figure img { width: 100%; border-radius: var(--radius-m); background: var(--line); }
.hz-figure figcaption { font-size: var(--step--1); color: var(--steel); margin-top: .5rem; }

.hz-note {
	border-left: 4px solid var(--brass); background: var(--white);
	padding: 1rem 1.25rem; margin: 1.5rem 0; max-width: var(--prose); border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.hz-note > :last-child { margin-bottom: 0; }
.hz-note--alarm { border-left-color: #b3261e; }
.hz-note--alarm strong:first-child { color: #b3261e; }

/* Ablauf – echte Reihenfolge, deshalb nummeriert */
.hz-steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0; max-width: var(--prose); }
.hz-steps > li { counter-increment: step; position: relative; padding: 0 0 1.4rem 3.4rem; border-left: 2px solid var(--line); margin-left: 1.1rem; }
.hz-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hz-steps > li::before {
	content: counter(step); position: absolute; left: -1.15rem; top: -.1rem;
	width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center;
	background: var(--ink); color: var(--brass-hi); font-family: var(--f-display); font-weight: 700;
}
.hz-steps h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.hz-steps p { margin: 0 0 .4rem; }

/* Preise */
.hz-prices { width: 100%; max-width: var(--prose); border-collapse: collapse; margin: 1rem 0 1.5rem; background: var(--white); border-radius: var(--radius-s); overflow: hidden; }
.hz-prices th, .hz-prices td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.hz-prices th { font-family: var(--f-display); font-size: 1.05rem; }
.hz-prices td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Referenzen / Fälle */
.hz-case { border-top: 2px solid var(--ink); padding-top: 1rem; margin: 2rem 0; max-width: var(--prose); }
.hz-case h3 { margin-top: 0; }
.hz-case dl { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .4rem 1rem; margin: 0; }
.hz-case dt { font-weight: 700; color: var(--steel); }
.hz-case dd { margin: 0; }
@media (max-width: 36rem) { .hz-case dl { grid-template-columns: 1fr; } .hz-case dt { margin-top: .5rem; } }

/* Einsatzgebiet: kompakte Linkliste in Spalten */
.hz-areas { list-style: none; padding: 0; margin: 1rem 0 1.5rem; columns: 3 12rem; column-gap: 2rem; }
.hz-areas li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--line); }
.hz-areas a { text-decoration: none; font-weight: 600; }
.hz-areas a:hover { text-decoration: underline; }

/* KFZ-Modelllisten */
.hz-models { columns: 2 18rem; column-gap: 2rem; padding-left: 1.2rem; }
.hz-models li { break-inside: avoid; margin-bottom: .3rem; }

/* --------------------------------------------------------------------------
   FAQ (details/summary) – auch Quelle für FAQPage-JSON-LD
   -------------------------------------------------------------------------- */
.hz-faq { border-bottom: 1px solid var(--line); max-width: var(--prose); }
.hz-faq:first-of-type { border-top: 2px solid var(--ink); }
.hz-faq summary {
	list-style: none; cursor: pointer; padding: 1rem 2.5rem 1rem 0; position: relative;
	font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3;
}
.hz-faq summary::-webkit-details-marker { display: none; }
.hz-faq summary::after {
	content: ""; position: absolute; right: .4rem; top: 1.25rem; width: .7rem; height: .7rem;
	border-right: 2px solid var(--brass-text); border-bottom: 2px solid var(--brass-text);
	transform: rotate(45deg); transition: transform .25s var(--ease);
}
.hz-faq[open] summary::after { transform: rotate(-135deg); top: 1.5rem; }
.hz-faq__a { padding: 0 0 1.1rem; }
.hz-faq__a > :last-child { margin-bottom: 0; }
.hz-faq::details-content { block-size: 0; overflow: hidden; transition: block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.hz-faq[open]::details-content { block-size: auto; }

/* --------------------------------------------------------------------------
   Footer + mobile Anrufleiste
   -------------------------------------------------------------------------- */
.hz-footer { background: var(--ink); color: #c9d2d9; padding-top: clamp(2.5rem, 2rem + 2vw, 4rem); font-size: .95rem; }
.hz-footer a { color: var(--white); text-decoration-color: rgba(226, 190, 110, .6); }
.hz-footer a:hover { color: var(--brass-hi); }
.hz-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
@media (max-width: 64rem) { .hz-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .hz-footer__grid { grid-template-columns: 1fr; } }
.hz-footer address { font-style: normal; }
.hz-footer__name { font-family: var(--f-display); font-weight: 700; font-size: 1.25rem; color: var(--white); margin-bottom: .5rem; }
.hz-footer__h { font-family: var(--f-display); font-weight: 700; color: var(--brass-hi); margin-bottom: .5rem; }
.hz-footer__em { font-weight: 700; font-size: 1.1rem; }
.hz-footer__links, .hz-footer__nav ul { list-style: none; padding: 0; margin: 0; }
.hz-footer__links li, .hz-footer__nav li { margin-bottom: .35rem; }
.hz-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2.5rem; padding-block: 1.25rem; font-size: var(--step--1); }
.hz-footer__base p { margin: 0; }

.hz-callbar { display: none; }
@media (max-width: 52rem) {
	body { padding-bottom: 4.25rem; }
	.hz-callbar {
		display: grid; grid-template-columns: 1fr auto; gap: .5rem;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding: .55rem .65rem calc(.55rem + env(safe-area-inset-bottom));
		background: var(--ink); box-shadow: 0 -6px 18px rgba(20, 32, 43, .25);
	}
	.hz-callbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; border-radius: 999px; font-weight: 700; text-decoration: none; }
	.hz-callbar__main { background: var(--brass); color: var(--ink); font-size: 1.05rem; }
	.hz-callbar__alt { color: var(--white); border: 2px solid rgba(255, 255, 255, .35); padding-inline: 1.1rem; }
}

/* Joomla-Systemmeldungen */
joomla-alert, .alert { display: block; padding: 1rem 1.25rem; border-radius: var(--radius-s); background: var(--white); border-left: 4px solid var(--brass); margin-bottom: 1.5rem; }

/* Fehlerseite */
.hz-error { min-height: 70vh; display: grid; align-items: center; }
.hz-error__code { font-family: var(--f-display); font-size: clamp(4rem, 12vw, 9rem); line-height: 1; color: var(--brass-text); margin: 0; }

/* --------------------------------------------------------------------------
   Maus-Begleiter (nur feine Zeiger, nur ohne reduzierte Bewegung).
   Der echte Mauszeiger bleibt sichtbar – der Ring ist reine Zugabe.
   -------------------------------------------------------------------------- */
.hz-cursor {
	position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
	width: 34px; height: 34px; margin: -17px 0 0 -17px;
	border: 1.5px solid rgba(184, 134, 43, .85); border-radius: 50%;
	opacity: 0; transition: opacity .25s ease, width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background-color .25s ease, border-color .25s ease;
	will-change: transform;
}
.hz-cursor.is-visible { opacity: 1; }
.hz-cursor.is-link { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(184, 134, 43, .12); }
.hz-cursor.is-call { width: 86px; height: 86px; margin: -43px 0 0 -43px; background: rgba(184, 134, 43, .92); border-color: var(--brass); }
.hz-cursor__label {
	position: absolute; inset: 0; display: grid; place-items: center;
	font: 700 .72rem/1 var(--f-text); color: var(--ink); opacity: 0; transition: opacity .2s ease;
}
.hz-cursor.is-call .hz-cursor__label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.hz-cursor { display: none; }
}

@media print {
	.hz-topbar, .hz-header, .hz-callbar, .hz-footer__links, .hz-cylinder { display: none !important; }
	body { background: #fff; padding: 0; }
	.hz-hero, .hz-band { background: none; color: #000; }
	.hz-hero h1, .hz-band h2 { color: #000; }
}