/* =========================================================
   TOABAI QUALITY FOUNDATION · v1.0
   Globale, vorsichtige Qualitätsregeln für alle Ansichten.
   Keine seitenbezogenen Layout-Sonderfälle in dieser Datei.
========================================================= */

/* Robuste Grunddarstellung für Medien und lange Inhalte. */
img,
svg,
video,
canvas {
  max-width: 100%;
}

img,
video {
  height: auto;
}

main,
main section,
main article,
main aside,
main header,
main footer,
.tm-container,
.tm-page-inner,
.tm-page-inner-wide,
.tm-page-inner-narrow {
  min-width: 0;
}

/* Lange URLs und dynamische Inhalte dürfen kein Layout sprengen. */
main p,
main li,
main a,
main h1,
main h2,
main h3,
main h4 {
  overflow-wrap: break-word;
}

/* Preisangaben und andere bewusst zusammengehörige Kurztexte. */
.tm-nowrap,
.tm-price-nowrap {
  white-space: nowrap;
}

/* Einheitlicher Tastaturfokus auf interaktiven Elementen. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--tm-color-primary);
  outline-offset: 3px;
}

/* Verhindert unbeabsichtigte doppelte Fokusdarstellungen. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

/* Gemeinsame Mindestgröße für echte Hauptaktionen; Textlinks bleiben unberührt. */
.tm-button,
.tm-btn,
.tm-primary-button,
.tm-secondary-button,
.tm-cta-button {
  min-height: 48px;
}

/* Formularfelder nutzen überall dieselbe Schrift und bleiben mobil zoombeständig. */
input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  max-width: 100%;
}

/* Standardisierte Inhaltsbreite für Einleitungstexte. */
.tm-section-intro,
.tm-section-description {
  max-width: var(--tm-type-measure-lead, 58ch);
}

/* Tablet: globale Abstände reduzieren, ohne lokale Komponenten umzubauen. */
@media (min-width: 761px) and (max-width: 1024px) {
  :root {
    --tm-layout-gutter: 28px;
    --tm-section-space: 80px;
    --tm-section-space-sm: 64px;
    --tm-section-space-lg: 96px;
  }
}

/* Smartphone: verbindlicher horizontaler Seitenrand und kompakter Rhythmus. */
@media (max-width: 760px) {
  :root {
    --tm-layout-gutter: 20px;
    --tm-section-space: 64px;
    --tm-section-space-sm: 52px;
    --tm-section-space-lg: 76px;
  }

  .tm-button,
  .tm-btn,
  .tm-primary-button,
  .tm-secondary-button,
  .tm-cta-button {
    min-height: 50px;
  }
}

/* Sehr kleine Geräte erhalten weiterhin einen sicheren Seitenrand. */
@media (max-width: 380px) {
  :root {
    --tm-layout-gutter: 16px;
  }
}

/* Große Bildschirme: Inhalte bleiben bewusst bei 1280 px und werden nicht
   künstlich auseinandergezogen. */
@media (min-width: 1600px) {
  :root {
    --tm-layout-wide: 1280px;
  }
}

/* Barrierearme Bewegungsreduktion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   PHASE 2 · BUTTONS & FORMULARE
   Verbindliche Interaktionsregeln für gemeinsame Komponenten.
   Seitenspezifische Sonderformen bleiben erhalten.
========================================================= */

/* Gemeinsame Button-Basis: gleiche Höhe, Typografie und Zustände. */
.tm-btn,
.tm-button,
.tm-primary-button,
.tm-secondary-button,
.tm-cta-button,
.tm-form-submit {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--tm-radius-pill);
  font-family: var(--tm-font-family);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-weight-semibold);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tm-btn-primary,
.tm-btn-blue,
.tm-primary-button,
.tm-cta-button {
  background: var(--tm-color-primary);
  border-color: var(--tm-color-primary);
  color: var(--tm-color-white);
}

.tm-btn-primary:hover,
.tm-btn-blue:hover,
.tm-primary-button:hover,
.tm-cta-button:hover {
  background: var(--tm-color-primary-hover);
  border-color: var(--tm-color-primary-hover);
  color: var(--tm-color-white);
}

.tm-btn-light,
.tm-btn-secondary,
.tm-secondary-button {
  background: var(--tm-color-white);
  border-color: var(--tm-color-border-strong);
  color: var(--tm-color-text);
}

.tm-btn-light:hover,
.tm-btn-secondary:hover,
.tm-secondary-button:hover {
  background: var(--tm-color-surface-soft);
  border-color: #94a3b8;
  color: var(--tm-color-text);
}

