/* CLAUDE: footer.css – Footer-Styles (3-Spalten-Grid, Copyright, Social Media) */
/* CLAUDE: Enthält: .site-footer, .footer-grid, .footer-column, .footer-bottom */
/* CLAUDE: Ändern: Für andere Farben CSS-Variablen in base.css anpassen */

/* ========== Footer Base ========== */

/* CLAUDE: .site-footer – Basis-Styles für Footer (Hintergrund Graphite, Text White) */
/* CLAUDE: Ändern: Für andere Hintergrundfarbe background-color anpassen */
.site-footer {
  background-color: #594834;
  color: #fff;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-lg);
}

/* CLAUDE: .footer-inner – maximale Breite 1440px, zentriert, mit seitlichem Abstand */
/* CLAUDE: Ändern: Für volle Breite .content-full verwenden */
.footer-inner {
  /* content-constrained wird bereits in layout.css definiert */
  /* CLAUDE: padding-inline: Seitenabstand für bessere Lesbarkeit */
  /* CLAUDE: Ändern: Für mehr Abstand z.B. clamp(2rem, 4vw, 3rem) verwenden */
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* ========== Footer-Grid ========== */

/* CLAUDE: .footer-grid – 3-Spalten-Grid (Desktop), 2-Spalten (Tablet), 1-Spalte (Mobile) */
/* CLAUDE: Ändern: Für 4 Spalten .grid-4 verwenden */
.footer-grid {
  /* grid-3 wird bereits in layout.css definiert */
  margin-bottom: var(--space-2xl);
  /* CLAUDE: align-items: start verhindert vertikale Zentrierung der Grid-Items */
  /* CLAUDE: Ändern: Für vertikale Zentrierung auf "center" setzen */
  align-items: start;
  /* CLAUDE: justify-items: start macht Grid-Items linksbündig innerhalb ihrer Grid-Zelle */
  /* CLAUDE: Ändern: Für zentrierte Items auf "center" setzen */
  justify-items: start;
}

/* ========== Footer-Spalten ========== */

/* CLAUDE: .footer-column – Basis-Styles für Footer-Spalten */
/* CLAUDE: Ändern: Für andere Abstände padding anpassen */
.footer-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* CLAUDE: align-items: flex-start macht alle Inhalte linksbündig */
  /* CLAUDE: Ändern: Für zentrierte Ausrichtung auf "center" setzen */
  align-items: flex-start;
}

/* CLAUDE: .footer-title – H3-Überschriften in Footer-Spalten, Source Sans Pro SemiBold */
/* CLAUDE: Ändern: Für größere Überschriften clamp(1.25rem, ..., 1.5rem) setzen */
.footer-title {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem); /* 18–20px */
  font-weight: 600;
  color: var(--color-gold);
  margin-bottom: var(--space-sm); /* CLAUDE: 16px Abstand zwischen Überschrift und Inhalt */
  line-height: 1.3;
  /* CLAUDE: width: 100% verhindert Zentrierung durch Parent-Flexbox */
  width: 100%;
}

/* ========== Footer-Spalte 1 (Deutsche Denkmalimmobilien) ========== */

/* CLAUDE: Logo-Styles ENTFERNT – Logo wird nicht mehr im Footer angezeigt */
/* CLAUDE: Falls Logo wieder benötigt wird, siehe Git-History */

/* CLAUDE: .footer-column-header-link – Link-Wrapper für Spalten-Header */
/* CLAUDE: Ändern: Für andere Hover-Effekte opacity anpassen */
.footer-column-header-link {
  text-decoration: none;
  transition: opacity var(--transition-fast);
  display: inline-block;
}

/* CLAUDE: Header-Link Hover – reduziert Opacity auf 0.9 */
.footer-column-header-link:hover {
  opacity: 0.9;
}

