/* ==========================================================================
   Hundesalon MiLedi – Stylesheet
   Alle wichtigen Gestaltungswerte stehen als Variablen in :root.
   ========================================================================== */

:root {
  /* Farben – abgeleitet von der bisherigen Webseite */
  --farbe-marke: #902800;          /* Rotbraun aus dem Logo */
  --farbe-marke-dunkel: #6b1e00;   /* Hover-Zustand */
  --farbe-akzent: #80c8a8;         /* Mintgrün der alten Navigation (nur dekorativ, nicht für Text) */
  --farbe-akzent-hell: #e3f3ec;
  --farbe-trenner: #d3e6dd;        /* feine Trennlinien */
  --farbe-creme: #f6efe2;          /* Banner-Farbe aus den Salonfotos */
  --farbe-creme-dunkel: #eee2cc;   /* Hover für helle Buttons */
  --farbe-text: #3f3f47;
  --farbe-text-hell: #5c5c66;
  --farbe-hintergrund: #f0f0f0;
  --farbe-flaeche: #f8f8f8;        /* entspricht dem Logo-Hintergrund */
  --farbe-weiss: #ffffff;
  --farbe-rand: #dcdcdc;
  --farbe-footer: #202028;
  --farbe-footer-text: #e6e6ea;
  --farbe-fokus: #1d5fbf;
  --farbe-whatsapp: #0f6b52;       /* dunkles Grün, Kontrast zu Weiß 6,5 : 1 */
  --farbe-whatsapp-dunkel: #0b5e47;
  --farbe-facebook: #1877f2;       /* nur für das Facebook-Symbol */
  --farbe-facebook-text: #13519f;  /* Linktext, Kontrast 7 : 1 auf Hellblau */
  --farbe-facebook-hell: #eef4fe;
  --farbe-facebook-hover: #e0ebfd;
  --farbe-facebook-rand: #b9cff3;
  --farbe-platzhalter-rand: #c47a00;
  --farbe-platzhalter-flaeche: #fff6e0;

  /* Schriften – Systemschriften, es werden keine Schriften nachgeladen */
  --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: Georgia, "Times New Roman", serif;
  --schrift-groesse: 1.0625rem;   /* 17 px */
  --zeilenhoehe: 1.65;

  /* Abstände */
  --abstand-xs: 0.5rem;
  --abstand-s: 1rem;
  --abstand-m: 1.5rem;
  --abstand-l: 2.5rem;
  --abstand-xl: 4rem;

  /* Layout */
  --inhalt-breite: 72rem;
  --text-breite: 46rem;
  --radius: 0.5rem;
  --radius-gross: 1rem;
  --schatten: 0 2px 10px rgba(0, 0, 0, 0.07);
  --bedienflaeche: 2.75rem;        /* Mindesthöhe für Links/Buttons (44 px) */
}

/* ---------- Grundlagen ---------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: var(--schrift-groesse);
  line-height: var(--zeilenhoehe);
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--schrift-titel);
  font-weight: normal;
  line-height: 1.25;
  color: var(--farbe-text);
  margin: 0 0 var(--abstand-s);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
h2 { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; font-family: var(--schrift-text); font-weight: 600; }

p,
ul,
address {
  margin: 0 0 var(--abstand-s);
}

address {
  font-style: normal;
}

a {
  color: var(--farbe-marke);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--farbe-marke-dunkel);
}

/* Gut sichtbarer Tastatur-Fokus */
:focus-visible {
  outline: 3px solid var(--farbe-fokus);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-inline: var(--abstand-s);
}

@media (min-width: 48em) {
  .container {
    padding-inline: var(--abstand-m);
  }
}

/* Nur für Screenreader sichtbar */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--abstand-s);
  top: -100px;
  z-index: 10;
  padding: var(--abstand-xs) var(--abstand-s);
  background: var(--farbe-weiss);
  border: 2px solid var(--farbe-marke);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--abstand-xs);
}

/* ---------- Kopfbereich ---------- */

