/* 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;
}

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

/* 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;
}

.js-wizard .form-step.is-active {
  display: block;
}

.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;
}

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

.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;
}

.form-field-error {
  color: #b3564a;
  font-size: 0.85rem;
  margin: 0.3rem 0 0;
}

@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;
  }
}