/* CLAUDE: .footer-column-header-link .footer-title – entfernt margin-bottom für Header-Links */
/* CLAUDE: Ändern: Für anderen Abstand margin-bottom anpassen */
.footer-column-header-link .footer-title {
  margin-bottom: 0;
}

/* CLAUDE: .footer-contact-list – <ul> Reset, vertikale Liste für Kontaktdaten */
/* CLAUDE: Ändern: Für andere Abstände gap anpassen */
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs); /* 8px zwischen Kontaktdaten */
  font-size: clamp(0.9375rem, 1.2vw, 1rem); /* 15–16px */
  line-height: 1.6;
  /* CLAUDE: align-items: flex-start macht alle Items linksbündig */
  /* CLAUDE: Ändern: Für zentrierte Ausrichtung auf "center" setzen */
  align-items: flex-start;
  /* CLAUDE: width: 100% verhindert Zentrierung */
  width: 100%;
}

/* CLAUDE: .footer-contact-list li – Kontaktdaten-Einträge */
/* CLAUDE: Ändern: Für Icons Flex-Struktur hinzufügen */
.footer-contact-list li {
  /* CLAUDE: margin: 0 entfernt alle Margins */
  margin: 0;
  /* CLAUDE: padding: 0 entfernt alle Paddings */
  padding: 0;
}

/* CLAUDE: .footer-contact-list a – Link-Styles für Telefon/E-Mail */
/* CLAUDE: Ändern: Für andere Hover-Farbe color anpassen */
.footer-contact-list a {
  text-decoration: none;
  /* CLAUDE: margin: 0 entfernt alle Margins */
  margin: 0;
  /* CLAUDE: padding: 0 entfernt alle Paddings */
  padding: 0;
  transition: opacity var(--transition-fast);
  /* Farbe wird via Inline-Style aus Customizer gesetzt */
}

/* CLAUDE: Link Hover – reduziert Opacity, fügt Unterstreichung hinzu */
.footer-contact-list a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* ========== Footer-Spalte 2 (Schnelllinks) ========== */

/* CLAUDE: .footer-menu – <ul> Reset, vertikale Liste */
/* CLAUDE: Ändern: Für andere Abstände gap anpassen */
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* CLAUDE: align-items: flex-start macht alle Menu-Items linksbündig */
  /* CLAUDE: Ändern: Für zentrierte Ausrichtung auf "center" setzen */
  align-items: flex-start;
  /* CLAUDE: width: 100% verhindert Zentrierung */
  width: 100%;
}

/* CLAUDE: .footer-menu li – Liste-Items ohne Padding/Margin */
/* CLAUDE: Entfernt alle möglichen Standard-Abstände von li-Elementen */
.footer-menu li {
  margin: 0;
  padding: 0;
  /* CLAUDE: width: auto verhindert volle Breite, nutzt nur Content-Breite */
  width: auto;
}

/* CLAUDE: .footer-menu a – Link-Styles, Source Sans Pro Regular, color white */
/* CLAUDE: Ändern: Für andere Hover-Farbe color anpassen */
.footer-menu a {
  font-size: clamp(0.9375rem, 1.2vw, 1rem); /* 15–16px */
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  /* CLAUDE: display: inline-block ermöglicht transform statt padding für Slide-Effekt */
  display: inline-block;
  /* CLAUDE: margin: 0 entfernt alle Margins */
  margin: 0;
  /* CLAUDE: padding: 0 entfernt alle Paddings - Links sind exakt linksbündig */
  padding: 0;
  /* CLAUDE: transition: Smooth-Animation für Farbe und Transform */
  transition: color var(--transition-fast), transform var(--transition-fast);
}

/* CLAUDE: Link Hover – color Gold, transform statt padding für Slide-Effekt */
/* CLAUDE: Ändern: Für stärkeren Effekt translateX(12px) verwenden */
.footer-menu a:hover {
  color: var(--color-gold);
  /* CLAUDE: transform: translateX verschiebt Link nach rechts ohne Layout zu beeinflussen */
  transform: translateX(8px);
}