.site-header {
  background: var(--farbe-flaeche);
  border-bottom: 3px solid var(--farbe-akzent);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-xs) var(--abstand-m);
  padding-block: var(--abstand-xs);
}

/* Logo und „seit 2008“ nebeneinander */
.marke {
  display: flex;
  align-items: center;
  gap: var(--abstand-m);
}

/* Pfote mit „SEIT 2008“ daneben */
.seit {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  color: var(--farbe-marke);
}

.seit-pfote {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.seit-text {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1;
}

.seit-wort {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seit-jahr {
  margin-top: 0.15rem;
  font-size: 1.75rem;
}

@media (max-width: 22.5em) {
  .marke {
    gap: var(--abstand-s);
  }

  .seit {
    gap: 0.5rem;
  }

  .seit-pfote {
    width: 2.5rem;
    height: 2.5rem;
  }

  .seit-jahr {
    font-size: 1.5rem;
  }
}

.logo {
  display: inline-block;
  border-radius: var(--radius);
}

.logo img {
  width: 160px;
  height: 74px;
}

.hauptnavigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hauptnavigation a {
  display: flex;
  align-items: center;
  min-height: var(--bedienflaeche);
  padding: 0 0.85rem;
  border-radius: var(--radius);
  color: var(--farbe-text);
  text-decoration: none;
  font-size: 1.05rem;
}

.hauptnavigation a:hover {
  background: var(--farbe-akzent-hell);
  color: var(--farbe-text);
}

.hauptnavigation a[aria-current="page"] {
  box-shadow: inset 0 -3px 0 var(--farbe-akzent);
}

@media (max-width: 40em) {
  .site-header .container {
    justify-content: center;
  }

  .hauptnavigation ul {
    justify-content: center;
  }

  .hauptnavigation a {
    padding: 0 0.6rem;
  }
}

/* ---------- Abschnitte ---------- */

.abschnitt {
  padding-block: var(--abstand-xl);
}

.abschnitt--hell {
  background: var(--farbe-flaeche);
}

.abschnitt--creme {
  background: var(--farbe-creme);
}

/* Einheitliche Abschnittsüberschriften: Rostrot, fette Serifenschrift */
.abschnitt-kopf {
  margin-bottom: var(--abstand-l);
}

.abschnitt-kopf h2 {
  color: var(--farbe-marke);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
}

.abschnitt-kopf p {
  max-width: var(--text-breite);
  font-size: 1.15rem;
}

/* Anker-Ziele nicht direkt an den Fensterrand springen lassen */
[id] {
  scroll-margin-top: var(--abstand-s);
}

/* ---------- Begrüßung / Hero ---------- */

.hero {
  background: var(--farbe-creme);
  padding-block: var(--abstand-l);
}

.hero .container {
  display: grid;
  gap: var(--abstand-l);
  align-items: center;
}

@media (min-width: 52em) {
  .hero .container {
    grid-template-columns: 1.2fr 1fr;
  }
}

.hero-ort {
  margin-bottom: var(--abstand-xs);
  color: var(--farbe-marke);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.hero-text p {
  max-width: 38rem;
}

.hero-bild img {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-gross);
  box-shadow: var(--schatten);
}

/* Mehrere große Buttons untereinander, alle gleich breit */
.knopf-stapel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--abstand-s);
  margin-top: var(--abstand-m);
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bedienflaeche);
  padding: 0.6rem 1.4rem;
  border: 2px solid var(--farbe-marke);
  border-radius: 999px;
  background: var(--farbe-marke);
  color: var(--farbe-weiss);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.knopf:hover {
  background: var(--farbe-marke-dunkel);
  border-color: var(--farbe-marke-dunkel);
  color: var(--farbe-weiss);
}

.knopf--rahmen {
  background: transparent;
  color: var(--farbe-marke);
}

.knopf--rahmen:hover {
  background: var(--farbe-marke);
}

