/* Katzenpension Mia Maunz — globales Stylesheet */

:root {
  color-scheme: light;

  --color-bg: #fbfdff;
  --color-bg-alt: #eaf3fb;
  --color-card: #ffffff;
  --color-border: #d7e6f2;

  --color-text: #273240;
  --color-text-muted: #55677a;

  --color-primary: #3b6fa0;
  --color-primary-hover: #2c5680;
  --color-primary-soft: #4a86c4;

  --radius: 3px;

  /* Einheitliche Höhe einzeiliger Bedienelemente. Ohne feste Vorgabe fällt
     das Datumsfeld in Chrome zwei Pixel höher aus als seine Nachbarn, und in
     einer einzeiligen Formularleiste sitzen die Beschriftungen dann versetzt. */
  --control-height: 2.85rem;

  --font-heading: ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Ein Element mit hidden-Attribut muss verborgen bleiben. Ohne diese Zeile
   gewinnt jede Klasse mit eigener display-Angabe gegen die Vorgabe des
   Browsers — im Buchungsformular standen dadurch „Zurück" und „Anfrage
   absenden" schon im ersten Schritt sichtbar da. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-primary);
}

a:hover,
a:focus-visible {
  color: var(--color-primary-hover);
}

:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 2px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

h1 {
  font-size: 2.1rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.5rem;
  margin: 0 0 0.85rem;
}

h3 {
  font-size: 1.15rem;
  margin: 1.25rem 0 0.5rem;
}

p {
  margin: 0 0 1rem;
}

/* Skip link */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 100;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Header */

.site-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  padding: 2.5rem 0 0;
  text-align: center;
}

.site-header .logo {
  max-width: 300px;
  width: 60%;
  min-width: 200px;
  margin: 0 auto;
}

.main-nav {
  margin-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 1rem 1.5rem;
}

.main-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
  padding: 0.35rem 0.1rem;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Der Buchungseinstieg als einzige hervorgehobene Aktion in der Navigation */
.main-nav a.nav-cta {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  border-bottom-color: transparent;
  padding: 0.35rem 1rem;
}

.main-nav a.nav-cta:hover,
.main-nav a.nav-cta[aria-current="page"] {
  background: var(--color-primary-hover);
  color: #fff;
  border-bottom-color: transparent;
}

/* Buttons */

/* Der durchsichtige Rahmen ist Absicht: so ist ein Knopf genauso hoch wie ein
   Eingabefeld daneben, und die Variante mit sichtbarem Rahmen springt beim
   Umschalten nicht um zwei Pixel. */
.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.75rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.08s ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--color-primary-hover);
  color: #fff;
}

/* Kurzes Nachgeben beim Drücken — die Rückmeldung, dass der Klick ankam,
   noch bevor die neue Seite steht. */
.btn:active {
  transform: translateY(1px);
}

/* Zweitrangige Aktion — gleiche Form, zurückhaltender */
.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--color-bg-alt);
  color: var(--color-primary-hover);
  border-color: var(--color-primary-soft);
}

/* Auf dem dunklen Hero-Bild braucht die Variante hellen Kontrast */
.hero .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}

.hero .btn--ghost:hover,
.hero .btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

/* Sections */

.section {
  padding: 3.5rem 0;
}

.section--alt {
  background: var(--color-bg-alt);
}

.page-header {
  padding-bottom: 1.5rem;
}

.page-header h1 {
  margin-bottom: 0.5rem;
}

/* Hero */

.hero {
  position: relative;
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  background-image: linear-gradient(180deg, rgba(20, 40, 48, 0.25), rgba(20, 40, 48, 0.68)), url("img/MG_8550.jpg");
  background-size: cover;
  background-position: center;
}

.hero-inner {
  max-width: 34rem;
}

.hero .eyebrow {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfe6f8;
  margin-bottom: 0.75rem;
}

.hero h1 {
  color: #fff;
  font-size: 2.4rem;
}

.hero-lead {
  font-size: 1.15rem;
  color: #eef3f4;
  margin-bottom: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* Trust cards */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.trust-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  text-align: center;
}

.trust-card .icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary-soft);
  margin: 0 auto 1rem;
}

.trust-card h2 {
  font-size: 1.15rem;
}

.trust-card p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Gallery */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.gallery-grid--vertical {
  grid-template-columns: 1fr;
}

.gallery-grid--vertical img {
  aspect-ratio: auto;
}

/* CTA */

.cta-section {
  text-align: center;
}

.cta-content {
  max-width: 40rem;
}