/* ========== Footer-Spalte 3 (Social Media) ========== */

/* CLAUDE: .footer-social-list – <ul> Reset, vertikale Liste */
/* CLAUDE: Ändern: Für horizontale Liste flex-direction: row; setzen */
.footer-social-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* CLAUDE: align-items: flex-start macht alle Social-Items linksbündig */
  /* CLAUDE: Ändern: Für zentrierte Ausrichtung auf "center" setzen */
  align-items: flex-start;
  /* CLAUDE: width: 100% verhindert Zentrierung */
  width: 100%;
}

/* CLAUDE: .footer-social-item – Basis-Styles für Social-Links */
/* CLAUDE: Ändern: Für andere Styles weitere Klassen hinzufügen */
.footer-social-item {
  /* CLAUDE: margin: 0 entfernt alle Margins */
  margin: 0;
  /* CLAUDE: padding: 0 entfernt alle Paddings */
  padding: 0;
}

/* CLAUDE: .footer-social-item a – Link-Styles für Social-Media */
/* CLAUDE: Ändern: Für andere Hover-Farbe background-color anpassen */
.footer-social-item a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: clamp(0.9375rem, 1.2vw, 1rem); /* 15–16px */
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  /* CLAUDE: padding: vertikales Padding für Klickfläche, kein horizontales Padding */
  /* CLAUDE: Ändern: Für mehr Klickfläche var(--space-xs) var(--space-sm) verwenden */
  padding: var(--space-xs) 0;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

/* CLAUDE: Link Hover – Background Gold, Text Graphite */
.footer-social-item a:hover {
  color: var(--color-graphite);
  background-color: var(--color-gold);
}

/* CLAUDE: .footer-social-icon – Uploadbare Icons für Social Media (statt Emojis) */
/* CLAUDE: Ändern: Für größere Icons width/height auf 32px erhöhen */
.footer-social-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ========== Footer-Bottom ========== */

/* CLAUDE: .footer-bottom – Copyright-Zeile, zentriert, border-top */
/* CLAUDE: Ändern: Für linksbündigen Copyright text-align: left; setzen */
.footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}

/* CLAUDE: .footer-copyright – Copyright-Text, Source Sans Pro Regular */
/* CLAUDE: Ändern: Für andere Farbe color anpassen */
.footer-copyright {
  font-size: clamp(0.875rem, 1vw, 0.9375rem); /* 14–15px */
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: var(--space-sm);
}

/* CLAUDE: .footer-legal-menu – horizontale Liste für Impressum/Datenschutz */
/* CLAUDE: Ändern: Für vertikale Liste flex-direction: column; setzen */
.footer-legal-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* CLAUDE: Legal-Menu Links – kleine Font-Size, dezente Farbe */
.footer-legal-menu a {
  font-size: clamp(0.8125rem, 1vw, 0.875rem); /* 13–14px */
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-legal-menu a:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

/* ========== Responsive Footer ========== */

/* CLAUDE: Media Query für Tablet – 2-Spalten-Grid */
/* CLAUDE: Ändern: Für anderen Breakpoint max-width anpassen */
@media (max-width: 1023px) {
  .footer-grid {
    /* grid-3 wird automatisch zu 2 Spalten bei ≤1023px (siehe layout.css) */
  }

  .footer-bottom {
    text-align: left;
  }

  .footer-legal-menu {
    justify-content: flex-start;
  }
}

/* CLAUDE: Media Query für Mobile – 1-Spalten-Grid */
/* CLAUDE: Ändern: Für anderen Breakpoint max-width anpassen */
@media (max-width: 767px) {
  .footer-grid {
    /* grid-3 wird automatisch zu 1 Spalte bei ≤767px (siehe layout.css) */
  }

  .footer-social-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .footer-bottom {
    text-align: center;
  }

  .footer-legal-menu {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}