/* ============================================================
   Sharpa — Ärzte Page Styles (B2B)
   Used by: aerzte.html
   Tonalität: sachlich, strukturiert, knapp.
   ============================================================ */

/* ---------- HERO ---------- */
.aerzte-hero {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 6rem clamp(1.25rem,4vw,2rem) clamp(3rem,6vw,5rem);
  position: relative;
  overflow: hidden;
  background: var(--creme);
}
.aerzte-hero-bg { position: absolute; inset: 0; }
.aerzte-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.aerzte-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(250,249,246,.96) 0%, rgba(250,249,246,.88) 45%, rgba(240,235,225,.55) 75%, rgba(240,235,225,.2) 100%);
}
@media (max-width: 768px) {
  .aerzte-hero-bg::after { background: linear-gradient(180deg, rgba(250,249,246,.94) 0%, rgba(250,249,246,.85) 55%, rgba(240,235,225,.55) 100%); }
}
.aerzte-hero .container { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; }
.aerzte-hero-content { max-width: 720px; }
.aerzte-hero-content h1 {
  color: var(--petrol);
  margin: 1rem 0 1.5rem;
  line-height: 1.15;
}
.aerzte-hero-sub {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--text-dark);
  margin-bottom: 2rem;
  max-width: 600px;
}

/* ---------- AUSGANGSLAGE ---------- */
.ausgangslage { background: var(--bg-light); }
.ausgangslage .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.ausgangslage-text { max-width: 560px; }
.ausgangslage-text h2 { margin: .75rem 0 1.25rem; }
.ausgangslage-img { border-radius: 12px; overflow: hidden; }
.ausgangslage-img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .ausgangslage .split { grid-template-columns: 1fr; gap: 2rem; }
  .ausgangslage-img { order: -1; }
  .ausgangslage-img img { min-height: 220px; height: 240px; }
}

/* ---------- SERVICES (Prozessübernahme) ---------- */
.services { background: var(--creme); }
.services-intro {
  max-width: 640px;
  color: var(--text-dark);
  margin-top: .25rem;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}
@media (max-width: 900px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  background: var(--bg-light);
  border: 1px solid var(--bg-medium);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  transition: border-color .2s, transform .2s;
}
.service-card:hover { border-color: var(--petrol); transform: translateY(-2px); }
.service-icon {
  width: 40px;
  height: 40px;
  color: var(--petrol);
  margin-bottom: 1rem;
}
.service-card h3 {
  font-size: 1.05rem;
  color: var(--text-black);
  margin-bottom: .6rem;
  line-height: 1.3;
}
.service-card p {
  font-size: .925rem;
  color: var(--text-dark);
  line-height: 1.6;
  margin: 0;
}

/* ---------- PRINCIPLES (B2B-Variante, hell) ---------- */
.aerzte-principles { background: var(--bg-light); }
.principle-list {
  list-style: none;
  counter-reset: none;
  margin: 3rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 820px;
}
.principle-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1.75rem;
  align-items: flex-start;
  padding: 1.75rem;
  background: var(--creme);
  border-radius: 12px;
}
.principle-number {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 2rem;
  color: var(--amber);
  line-height: 1;
}
.principle-body h3 {
  font-size: 1.1rem;
  margin-bottom: .5rem;
  color: var(--text-black);
}
.principle-body p {
  font-size: .95rem;
  color: var(--text-dark);
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 560px) {
  .principle-item { grid-template-columns: 1fr; gap: .5rem; padding: 1.5rem; }
  .principle-number { font-size: 1.6rem; }
}

/* ---------- DASHBOARD (Patientendossier) ---------- */
.dashboard { background: var(--creme); }
.dashboard .label { color: var(--amber); }
.dashboard h2 { margin-top: .75rem; }
.dashboard-body {
  max-width: 680px;
  color: var(--text-dark);
  margin-top: .25rem;
}
.dashboard-frame {
  margin: 3rem 0 0;
  padding: 0;
}
.dashboard-frame img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--bg-medium);
  background: var(--bg-light);
  box-shadow: 0 6px 28px rgba(43,42,39,.06);
}
.dashboard-frame figcaption {
  font-size: .825rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 1rem;
  max-width: 720px;
  line-height: 1.55;
}

/* ---------- ABLAUF (4 Schritte) ---------- */
.ablauf { background: var(--bg-light); }
.ablauf-steps {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .ablauf-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .ablauf-steps { grid-template-columns: 1fr; } }

.ablauf-step {
  background: var(--creme);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
}
.ablauf-step-number {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--amber);
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: .02em;
}
.ablauf-step h3 {
  font-size: 1.05rem;
  color: var(--text-black);
  margin-bottom: .5rem;
  line-height: 1.3;
}
.ablauf-step p {
  font-size: .9rem;
  color: var(--text-dark);
  line-height: 1.6;
  margin: 0;
}

/* ---------- KONTAKT ---------- */
.kontakt { background: var(--creme); }
.kontakt-inner { max-width: 640px; margin: 0 auto; }
.kontakt-header { text-align: center; margin-bottom: 2.5rem; }
.kontakt-header h2 { margin: .75rem 0 .75rem; }
.kontakt-body {
  color: var(--text-dark);
  max-width: 560px;
  margin: 0 auto;
}

.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: rgba(250,249,246,.6);
  padding: 2rem 1.75rem;
  border-radius: 12px;
  border: 1px solid var(--bg-medium);
}
.kontakt-form[hidden] { display: none; }
.kontakt-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-black);
  margin-bottom: .35rem;
}
.kontakt-form .optional-hint {
  font-weight: 400;
  color: var(--text-muted);
}
.kontakt-form input,
.kontakt-form textarea {
  width: 100%;
  padding: .7rem .9rem;
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-dark);
  background: var(--bg-light);
  border: 1.5px solid var(--bg-medium);
  border-radius: 8px;
  transition: border-color .2s;
  resize: vertical;
}
.kontakt-form input:focus,
.kontakt-form textarea:focus {
  outline: none;
  border-color: var(--petrol);
}
.kontakt-form .btn-primary {
  width: 100%;
  max-width: 280px;
  margin: .5rem auto 0;
}

.kontakt-success {
  background: var(--bg-light);
  border: 1px solid var(--success);
  border-left: 4px solid var(--success);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  text-align: center;
}
.kontakt-success h3 {
  color: var(--text-black);
  margin-bottom: .75rem;
}
.kontakt-success p {
  color: var(--text-dark);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}