.cta-phone {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.cta-phone a {
  text-decoration: none;
}

/* Nummerierte Ablaufschritte („So einfach buchen Sie") */

.step-list {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.step-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-list h3 {
  margin-top: 0;
}

.step-list p {
  color: var(--color-text-muted);
  margin-bottom: 0;
}

/* Two-column / feature layouts */

.two-col {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.requirement-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
}

.requirement-card h2 {
  font-size: 1.15rem;
}

.requirement-card p {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

/* Price table */

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.price-table th {
  background: var(--color-bg-alt);
  font-family: var(--font-heading);
}

.price-table tr:last-child td {
  border-bottom: none;
}

.price-row--current td {
  background: var(--color-bg-alt);
  font-weight: 600;
}

/* Abgelaufene Zeiträume bleiben sichtbar, treten aber zurück — sonst hält
   jemand einen alten Preis für den gültigen. */
.price-row--past td {
  color: var(--color-text-muted);
  font-weight: 400;
}

.price-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

.price-badge--past {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: 600;
}

.price-range {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  font-weight: 400;
}

.price-note {
  margin-top: 1.25rem;
  padding: 0.9rem 1.15rem;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.info-list li {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}

/* Kontakt */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-info p {
  margin-bottom: 0.6rem;
}

.map-image {
  margin-top: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  max-width: 320px;
}

.contact-cta {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
}

/* Legal text */

.legal-text p {
  color: var(--color-text);
}

.legal-text h3 {
  font-size: 1.05rem;
}

.legal-text .container {
  max-width: 48rem;
}

.legal-text ul {
  padding-left: 1.25rem;
}

.legal-doc + .legal-doc {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.legal-doc-title {
  font-size: 1.6rem;
}

/* Sprungmarken oben auf der AGB-Seite */
.toc {
  color: var(--color-text-muted);
}

/* Bestätigungsseite nach dem Absenden der Anfrage */

.confirm-panel {
  max-width: 44rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2rem;
}

.confirm-lead {
  font-size: 1.1rem;
}

.confirm-panel .step-list {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.confirm-panel .step-list h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
}

/* Formular */

.form-message {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  margin-bottom: 1.75rem;
}

.form-message--success {
  background: #eaf6ee;
  border-color: #bfe2cb;
  color: #275c3b;
}

.form-message--error {
  background: #fbeceb;
  border-color: #edc3bf;
  color: #7a2e26;
}

.form-hint {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: -0.5rem 0 1.25rem;
}

.booking-form .form-fieldset {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 0 0 2rem;
}

.booking-form legend {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0 0.5rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.form-grid .form-field {
  margin-bottom: 0;
}

.form-field label,
.form-field-label {
  font-weight: 600;
  font-size: 0.95rem;
}

/* Der Look aller Eingabefelder hängt bewusst am Elementtyp, nicht an einer
   Liste erlaubter type-Werte: eine solche Liste wurde beim Nachrüstung des
   Verwaltungsbereichs vergessen, und die Passwortfelder standen daraufhin als
   nackte Browserfelder in einer sonst gestalteten Maske. So ist jedes künftige
   Feld automatisch mitgestaltet. Ausgenommen sind nur die Typen mit eigenem
   Erscheinungsbild (Kästchen, Schalter, Knöpfe). */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  line-height: 1.5;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select {
  height: var(--control-height);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-primary-hover);
  outline-offset: 1px;
}

/* In einer Formularspalte füllt das Feld die volle Breite; einzeln in einer
   Werkzeugleiste stehende Felder behalten ihre natürliche Breite. */
.form-field > input,
.form-field > select,
.form-field > textarea {
  width: 100%;
}

textarea {
  resize: vertical;
}

.form-field textarea {
  min-height: 5rem;
}

/* Eigener Pfeil statt des Systemwidgets — sonst bleibt das Auswahlfeld als
   einziges Bedienelement im Look des Betriebssystems stehen. Als Linien-SVG
   inline hinterlegt, damit keine zusätzliche Datei geladen wird. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2355677a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  background-size: 0.85rem;
}

select:disabled {
  color: var(--color-text-muted);
  cursor: default;
}

/* Kästchen und Schalter: Hausfarbe statt Systemblau, etwas größer als die
   Vorgabe — sie werden im Verwaltungsbereich häufig getroffen. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--color-primary);
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  flex-shrink: 0;
  cursor: pointer;
}

.form-field-hint {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0.15rem 0 0;
}

/* Mehrzeilige Beschriftungen sollen am Kästchen ausgerichtet bleiben, das
   Kästchen selbst aber auf der ersten Zeile sitzen — daher flex-start plus
   ein Ausgleich für die halbe Zeilenhöhe. */
.form-field--checkbox label {
  font-weight: 400;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
}

.form-field--checkbox input[type="checkbox"] {
  margin-top: 0.22rem;
}

.form-field--checkbox .form-field-hint {
  margin-left: 1.65rem;
}

.form-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.35rem;
}

.form-radio-group label {
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.price-estimate {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  font-weight: 600;
  margin-top: 1rem;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn--small {
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
}

.btn--danger {
  background: #a3453b;
}

.btn--danger:hover,
.btn--danger:focus-visible {
  background: #832f27;
}

@media (max-width: 800px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* Buchungs-Wizard */

/* Ohne JS bleiben alle Schritte sichtbar und der Absenden-Button (kein
   [hidden] im Markup) funktioniert direkt — nur die Fortschrittsanzeige
   ergibt ohne Schrittwechsel keinen Sinn und bleibt verborgen. booking.js
   setzt die Klasse js-wizard erst, nachdem alle nötigen Elemente gefunden
   wurden, und schaltet dann erst auf die Schritt-für-Schritt-Ansicht um. */
.form-step {
  display: block;
}

.wizard-progress {
  display: none;
}

.js-wizard .form-step {
  display: none;
}

/* Der neue Schritt schiebt sich kurz herein, statt schlagartig dazustehen.
   Beim Blättern durch das Formular sieht man dadurch, dass ein Schritt
   gewechselt hat, und liest ihn nicht als dieselbe Seite mit anderem Text. */
.js-wizard .form-step.is-active {
  display: block;
  animation: form-step-in 0.25s cubic-bezier(0.33, 0, 0.2, 1);
}

@keyframes form-step-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

.js-wizard .wizard-progress {
  display: flex;
}

.wizard-progress {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.wizard-progress-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  cursor: pointer;
}

.wizard-progress-step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--color-border);
  margin: 0 0.75rem;
}

.wizard-progress-dot {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  /* Der Fortschritt wandert sichtbar mit, statt umzuspringen. */
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.wizard-progress-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.wizard-progress-step.is-active .wizard-progress-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.wizard-progress-step.is-active .wizard-progress-label {
  color: var(--color-text);
  font-weight: 600;
}

.wizard-progress-step.is-done .wizard-progress-dot {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
  color: #fff;
}

.wizard-nav {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
}

.wizard-review {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.wizard-review:empty {
  display: none;
}

.wizard-review-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.wizard-review-row:last-child {
  border-bottom: none;
}

.wizard-review-label {
  color: var(--color-text-muted);
  font-weight: 600;
}

/* Katzenblöcke */

.cat-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--color-bg-alt);
}

.cat-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.cat-block-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

/* Sonst addiert sich der Abstand der letzten Feldzeile auf den Innenabstand
   des Blocks und unten klafft mehr Luft als oben. */
.cat-block > *:last-child {
  margin-bottom: 0;
}

/* Der Knopf steht als eigener Block zwischen zwei Abschnitten und braucht
   deshalb denselben Abstand nach unten wie ein Katzenblock. */
.cat-add-btn {
  margin-bottom: 1.5rem;
}

/* AGB/Bedingungen im Formular */

.terms-doc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--color-card);
}

.terms-doc-details {
  margin-top: 0.75rem;
  font-size: 0.9rem;
}

.terms-doc-details summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
}

.terms-doc-details[open] summary {
  margin-bottom: 0.75rem;
}

.terms-doc-details h2 {
  font-size: 1rem;
}

/* Feld-Fehler */

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
  border-color: #b3564a;
}

/* Ein Hinweis, der einfach dasteht, wird übersehen — er soll erscheinen. */
.form-field-error {
  color: #b3564a;
  font-size: 0.85rem;
  margin: 0.3rem 0 0;
  animation: field-error-in 0.2s ease-out;
}

@keyframes field-error-in {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 800px) {
  .wizard-progress-label {
    display: none;
  }

  .wizard-progress-step:not(:last-child)::after {
    margin: 0 0.35rem;
  }

  .cat-block-header {
    flex-wrap: wrap;
  }
}

/* Footer */

.site-footer {
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: 2.5rem 0 1.5rem;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.footer-grid a {
  color: var(--color-text);
  text-decoration: none;
}

.footer-grid a:hover {
  color: var(--color-primary);
}

.footer-copy {
  text-align: center;
  color: var(--color-text-muted);
  margin: 0;
  font-size: 0.85rem;
}

/* Responsive */

@media (max-width: 800px) {
  .two-col,
  .feature-grid,
  .contact-grid,
  .step-list {
    grid-template-columns: 1fr;
  }

  .trust-grid,
  .requirements-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero {
    min-height: 50vh;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  h1 {
    font-size: 1.65rem;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt keine.
   Das ist keine Geschmacksfrage: Bewegung kann Übelkeit und Schwindel
   auslösen. Die Einstellung gilt für beide Stylesheets — admin.css baut auf
   dieser Datei auf — und admin.js prüft sie zusätzlich selbst. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}