/* =========================================================
   HUNDETRAINER MIT HERZ
   COMPONENTS
   Wiederverwendbare Komponenten
   ========================================================= */


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  min-height: 3rem;
  padding: 0.8rem 1.4rem;

  border: 2px solid transparent;
  border-radius: var(--radius-md);

  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;

  cursor: pointer;

  transition:
    transform var(--duration-normal) var(--ease-standard),
    background-color var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard),
    color var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}


/* Primäre Markenhandlung – Türkis */

.btn--primary {
  color: var(--color-text-light);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--primary:hover {
  color: var(--color-text-light);
  background: #127777;
  border-color: #127777;
}


/* Ruhigere ergänzende Handlung – Blau */

.btn--secondary {
  color: var(--color-text-light);
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.btn--secondary:hover {
  color: var(--color-text-light);
  background: var(--color-brand-deep);
  border-color: var(--color-brand-deep);
}


/* WhatsApp – ausschließlich für WhatsApp */

.btn--whatsapp {
  color: #ffffff;
  background: var(--color-whatsapp);
  border-color: var(--color-whatsapp);
}

.btn--whatsapp:hover {
  color: #ffffff;
  filter: brightness(0.92);
}


/* E-Mail – ruhige blaue Variante */

.btn--email {
  color: var(--color-text-light);
  background: var(--color-brand-medium);
  border-color: var(--color-brand-medium);
}

.btn--email:hover {
  color: var(--color-text-light);
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}


/* Weiterführende Handlung
   Der endgültige Orangeton wird als eigener
   Design-Token ergänzt, sobald der verbindliche
   HEX-Wert festgelegt ist.
*/

.btn--more {
  color: var(--color-text-light);
  background: var(--color-action-next);
  border-color: var(--color-action-next);
}


/* Outline-Variante */

.btn--outline {
  color: var(--color-brand-primary);
  background: transparent;
  border-color: currentColor;
}

.btn--outline:hover {
  color: var(--color-text-light);
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}


/* Button-Gruppen */

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}


/* =========================================================
   KARTEN
   ========================================================= */

.card {
  min-width: 0;

  padding: var(--component-padding);

  color: var(--color-text);
  background: var(--color-surface-white);

  border: 1px solid rgba(36, 55, 70, 0.10);
  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-sm);
}

.card h2,
.card h3,
.card h4,
.card p {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.card h3 {
  max-width: 100%;
  margin-bottom: var(--space-3);

  overflow-wrap: break-word;
  hyphens: auto;
}

.card p:last-child {
  margin-bottom: 0;
}


/* Helle Karte */

.card--light {
  background: var(--color-brand-light);
}


/* Markenblaue Karte */

.card--brand {
  color: var(--color-text-light);
  background: var(--color-brand-primary);
  border-color: rgba(255, 255, 255, 0.10);
}

.card--brand h3,
.card--brand p {
  color: inherit;
}


/* Mittlere blaue Karte */

.card--medium {
  color: var(--color-text-light);
  background: var(--color-brand-medium);
  border-color: rgba(255, 255, 255, 0.10);
}


/* Dunkle Karte */

.card--deep {
  color: var(--color-text-light);
  background: var(--color-brand-deep);
  border-color: rgba(255, 255, 255, 0.10);
}


/* Interaktive Karte */

.card--interactive {
  transition:
    transform var(--duration-normal) var(--ease-standard),
    box-shadow var(--duration-normal) var(--ease-standard),
    border-color var(--duration-normal) var(--ease-standard);
}

.card--interactive:hover {
  transform: translateY(var(--lift-interactive));
  box-shadow: var(--shadow-lg);
}

.card--interactive:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}


/* Wenn eine ganze Karte ein Link ist */

a.card {
  display: block;
  text-decoration: none;
}

a.card:hover {
  color: inherit;
}


/* Karten-Icon */

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 3rem;
  height: 3rem;

  margin-bottom: var(--space-4);

  color: var(--color-accent);
}


/* Kartenbild */

.card__media {
  overflow: hidden;
  margin:
    calc(var(--component-padding) * -1)
    calc(var(--component-padding) * -1)
    var(--space-5);

  border-radius:
    var(--radius-xl)
    var(--radius-xl)
    0
    0;
}

.card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}


/* =========================================================
   FORMULARE
   ========================================================= */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-weight: var(--font-weight-semibold);
}

.form-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-brand-medium);
}

.form-field {
  width: 100%;
  min-height: 3rem;

  padding: 0.8rem 1rem;

  color: var(--color-text);
  background: var(--color-surface-white);

  border: 1px solid rgba(36, 55, 70, 0.28);
  border-radius: var(--radius-md);

  transition:
    border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-field {
  min-height: 9rem;
  resize: vertical;
}

.form-field:hover {
  border-color: var(--color-brand-medium);
}

.form-field:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}


/* Fehlerzustand */

.form-field[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-error {
  margin: 0;
  color: var(--color-error);
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);
}


/* Erfolg */

.form-success {
  color: var(--color-success);
}


/* Checkboxen */

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checkbox input {
  width: auto;
  margin-top: 0.3rem;
}


/* =========================================================
   HINWEISE UND INFORMATIONEN
   ========================================================= */

.notice {
  padding: var(--space-5);

  color: var(--color-text);
  background: var(--color-brand-light);

  border-left: 4px solid var(--color-brand-medium);
  border-radius: var(--radius-lg);
}

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


/* Information */

.notice--info {
  border-left-color: var(--color-accent);
}


/* Erfolg */

.notice--success {
  border-left-color: var(--color-success);
}


/* Warnung */

.notice--warning {
  border-left-color: var(--color-warning);
}


/* Fehler */

.notice--error {
  border-left-color: var(--color-error);
}


/* =========================================================
   ZITATE UND BESONDERE AUSSAGEN
   ========================================================= */

.quote {
  max-width: 50rem;
  margin-inline: auto;
  padding-block: var(--space-7);

  text-align: center;
}

.quote p {
  max-width: none;

  margin-bottom: var(--space-4);

  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}

.quote cite {
  display: block;

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--font-weight-medium);

  color: var(--color-brand-medium);
}


/* Persönlicher emotionaler Akzent */

.quote--accent p {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-regular);
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.2;
}


/* Zitat auf dunklem Hintergrund */

.quote--light,
.quote--light cite {
  color: var(--color-text-light);
}


/* =========================================================
   MEDIENRAHMEN
   ========================================================= */

.media-frame {
  overflow: hidden;

  background: var(--color-surface-white);

  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.media-frame img,
.media-frame video {
  width: 100%;
}


/* =========================================================
   RESPONSIVE BUTTONS
   ========================================================= */

@media (max-width: 35.999rem) {

  .button-group {
    flex-direction: column;
  }

  .button-group .btn {
    width: 100%;
  }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .btn:hover,
  .card--interactive:hover {
    transform: none;
  }

}