.elementor-36 .elementor-element.elementor-element-3762641{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-db8b032{width:100%;max-width:100%;}.elementor-36 .elementor-element.elementor-element-7d01a01{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-b756a3f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-4864a08{--spacer-size:50px;}.elementor-36 .elementor-element.elementor-element-f506309{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:1px;--padding-bottom:1px;--padding-left:1px;--padding-right:1px;}.elementor-36 .elementor-element.elementor-element-f506309:not(.elementor-motion-effects-element-type-background), .elementor-36 .elementor-element.elementor-element-f506309 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E5E7EB00;}.elementor-36 .elementor-element.elementor-element-adffb8d{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-a963ffe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-08c815c{padding:77px 77px 77px 77px;border-radius:7px 7px 7px 7px;box-shadow:2px 5px 10px 0px rgba(0,0,0,0.5);--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-field-group.recaptcha_v3-bottomleft, .elementor-36 .elementor-element.elementor-element-08c815c .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-36 .elementor-element.elementor-element-08c815c .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-36 .elementor-element.elementor-element-08c815c .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-36 .elementor-element.elementor-element-08c815c .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-field-type-html{padding-bottom:0px;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .e-form__buttons__wrapper__button-next{color:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-button[type="submit"]{color:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-36 .elementor-element.elementor-element-08c815c .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-36 .elementor-element.elementor-element-f972d53{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-36 .elementor-element.elementor-element-5b94f3f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(max-width:1024px){.elementor-36 .elementor-element.elementor-element-08c815c{padding:0px 0px 0px 0px;}}@media(min-width:768px){.elementor-36 .elementor-element.elementor-element-adffb8d{--width:50%;}.elementor-36 .elementor-element.elementor-element-a963ffe{--width:50%;}}/* Start custom CSS *//* =========================
   PC.DOC – Globales CSS
   Voraussetzungen:
   - Oberster Seiten-Container hat Klasse "pcdoc"
   - Hero-Container hat ID "start"
   - Buttons haben Klassen:
       • Jetzt anrufen:   btn btn-outline-primary
       • Sprechstunde:    btn btn-outline-neutral
   ========================= */

/* ----- Variablen ----- */
:root{
  --text:#111827; --heading:#0F172A;
  --red:#B00000; --red-dark:#990000;
  --muted:#6B7280; --border:#E5E7EB;
  --hero-blue:#F1F6FB; --surface:#FFFFFF; --card-bg:#F6F8FB;
  --radius:20px; --shadow:0 12px 28px rgba(17,24,39,.08);
  --container:1200px; --header-h:96px;
}

/* ----- Basis ----- */
html,body{height:100%}
body{
  margin:0; background:var(--surface); color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  line-height:1.7;
}
.pcdoc a{color:var(--heading); text-underline-offset:3px}
.pcdoc a:hover{color:var(--red)}
.pcdoc h1,.pcdoc h2,.pcdoc h3{color:var(--heading); line-height:1.2; margin:0 0 .6em}
.pcdoc h1{font-size:clamp(28px,4vw,48px); font-weight:800}
.pcdoc h2{font-size:clamp(24px,3vw,36px); font-weight:800}
.pcdoc h3{font-size:clamp(18px,2vw,22px); font-weight:800}
.pcdoc .container{max-width:var(--container); margin:0 auto; padding:0 20px}
.pcdoc section{padding:clamp(48px,6vw,80px) 0}
.lead{font-size:clamp(16px,1.6vw,20px)}
.muted{color:var(--muted)} .tiny{font-size:13px}
.divider{height:1px; background:var(--border); margin:24px 0}
.eyebrow{font-weight:700; letter-spacing:.02em; margin:0 0 8px}

/* ----- Grids ----- */
.grid{display:grid; gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ----- Karten/Boxen + Rundungen erzwingen ----- */
.pcdoc :is(.card, .award,
  #about .grid > *, #hilfe .grid > *, #ablauf .grid > *,
  #preise .grid > *, #sprechstunde .grid > *, #faq details){
  background:var(--card-bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  padding:24px !important;
  overflow:hidden;
  background-clip:padding-box;
}
/* Elementor-Ebenen, die den Hintergrund tragen, ebenfalls abrunden */
.pcdoc :is(.e-con, .elementor-section, .elementor-container,
           .elementor-column, .elementor-widget-container){
  border-radius:var(--radius) !important;
  overflow:hidden;
}
/* Bilder übernehmen die Rundung */
.pcdoc :is(.card, .award) img,
.pcdoc .elementor-widget-image img{ border-radius:inherit !important; }

/* ----- Hero (ohne Bild) ----- */
.pcdoc .hero{
  position:relative; min-height:100vh; display:flex; align-items:center; background:none!important; margin-top:0;
}
.pcdoc .hero::before{
  content:""; position:absolute; z-index:-2; left:50%; transform:translateX(-50%);
  top:calc(-1 * var(--header-h)); height:calc(100% + var(--header-h)); width:100vw;
  background:linear-gradient(180deg,var(--hero-blue) 0%, #FFFFFF 100%); pointer-events:none;
}
/* explizit: kein nachträgliches Bild */
.pcdoc .hero::after{ content:none !important; }
.pcdoc .hero .container>*:first-child{margin-top:0}

/* Eyebrow im Hero rot (CI) */
.pcdoc #start .eyebrow{ color:var(--red) !important; font-weight:800; }

/* ----- Buttons (Pill-Style) ----- */
.pcdoc .btn, .pcdoc a.btn, .pcdoc button.btn{
  border-radius:999px; padding:14px 22px; font-weight:800; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:10px;
  border:2px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
  box-shadow:none !important;
}
.pcdoc .btn svg{ width:18px; height:18px; flex:0 0 18px; color:currentColor; stroke:currentColor; fill:none; }
.pcdoc .btn:active{ transform:translateY(1px); }
.pcdoc .btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(176,0,0,.18); }

/* Primär (Jetzt anrufen): Outline rot, Hover vollrot */
.pcdoc #start .btn-outline-primary{
  color:var(--red) !important; border-color:var(--red) !important; background:transparent !important;
}
.pcdoc #start .btn-outline-primary:hover,
.pcdoc #start .btn-outline-primary:focus{
  background:var(--red) !important; color:#fff !important; border-color:var(--red) !important;
}
.pcdoc #start .btn-outline-primary:hover svg{ color:#fff !important; }

/* Neutral (Sprechstunde): dezentes Grau, Hover dunkler */
.pcdoc #start .btn-outline-neutral{
  color:var(--heading) !important; border-color:#CBD5E1 !important; background:#F1F5F9 !important;
}
.pcdoc #start .btn-outline-neutral:hover,
.pcdoc #start .btn-outline-neutral:focus{
  background:#E2E8F0 !important; border-color:#94A3B8 !important; color:var(--heading) !important;
}

/* ----- Platzhalter-Bild (nur für Demo-Kacheln) ----- */
.pcdoc .ph{
  aspect-ratio:16/10; border-radius:14px; margin-bottom:12px;
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%),
             repeating-linear-gradient(45deg,#eef2f7,#eef2f7 10px,#fafbfc 10px,#fafbfc 20px);
  border:1px solid var(--border); display:grid; place-items:center; color:#9CA3AF; font-size:13px;
}

/* ----- Preise (rot) ----- */
.pcdoc .price{font-size:30px; line-height:1.1; font-weight:900; color:var(--red)}
.pcdoc .price .from, .pcdoc .price .currency{color:var(--red); font-weight:900}
.pcdoc .price small{font-size:.6em; color:var(--muted); font-weight:700}

/* ----- Abschnittstrenner (dezente Linie) ----- */
.pcdoc section + section{ border-top:1px solid var(--border); }




/* ===== Variablen ===== */
:root{
  --text:#111827; --heading:#0F172A;
  --red:#B00000; --muted:#6B7280; --border:#E5E7EB;
  --card-bg:#F6F8FB; --radius:20px; --shadow:0 12px 28px rgba(17,24,39,.08);
}

/* ===== Basis (optional, falls gebraucht) ===== */
.pcdoc a{color:var(--heading);text-underline-offset:3px}
.pcdoc a:hover{color:var(--red)}

/* Eyebrow im Hero (Widget-Klasse 'eyebrow' setzen) */
#start .eyebrow{ color:var(--red) !important; font-weight:800; }

/* ===== Buttons im Hero (kein HTML-Anpassen nötig) ===== */
#start .elementor-button{
  border-radius:999px;
  padding:14px 22px;
  font-weight:800;
  letter-spacing:.01em;
  border:2px solid transparent;
  transition:background-color .15s,color .15s,border-color .15s,transform .06s;
  box-shadow:none;
}
#start .elementor-button:active{ transform:translateY(1px); }
#start .elementor-button .elementor-button-icon svg{
  width:18px;height:18px;stroke:currentColor;fill:none;color:currentColor;
}

/* Erster Button = "Jetzt anrufen": Outline rot -> Hover rot/weiß */
#start .elementor-button:first-of-type{
  color:var(--red);
  background:transparent;
  border-color:var(--red);
}
#start .elementor-button:first-of-type:hover,
#start .elementor-button:first-of-type:focus{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}

/* Zweiter Button = "Sprechstunde": Grau -> dunkleres Grau bei Hover */
#start .elementor-button:nth-of-type(2){
  color:var(--heading);
  background:#F1F5F9;
  border-color:#CBD5E1;
}
#start .elementor-button:nth-of-type(2):hover,
#start .elementor-button:nth-of-type(2):focus{
  background:#E2E8F0;
  border-color:#94A3B8;
}

