/* ==========================================================================
   123doc.hu – Landingpage „Orvosoknak és klinikáknak" (/hu/orvosoknak/)
   Seitenspezifische Styles, gekapselt unter main.doctor-network-page.
   Farben: Elementor-Kit-Tokens aus kit.css (Fallbacks identisch).
   Schrift: Inter (lokal, fonts.css, inkl. Latin-Extended für ő/ű).
   ========================================================================== */

main.doctor-network-page {
  --dn-ink: var(--e-global-color-text, #000000);
  --dn-blue: var(--e-global-color-primary, #3D76BB);   /* Logo-Blau */
  --dn-green: var(--e-global-color-5fcf3f1, #67B55C);  /* Logo-Grün */
  --dn-cyan: var(--e-global-color-7518c7a, #D1F1ED);
  --dn-cyan-deep: #A9DFE6;
  --dn-grey: var(--e-global-color-872487f, #F8F8F8);
  --dn-line: #E1E7EB;
  --dn-muted: #4A5560;
  --dn-border: #5F6F7C;
  --dn-max: 1160px;
  --dn-pad: 20px;
  --dn-anchor: 104px;
  display: block;
  background: #fff;
  color: var(--dn-ink);
  font-family: 'Inter', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 768px) {
  main.doctor-network-page { --dn-pad: 40px; --dn-anchor: 136px; }
}

/* ---------- Grundtypografie ---------------------------------------------- */

main.doctor-network-page h1,
main.doctor-network-page h2,
main.doctor-network-page h3 {
  color: var(--dn-ink);
  font-family: 'Inter', Arial, sans-serif;
  margin: 0;
}

main.doctor-network-page h1 {
  font-size: clamp(2.4rem, 7.2vw, 4.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

main.doctor-network-page h2 {
  font-size: clamp(1.85rem, 3.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 0.6em;
}

main.doctor-network-page h3 {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.4em;
}

main.doctor-network-page p {
  margin: 0 0 1em;
}

main.doctor-network-page p:last-child {
  margin-bottom: 0;
}

main.doctor-network-page a {
  color: var(--dn-blue);
}

main.doctor-network-page .dn-lead {
  font-size: 1.15rem;
  line-height: 1.55;
}

main.doctor-network-page .dn-note {
  font-size: 0.98rem;
  color: var(--dn-muted);
  max-width: 720px;
  margin-top: 28px;
}

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

.dn-wrap {
  max-width: var(--dn-max);
  margin: 0 auto;
  padding: 0 var(--dn-pad);
}

.dn-section {
  padding: 56px 0;
  scroll-margin-top: var(--dn-anchor);
}

@media (min-width: 900px) {
  .dn-section { padding: 88px 0; }
}

.dn-section--cyan { background: var(--dn-cyan); }
.dn-section--grey { background: var(--dn-grey); }

.dn-section-head {
  max-width: 780px;
  margin-bottom: 36px;
}

.dn-section-head p {
  max-width: 64ch;
}

.dn-two {
  display: grid;
  gap: 28px;
}

.dn-two--center {
  align-items: center;
}

.dn-grid {
  display: grid;
  gap: 28px;
}

@media (min-width: 700px) {
  .dn-grid { grid-template-columns: 1fr 1fr; gap: 36px 48px; }
}

@media (min-width: 900px) {
  .dn-two { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .dn-two--center { align-items: center; }
}

/* ---------- Buttons und Links ------------------------------------------- */

main.doctor-network-page .dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--dn-blue);
  color: #fff;
  font-family: 'Inter', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  padding: 15px 26px;
  border: 2px solid var(--dn-blue);
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Hover-Schema (Nutzervorgabe 2026-09-22): auf weißem Grund Blau -> Hellblau,
   Schrift Weiß -> Blau; auf hellblauem Grund Blau -> Weiß, Schrift Weiß -> Blau. */
main.doctor-network-page .dn-btn:hover,
main.doctor-network-page .dn-btn:focus-visible {
  background: var(--dn-cyan);
  border-color: var(--dn-cyan);
  color: var(--dn-blue);
}

main.doctor-network-page .dn-section--cyan .dn-btn:hover,
main.doctor-network-page .dn-section--cyan .dn-btn:focus-visible {
  background: #fff;
  border-color: #fff;
  color: var(--dn-blue);
}

main.doctor-network-page .dn-link {
  font-weight: 700;
  color: var(--dn-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

main.doctor-network-page .dn-link:hover {
  color: var(--dn-ink);
}

main.doctor-network-page .dn-btn:focus-visible,
main.doctor-network-page .dn-link:focus-visible,
main.doctor-network-page a:focus-visible,
main.doctor-network-page summary:focus-visible,
main.doctor-network-page input:focus-visible,
main.doctor-network-page textarea:focus-visible,
main.doctor-network-page button:focus-visible {
  outline: 3px solid var(--dn-blue);
  outline-offset: 3px;
}

/* ---------- Hero ---------------------------------------------------------- */
/* Aufbau wie Flyer-Seite 1: Eyebrow, H1, grüne Linie, Subline, darunter das
   Netzwerkmotiv über die volle Inhaltsbreite (Patient im Zentrum), danach
   Text und Handlungsaufforderung. Die helle Cyanfläche reicht vom oberen Rand
   hinter die rechte Hälfte von Headline und Motiv, dazu der schwarze Strich. */

.dn-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 40px 0 52px;
}

.dn-hero::after {
  content: "";
  position: absolute;
  top: 26px;
  right: var(--dn-pad);
  width: 64px;
  height: 6px;
  background: var(--dn-ink);
}

.dn-hero .dn-wrap {
  position: relative;
}

.dn-eyebrow {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

main.doctor-network-page .dn-hero h1 {
  max-width: 19ch;
}

.dn-h1-line {
  display: block;
  width: 72px;
  height: 4px;
  background: var(--dn-green);
  margin: 18px 0;
}

.dn-subline {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

.dn-hero-media {
  position: relative;
  margin: 26px 0 30px;
}

/* Cyanfläche: von der Oberkante des Heros bis in das obere Drittel des Motivs,
   rechts bis zum Bildschirmrand (Hero schneidet ab). Liegt hinter allem Text. */
.dn-hero-media::before {
  content: "";
  position: absolute;
  left: 56%;
  right: -100vw;
  top: -2000px;
  bottom: 38%;
  background: var(--dn-cyan);
  z-index: -1;
}

.dn-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(8, 14, 18, 0.12);
}

.dn-hero-body p {
  max-width: 62ch;
}

.dn-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 26px 0 18px;
}

.dn-trust {
  font-size: 0.95rem;
  color: var(--dn-muted);
}

@media (min-width: 900px) {
  .dn-hero { padding: 48px 0 80px; }
  .dn-hero::after { top: 40px; width: 88px; }
  .dn-eyebrow { margin-bottom: 18px; }
  .dn-h1-line { margin: 20px 0; }
  .dn-hero-media { margin: 34px 0 40px; }
  .dn-hero-media::before { left: 54%; }
}

/* ---------- Zitat / Akzent ---------------------------------------------- */

.dn-quote {
  border-left: 4px solid var(--dn-green);
  background: var(--dn-cyan);
  padding: 22px 26px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0;
}

.dn-accent {
  border-left: 5px solid var(--dn-green);
  padding: 6px 0 6px 18px;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.4;
  margin: 32px 0 0;
  max-width: 720px;
}

/* ---------- Vorteile 01–03 ---------------------------------------------- */

.dn-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dn-line);
}

.dn-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 8px 18px;
  padding: 28px 0;
  border-bottom: 1px solid var(--dn-line);
}

.dn-num {
  font-size: clamp(3.4rem, 10vw, 7rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--dn-cyan-deep);
}

.dn-row h3 {
  font-size: 1.35rem;
  margin: 4px 0 10px;
}

.dn-row p {
  max-width: 60ch;
  margin: 0;
}

@media (min-width: 700px) {
  .dn-row {
    grid-template-columns: 150px 1fr;
    gap: 32px;
    padding: 40px 0;
    align-items: start;
  }
}

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

.dn-item::before {
  content: "";
  display: block;
  width: 36px;
  height: 5px;
  background: var(--dn-ink);
  margin-bottom: 14px;
}

.dn-item h3 {
  margin-bottom: 8px;
}

.dn-item p {
  margin: 0;
  max-width: 56ch;
}

.dn-box {
  background: var(--dn-grey);
  border-radius: 10px;
  padding: 22px 26px;
  margin-top: 32px;
  max-width: 820px;
}

.dn-section--grey .dn-box,
.dn-section--cyan .dn-box {
  background: #fff;
}

/* ---------- Listen -------------------------------------------------------- */

.dn-principles,
.dn-profile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dn-principles li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
}

.dn-principles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 10px;
  background: var(--dn-blue);
}

.dn-profile-list {
  display: grid;
  gap: 14px 32px;
  margin: 24px 0;
  max-width: 900px;
}

@media (min-width: 700px) {
  .dn-profile-list { grid-template-columns: 1fr 1fr; }
}

.dn-profile-list li {
  position: relative;
  padding: 14px 16px 14px 52px;
  background: var(--dn-grey);
  border-radius: 10px;
  font-weight: 600;
}

.dn-profile-list li::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--dn-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%233D76BB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

/* ---------- Schritte ------------------------------------------------------ */

.dn-steps {
  list-style: none;
  counter-reset: dn-step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

@media (min-width: 900px) {
  .dn-steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}

.dn-steps li {
  counter-increment: dn-step;
}

.dn-steps li::before {
  content: counter(dn-step);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dn-cyan);
  color: var(--dn-ink);
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.dn-steps p {
  margin: 0;
  max-width: 44ch;
}

/* ---------- FAQ ----------------------------------------------------------- */

.dn-faq {
  max-width: 860px;
  border-top: 1px solid var(--dn-line);
}

.dn-faq details {
  border-bottom: 1px solid var(--dn-line);
}

.dn-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 44px 18px 0;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
}

.dn-faq summary::-webkit-details-marker {
  display: none;
}

.dn-faq summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 3px solid var(--dn-blue);
  border-bottom: 3px solid var(--dn-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.dn-faq details[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.dn-faq details p {
  margin: 0 0 20px;
  max-width: 70ch;
}

/* ---------- Kontakt und Formular ---------------------------------------- */

.dn-contact-grid {
  display: grid;
  gap: 40px;
}

@media (min-width: 900px) {
  .dn-contact-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: start;
  }
}

main.doctor-network-page .dn-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.dn-form-hint {
  font-size: 0.95rem;
  color: var(--dn-muted);
}

.dn-field-row {
  display: grid;
  gap: 16px;
}

@media (min-width: 600px) {
  .dn-field-row { grid-template-columns: 1fr 1fr; }
}

main.doctor-network-page .dn-field label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
}

main.doctor-network-page .dn-form input.dn-input,
main.doctor-network-page .dn-form textarea.dn-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  color: var(--dn-ink);
  background: #fff;
  border-width: 2px;
  border-style: solid;
  border-color: var(--dn-border);
  border-radius: 8px;
  box-shadow: none;
  padding: 12px 14px;
  min-height: 48px;
}

main.doctor-network-page .dn-form textarea.dn-input {
  resize: vertical;
  min-height: 140px;
}

main.doctor-network-page .dn-form input.dn-input:focus,
main.doctor-network-page .dn-form textarea.dn-input:focus {
  border-color: var(--dn-blue);
}

.dn-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

main.doctor-network-page .dn-form .dn-check input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 3px 0 0;
  accent-color: var(--dn-blue);
}

main.doctor-network-page .dn-check label {
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Honeypot-Feld: für Menschen unsichtbar, für Bots vorhanden */
.dn-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dn-contact-alt h3 {
  margin-bottom: 12px;
}

.dn-mail {
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  font-weight: 800;
  overflow-wrap: anywhere;
  margin-bottom: 20px;
}

main.doctor-network-page .dn-mail a {
  color: var(--dn-ink);
  text-decoration: underline;
  text-decoration-color: var(--dn-blue);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.dn-contact-alt .dn-btn {
  margin-bottom: 18px;
}

.dn-back {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/* Rückmeldung von forms.js (Klassen aus custom.css) */
.dn-contact-form .elementor-message {
  margin-top: 16px;
}

.dn-section--cyan .elementor-message-success {
  background: #fff;
}

/* ---------- Bewegung reduzieren / Druck ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  main.doctor-network-page * {
    transition: none !important;
  }
}

@media print {
  .dn-hero::before,
  .dn-hero::after {
    display: none;
  }
}