.knopf--whatsapp,
.knopf--gruen {
  gap: 0.5rem;
  background: var(--farbe-whatsapp);
  border-color: var(--farbe-whatsapp);
}

.knopf--whatsapp:hover,
.knopf--gruen:hover {
  background: var(--farbe-whatsapp-dunkel);
  border-color: var(--farbe-whatsapp-dunkel);
}

.knopf-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}


/* ---------- Leistungen ---------- */

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--abstand-m);
  margin: 0 0 var(--abstand-l);
  padding: 0;
  list-style: none;
}

.karte {
  padding: var(--abstand-m);
  background: var(--farbe-weiss);
  border-top: 4px solid var(--farbe-akzent);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}

.karte h3 {
  margin-bottom: var(--abstand-xs);
  color: var(--farbe-marke);
}

.karte p {
  margin: 0;
}

/* Leistungen: drei Karten mit Symbol */
.karten--drei {
  grid-template-columns: 1fr;
}

@media (min-width: 56em) {
  .karten--drei {
    grid-template-columns: repeat(3, 1fr);
  }
}

.karte.leistung {
  padding: var(--abstand-l) var(--abstand-m);
}

.leistung h3 {
  margin-bottom: var(--abstand-s);
  font-size: 1.4rem;
  font-weight: 700;
}

.leistung-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--abstand-m);
  border-radius: 50%;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-whatsapp);
}

/* Grüne Leiste mit Hinweis und Button „Termin anfragen“ */
.hinweisleiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-m);
  padding: var(--abstand-m) var(--abstand-l);
  border-radius: var(--radius);
  background: var(--farbe-akzent-hell);
}

.hinweisleiste h3 {
  margin-bottom: var(--abstand-xs);
  font-size: 1.5rem;
  font-weight: 700;
}

.hinweisleiste p {
  margin: 0;
}

.hinweisleiste .knopf {
  gap: 0.75rem;
  min-height: 3.5rem;
  padding-inline: 1.6rem;
  border-radius: var(--radius-gross);
  font-size: 1.1rem;
}

@media (max-width: 40em) {
  .hinweisleiste {
    padding: var(--abstand-m);
  }

  .hinweisleiste .knopf {
    width: 100%;
  }
}

/* ---------- Galerie ---------- */

.galerie {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--abstand-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) {
  .galerie {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--abstand-m);
  }
}

.galerie a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--farbe-rand);
}

.galerie img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.galerie a:hover img {
  transform: scale(1.04);
}

/* Für Querformate: Bildausschnitt im Quadrat weiter links ansetzen */
.galerie img.bild-links {
  object-position: 30% 50%;
}

@media (prefers-reduced-motion: reduce) {
  .galerie img {
    transition: none;
  }
}

.galerie-hinweis {
  margin-top: var(--abstand-s);
  color: var(--farbe-text-hell);
  font-size: 0.95rem;
}

/* ---------- Kontakt ---------- */

.kontakt-raster {
  display: grid;
  gap: var(--abstand-m);
}

@media (min-width: 48em) {
  .kontakt-raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .kontakt-raster .platzhalter {
    grid-column: 1 / -1;
  }
}

/* Routen-Button (Google Maps) in der Adresskarte: hell mit rostroter Umrandung */
.route {
  margin-top: var(--abstand-m);
}

.knopf--route {
  gap: 0.75rem;
  border-color: var(--farbe-marke);
  background: var(--farbe-creme);
  color: var(--farbe-marke);
}

.knopf--route:hover {
  border-color: var(--farbe-marke-dunkel);
  background: var(--farbe-creme-dunkel);
  color: var(--farbe-marke-dunkel);
}

.route-symbol {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
}

.karte .route-hinweis {
  margin-top: var(--abstand-xs);
  color: var(--farbe-text-hell);
  font-size: 0.95rem;
}

/* ---------- Kontaktkarte „Termin vereinbaren“ ---------- */

.kontaktkarte {
  padding: var(--abstand-l) var(--abstand-m);
  text-align: center;
}