/* ===== Kacheln schön rund + sauberer Hintergrund ===== */
.pcdoc :is(.card, #about .grid > *, #hilfe .grid > *, #ablauf .grid > *,
           #preise .grid > *, #sprechstunde .grid > *, #faq details){
  background:var(--card-bg) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow) !important;
  padding:24px !important;
  overflow:hidden;
  background-clip:padding-box;
}
/* Elementor-Ebenen, die den Hintergrund tragen, auch abrunden */
.pcdoc :is(.e-con, .elementor-section, .elementor-container,
           .elementor-column, .elementor-widget-container){
  border-radius:var(--radius) !important;
  overflow:hidden;
}





/* Award-Kachel als Link stylen */
.pcdoc-reviews .award{
  text-decoration: none;           /* keine Unterstreichung */
  color: inherit;                  /* Textfarbe wie normal */
  transition: border-color .15s, box-shadow .15s, transform .06s;
}
.pcdoc-reviews .award:hover{
  border-color: var(--red);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}






/* === PATCH: Hero-Bild wieder aktivieren + Glas-Fenster ================== */

/* Bild nur oben anzeigen (überschreibt das frühere content:none !important) */
.pcdoc #start.hero::after{
  content:"" !important;
  position:absolute;
  z-index:-1;
  left:50%; transform:translateX(-50%);
  top:0;                                  /* nicht negativ, damit nichts abgeschnitten wird */
  width:100vw;
  height:clamp(260px, 52vh, 520px);       /* nur oberer Bereich */
  background:url('/wp-content/uploads/2025/09/pc.doc.hero.png') center top / cover no-repeat;
  opacity:.55;                            /* Bild leicht transparent */
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Glas-Look für den Textblock im Hero.
   Greift auf den vorhandenen Container – kein HTML-Update nötig. */
.pcdoc #start .container{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(20px,4vw,34px);
}

/* etwas mehr Abstand nach oben, wenn gewünscht (optional) */
@media (min-width:761px){
  .pcdoc #start .container{ margin-top:20px }
}/* End custom CSS */