.tm-btn:disabled,
.tm-button:disabled,
.tm-primary-button:disabled,
.tm-secondary-button:disabled,
.tm-cta-button:disabled,
.tm-form-submit:disabled,
[aria-disabled="true"].tm-btn,
[aria-disabled="true"].tm-button {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* Gemeinsame Formular-Basis nur für das zentrale Formsystem. */
.tm-form-system label,
.tm-form-field > span,
.tm-form-label {
  color: var(--tm-color-text);
  font-family: var(--tm-font-family);
  font-size: 0.92rem;
  font-weight: var(--tm-weight-semibold);
  line-height: 1.35;
}

.tm-form-system input[type="text"],
.tm-form-system input[type="email"],
.tm-form-system input[type="tel"],
.tm-form-system input[type="url"],
.tm-form-system input[type="search"],
.tm-form-system input[type="number"],
.tm-form-system select,
.tm-form-system textarea {
  width: 100%;
  border: 1px solid var(--tm-color-border-strong);
  border-radius: 16px;
  background: var(--tm-color-white);
  color: var(--tm-color-text);
  font-family: var(--tm-font-family);
  font-size: 1rem;
  font-weight: var(--tm-weight-normal);
  box-shadow: var(--tm-shadow-xs);
}

.tm-form-system input[type="text"],
.tm-form-system input[type="email"],
.tm-form-system input[type="tel"],
.tm-form-system input[type="url"],
.tm-form-system input[type="search"],
.tm-form-system input[type="number"],
.tm-form-system select {
  min-height: 58px;
  padding: 0 18px;
}

.tm-form-system textarea {
  min-height: 142px;
  padding: 16px 18px;
  line-height: 1.6;
  resize: vertical;
}

.tm-form-system input::placeholder,
.tm-form-system textarea::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.tm-form-system input:hover,
.tm-form-system select:hover,
.tm-form-system textarea:hover {
  border-color: #94a3b8;
}

.tm-form-system input:focus,
.tm-form-system select:focus,
.tm-form-system textarea:focus {
  outline: none;
  border-color: var(--tm-color-primary);
  box-shadow: var(--tm-focus-ring);
}

.tm-form-system input[aria-invalid="true"],
.tm-form-system select[aria-invalid="true"],
.tm-form-system textarea[aria-invalid="true"],
.tm-form-system .is-invalid {
  border-color: var(--tm-color-danger);
  background: var(--tm-color-danger-soft);
}

.tm-form-system input:disabled,
.tm-form-system select:disabled,
.tm-form-system textarea:disabled {
  background: #f1f5f9;
  color: var(--tm-color-subtle);
  cursor: not-allowed;
}

.tm-form-system select {
  cursor: pointer;
}

.tm-form-system input[type="checkbox"],
.tm-form-system input[type="radio"] {
  accent-color: var(--tm-color-primary);
}

.tm-form-system .tm-form-submit {
  width: 100%;
  min-height: 58px;
  margin-top: 4px;
}

/* Such- und Checkformulare behalten ihre horizontale Form auf großen Screens,
   erhalten aber dieselben Bedienhöhen. */
.tm-check-form input[type="text"],
.tm-check-form input[type="url"],
.tm-check-form input[type="email"],
.tm-check-form input[type="search"] {
  min-height: 54px;
  font: inherit;
}

@media (max-width: 760px) {
  .tm-btn,
  .tm-button,
  .tm-primary-button,
  .tm-secondary-button,
  .tm-cta-button,
  .tm-form-submit {
    min-height: 52px;
    padding-inline: 22px;
  }

  .tm-form-system input[type="text"],
  .tm-form-system input[type="email"],
  .tm-form-system input[type="tel"],
  .tm-form-system input[type="url"],
  .tm-form-system input[type="search"],
  .tm-form-system input[type="number"],
  .tm-form-system select {
    min-height: 52px;
    font-size: 16px;
  }

  .tm-form-system textarea {
    min-height: 120px;
    font-size: 16px;
  }
}


/* =========================================================
   QUALITY PASS · PHASE 3 · KARTEN UND OBERFLÄCHEN
   Bestehende helle Karten werden an gemeinsame Oberflächen-
   Tokens angebunden. Spezialkarten und dunkle Bereiche bleiben
   bewusst unangetastet.
========================================================= */

.tm-price-card,
.tm-info-box,
.tm-care-box,
.tm-person-trust-card,
.tm-contact-form-wrap {
  border-color: var(--tm-color-border);
  border-radius: var(--tm-card-radius);
  background-color: var(--tm-color-surface);
  box-shadow: var(--tm-card-shadow);
}

.tm-price-card,
.tm-info-box,
.tm-care-box {
  overflow: clip;
}

.tm-price-card > :first-child,
.tm-info-box > :first-child,
.tm-care-box > :first-child {
  margin-top: 0;
}

.tm-price-card > :last-child,
.tm-info-box > :last-child,
.tm-care-box > :last-child,
.tm-person-trust-content > :last-child {
  margin-bottom: 0;
}

/* Nur tatsächlich interaktive Karten bewegen sich. */
a.tm-card,
a.tm-service-card,
a.tm-price-card {
  transition: transform var(--tm-transition), border-color var(--tm-transition), box-shadow var(--tm-transition);
}

a.tm-card:hover,
a.tm-service-card:hover,
a.tm-price-card:hover {
  border-color: rgba(37, 99, 235, .22);
  box-shadow: var(--tm-card-shadow-hover);
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  :root {
    --tm-card-radius: 20px;
    --tm-card-padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.tm-card:hover,
  a.tm-service-card:hover,
  a.tm-price-card:hover {
    transform: none;
  }
}

/* =========================================================
   QUALITY PASS · PHASE 5 · ABSCHNITTSRHYTHMUS
   Vereinheitlicht vertikale Abstände, ohne Hero-, Report- und
   Website-Check-Sonderlayouts pauschal zu überschreiben.
========================================================= */
:root {
  --tm-section-space: clamp(5rem, 7vw, 6.5rem);
  --tm-section-space-sm: clamp(3.75rem, 5.5vw, 4.75rem);
  --tm-section-space-lg: clamp(6rem, 8.5vw, 7.75rem);
  --tm-section-head-gap: clamp(2rem, 3.5vw, 3rem);
  --tm-content-stack-gap: clamp(1.5rem, 2.6vw, 2.25rem);
  --tm-action-gap: clamp(1.75rem, 3vw, 2.5rem);
}

/* Alte Seitensektionen werden in denselben Rhythmus überführt. */
body .tm-maint-section,
body .tm-web-section {
  padding-top: var(--tm-section-space);
  padding-bottom: var(--tm-section-space);
}

body .tm-web-mini-section {
  padding-top: var(--tm-section-space-sm);
  padding-bottom: var(--tm-section-space-sm);
}

/* Abschnittsköpfe: ein gemeinsamer Abstand zum folgenden Inhalt. */
body .tm-section-head,
body .tm-section-head-center,
body .tm-section-header,
body .tm-section-header-center {
  margin-bottom: var(--tm-section-head-gap);
}

/* Direkte Inhaltsblöcke erhalten einen stabilen vertikalen Fluss. */
.tm-page-inner > .tm-section-actions,
.tm-page-inner-wide > .tm-section-actions,
.tm-layout-content > .tm-section-actions,
.tm-layout-wide > .tm-section-actions {
  margin-top: var(--tm-action-gap);
}

.tm-section-actions {
  gap: 1rem;
}

/* Abstände zwischen typischen Inhaltsgruppen, ohne Kartengitter zu verändern. */
.tm-page-section .tm-section-head + .tm-grid-2,
.tm-page-section .tm-section-head + .tm-grid-3,
.tm-page-section .tm-section-head + .tm-grid-4,
.tm-page-section .tm-section-head-center + .tm-grid-2,
.tm-page-section .tm-section-head-center + .tm-grid-3,
.tm-page-section .tm-section-head-center + .tm-grid-4,
.tm-maint-section .tm-section-head + [class*="grid"],
.tm-web-section .tm-section-head + [class*="grid"] {
  margin-top: 0;
}

/* Redaktionelle Flächen bleiben kompakter als Verkaufssektionen. */
.tm-article-body-section,
.tm-legal-content-section,
.tm-related-section {
  padding-top: var(--tm-section-space-sm);
  padding-bottom: var(--tm-section-space-sm);
}

/* Große CTA-Abschlüsse dürfen etwas mehr Luft behalten. */
.tm-final-cta-section,
.tm-cta-section {
  padding-top: var(--tm-section-space-lg);
  padding-bottom: var(--tm-section-space-lg);
}

@media (max-width: 767px) {
  :root {
    --tm-section-space: 4.25rem;
    --tm-section-space-sm: 3.25rem;
    --tm-section-space-lg: 5rem;
    --tm-section-head-gap: 1.75rem;
    --tm-action-gap: 1.5rem;
  }

  body .tm-maint-section,
  body .tm-web-section {
    padding-top: var(--tm-section-space);
    padding-bottom: var(--tm-section-space);
  }

  .tm-section-actions {
    align-items: stretch;
  }
}

@media (min-width: 1600px) {
  :root {
    --tm-section-space: 7rem;
    --tm-section-space-sm: 5rem;
    --tm-section-space-lg: 8rem;
  }
}