.kontaktkarte h3 {
  margin-bottom: 0.25rem;
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2rem);
}

.kontaktkarte .kontaktkarte-unterzeile {
  margin-bottom: var(--abstand-s);
  font-size: 1.1rem;
}

.kontaktkarte .kontaktkarte-text {
  max-width: 30rem;
  margin: 0 auto var(--abstand-m);
}

/* Großer Button: gleiche Breite, Höhe und Rundung überall */
.knopf--gross {
  width: 100%;
  max-width: 24rem;
  min-height: 3.5rem;
  gap: 0.75rem;
  border-radius: var(--radius-gross);
  font-size: 1.15rem;
}

.knopf--gross .knopf-icon {
  width: 1.6em;
  height: 1.6em;
}

/* Schmale Bildschirme: etwas kompakter, damit beide Buttons einzeilig und gleich hoch bleiben */
@media (max-width: 30em) {
  .knopf--gross {
    gap: 0.5rem;
    padding-inline: 0.9rem;
    font-size: 1rem;
  }

  .knopf--gross .knopf-icon {
    width: 1.4em;
    height: 1.4em;
  }
}

.kontaktkarte .kontaktkarte-hinweis {
  margin: var(--abstand-s) 0 0;
  color: var(--farbe-text-hell);
}

.trenner {
  margin: var(--abstand-m) 0;
  border: 0;
  border-top: 1px solid var(--farbe-trenner);
}

/* In der Kontaktkarte zentriert */
.kontaktkarte .knopf-stapel {
  align-items: center;
  margin-top: 0;
}

/* Facebook: bewusst zurückhaltend */
.kontaktkarte .kontaktkarte-social {
  margin: 0;
}

/* Als helle Pille erkennbar, aber deutlich zurückhaltender als der WhatsApp-Button */
.kontaktkarte-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--bedienflaeche);
  padding: 0.35rem 1.1rem;
  border: 1px solid var(--farbe-facebook-rand);
  border-radius: 999px;
  background: var(--farbe-facebook-hell);
  color: var(--farbe-facebook-text);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
}

.kontaktkarte-social a:hover {
  background: var(--farbe-facebook-hover);
  color: var(--farbe-facebook-text);
  text-decoration: underline;
}

.facebook-symbol {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--farbe-facebook);
}

.extern-symbol {
  flex: none;
}

/* ---------- Platzhalter (fehlende Angaben) ---------- */

.platzhalter {
  padding: var(--abstand-s) var(--abstand-m);
  border: 2px dashed var(--farbe-platzhalter-rand);
  border-radius: var(--radius);
  background: var(--farbe-platzhalter-flaeche);
}

.platzhalter > :last-child {
  margin-bottom: 0;
}

.platzhalter strong:first-child {
  color: #7a4a00;
}

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */

.textseite {
  padding-block: var(--abstand-l) var(--abstand-xl);
}

.textseite .inhalt {
  max-width: var(--text-breite);
  padding: var(--abstand-m);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
}

@media (min-width: 48em) {
  .textseite .inhalt {
    padding: var(--abstand-l);
  }
}

.textseite h2 {
  margin-top: var(--abstand-l);
  padding-top: var(--abstand-m);
  border-top: 1px solid var(--farbe-rand);
}

.textseite h3 {
  margin-top: var(--abstand-m);
  color: var(--farbe-marke);
}

.textseite h4 {
  margin-top: var(--abstand-m);
  margin-bottom: var(--abstand-xs);
}

.textseite a {
  overflow-wrap: anywhere;
}

/* ---------- Fußbereich ---------- */

.site-footer {
  padding-block: var(--abstand-l);
  background: var(--farbe-footer);
  color: var(--farbe-footer-text);
}

.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--abstand-s) var(--abstand-l);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--farbe-footer-text);
}

.site-footer a:hover {
  color: var(--farbe-akzent);
}

.site-footer :focus-visible {
  outline-color: var(--farbe-akzent);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--abstand-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bedienflaeche);
}