/* =========================================================
   ProCreaDent – Global Styles
   ========================================================= */

/* Farben / Variablen */
:root{
  /* ProCreaDent Farben */
  --pcd-blue: #0b61b2;
  --pcd-red:  #d71920;
  --bs-primary:var(--pcd-blue);
}

/* Badges auf Markenblau */
.badge.text-bg-primary{ background-color: var(--pcd-blue,#0b61b2)!important; }

/* schöneres scrollen und offset für die navbar*/
html { scroll-behavior: smooth; }
#kontakt { scroll-margin-top: 90px; } /* Höhe der Navbar ca. */

/* Navbar: aktive Links in Blau + dezente Unterstreichung */
.navbar .nav-link{ position:relative; }
.navbar .nav-link.active,
.navbar .nav-link:hover,
.navbar .nav-link:focus{ color: var(--pcd-blue) !important; }
.navbar .nav-link::after{
  content:""; position:absolute; left:.6rem; right:.6rem; bottom:.25rem; height:2px;
  background: transparent; transition: all .2s ease; border-radius:2px;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{ background: var(--pcd-blue); }


/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--pcd-blue);
  --bs-btn-border-color: var(--pcd-blue);
  box-shadow: 0 .5rem 1rem rgba(11,97,178,.15);
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 .75rem 1.25rem rgba(11,97,178,.18); }
.btn-outline-primary{
  --bs-btn-color: var(--pcd-blue);
  --bs-btn-border-color: var(--pcd-blue);
  --bs-btn-hover-bg: var(--pcd-blue);
  --bs-btn-hover-border-color: var(--pcd-blue);
  --bs-btn-hover-color: #fff;
}

/* Cards Hover */
.card{ transition: transform .2s ease, box-shadow .2s ease; }
.card:hover{ transform: translateY(-4px); box-shadow: 0 1rem 1.5rem rgba(0,0,0,.08); }

/* Hero (Hintergrund-Overlay + „Impressionen“-Grid) */
.hero-brand{
  position: relative; color: inherit;
  background: radial-gradient(80rem 30rem at -10% -20%, rgba(11,97,178,.15), transparent 60%),
              radial-gradient(50rem 20rem at 110% 10%, rgba(215,25,32,.08), transparent 60%);
}
.hero-brand .container{ position: relative; }
.hero-bg::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-size: cover; background-position:center;
  opacity:.18; filter: saturate(.9) contrast(1.05);
}
.hero-content{ position:relative; z-index:1; }

/* Galerie */
.gallery-grid img{
  width:100%; height:200px; object-fit:cover;
  border-radius: .75rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.06);
}
.gallery-grid .col-6, .gallery-grid .col-md-4{ margin-bottom:1rem; }

/* Downloads (Wix-Style) */
.download-cat .list-group-item{ padding-top:.9rem; padding-bottom:.9rem; }
.download-cat .display-6{ line-height:1; letter-spacing:.02em; }



/* Portfolio hover overlay (wie StartBootstrap Creative) */
.portfolio-box {
  position: relative;
  display: block;
}
.portfolio-box .portfolio-box-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  transition: all .2s ease;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: rgba(11,97,178,.65); /* pcd-blue mit Transparenz */
}
.portfolio-box:hover .portfolio-box-caption { opacity: 1; }
.portfolio-box .project-category {
  font-size: .85rem;
  text-transform: uppercase;
}
.portfolio-box .project-name {
  font-size: 1.1rem;
  font-weight: 600;
}


/* === Footer in ProCreaDent-Blau === */
.footer-pcd{
  background: var(--pcd-blue, #0b61b2);
  color: #fff;
}
.footer-pcd h5,
.footer-pcd h6{ color:#fff; }

.footer-pcd address,
.footer-pcd .list-unstyled li{ color: rgba(255,255,255,.92); }

.footer-pcd a{
  color: rgba(255,255,255,.92);
  text-decoration: none;
}
.footer-pcd a:hover{ color:#fff; text-decoration: underline; }

.footer-pcd .bi{ color:#fff; opacity:.9; }
.footer-pcd .bi:hover{ opacity:1; }

.footer-pcd .text-muted,
.footer-pcd .opacity-75{ color: rgba(255,255,255,.75) !important; }

.footer-pcd hr{ border-color: rgba(255,255,255,.25); }

/* Buttons im Footer auf Dunkel */
.footer-pcd .btn-outline-light{
  --bs-btn-color:#fff;
  --bs-btn-border-color:rgba(255,255,255,.8);
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-border-color:#fff;
  --bs-btn-hover-color: var(--pcd-blue, #0b61b2);
  box-shadow: 0 .35rem .9rem rgba(0,0,0,.15);
}


/* Weißes Formular im blauen Footer: wieder dunkle Texte/Farben */
.footer-pcd .footer-form{
  color:#212529;                 /* Standard-Text */
}
.footer-pcd .footer-form h6,
.footer-pcd .footer-form .form-label{
  color:#212529;                 /* Überschrift + Labels dunkel */
}
.footer-pcd .footer-form .text-muted{
  color:#6c757d !important;      /* Muted wieder grau */
}
.footer-pcd .footer-form a{
  color: var(--pcd-blue, #0b61b2);
  text-decoration: underline;    /* Links im Formular sichtbar */
}
.footer-pcd .footer-form a:hover{
  color:#094f90;
}


/* === ProCreaDent Navbar (dunkel) === */
:root{ --pcd-blue:#0b61b2; }

.navbar-pcd{
  background: var(--pcd-blue);
  /* leichte Schattenlinie für Tiefe */
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
  /* Bootstrap Navbar-Variablen für dunkle Schriftfarben */
  --bs-navbar-color: rgba(255,255,255,.9);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255,255,255,.35);
}

/* Logo-Badge: lässt das Logo auf Blau „stehen“ */
.navbar .brand-chip{
  background:#fff;
  border-radius:.5rem;
  padding:.25rem .5rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
}
.navbar .brand-chip img{
  display:block;
  height:80px; /* ggf. anpassen */
}

/* Unterstreichung & Farbe der Links auf dunkler Navbar */
.navbar-pcd .nav-link{
  position:relative;
  color: rgba(255,255,255,.9) !important;
}
.navbar-pcd .nav-link:hover,
.navbar-pcd .nav-link:focus,
.navbar-pcd .nav-link.active{ color:#fff !important; }
.navbar-pcd .nav-link::after{
  content:"";
  position:absolute; left:.6rem; right:.6rem; bottom:.35rem; height:2px;
  background: transparent; transition: all .2s ease; border-radius:2px;
}
.navbar-pcd .nav-link:hover::after,
.navbar-pcd .nav-link.active::after{ background:#fff; }

/* Toggler-Icon etwas deutlicher */
.navbar-pcd .navbar-toggler{
  border-color: rgba(255,255,255,.35);
}
.navbar-pcd .navbar-toggler:focus{ box-shadow: 0 0 0 .15rem rgba(255,255,255,.25); }

.navbar .brand-chip{ background:transparent; box-shadow:none; padding:0; }
.navbar .brand-chip img{ filter: drop-shadow(0 .25rem .5rem rgba(0,0,0,.25)); }

.navbar-pcd{
  background: linear-gradient(180deg, #0b61b2 0%, #d8dbde 100%);
}



/** Overlap **/
/* Stärke des Überlappens */
:root{ --overlap: clamp(3rem, 8vw, 7rem); }

/* getrennte Padding-Definition, damit wir bottom gezielt 0 setzen können */
.section-stack{
  position: relative;
  padding-top: clamp(2rem, 6vw, 5rem);
  padding-bottom: clamp(2rem, 6vw, 5rem);
}

/* Modifier: unten kein Padding (für die Bild-Section!) */
.section-stack.flush-bottom{ padding-bottom: 0 !important; }

/* Overlap robust: hochziehen + negativen Abstand auf die nächste Section */
.section-overlap{
  position: relative;
  z-index: 3;
  transform: translateY(calc(var(--overlap) * -1));
  margin-bottom: calc(var(--overlap) * -1);
}

@media (max-width: 991.98px){
  .section-overlap{
    transform: none;
    margin-bottom: 0;
  }
}

/* Rahmen & Karte – kannst du so lassen */
.frame-img{
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.25rem 2rem rgba(0,0,0,.15);
}
.frame-img img{ width:100%; height:100%; object-fit:cover; }

.overlap-card{
  background: rgba(255,255,255,.96);
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
}


/* =========================================================
   ABOUT VIKTOR – Bilder + Karte + Typo
   ========================================================= */
.about-viktor{ position: relative; padding-block: clamp(2rem,6vw,5rem); }

.about-viktor .frame-img{ border-radius: 1rem; overflow: hidden; box-shadow: 0 1.25rem 2rem rgba(0,0,0,.15); }
.about-viktor .frame-img img{ width:100%; height:100%; object-fit:cover; }

/* Aspect Ratios für die beiden Bilder */
.about-viktor .ratio-portrait { --bs-aspect-ratio: 150%; } /* Chef-Foto */
.about-viktor .ratio-ambient  { --bs-aspect-ratio: 120%; } /* Hochkant links */

/* Textkarte */
.about-viktor .about-card{
  position: relative; z-index: 2;
  background: #f8f7f4;
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.10);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
  max-width: 48rem;
}
.about-viktor .about-card.about-card--wide{
  max-width: 62rem;                       /* breiter */
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
@media (min-width: 992px){
  .about-viktor .about-card.overlap-lg{
    margin-top: -6rem;                     /* Überlappung nach oben */
    z-index: 3;
    box-shadow: 0 1.5rem 3rem rgba(0,0,0,.12);
  }
}

/* Typo */
.about-viktor .eyebrow{
  letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:#8a7f73;
}
.about-viktor .display-like{
  font-weight:600; letter-spacing:.01em;
  font-size: clamp(2rem, 4.5vw, 3rem);
}

/* Mobile: linkes Ambient-Bild ausblenden, wenn zu eng */
@media (max-width: 991.98px){
  .about-viktor .ambient-col{ display: none !important; }
}




/*Über mich Timeline*/

/* === Über mich Timeline === */
.timeline-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.timeline-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 1rem;
}

.timeline-step .timeline-content {
  width: 9rem;
  text-align: center;
}

.timeline-step .inner-circle {
  border-radius: 1.5rem;
  height: 1rem;
  width: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--pcd-blue);
}

.timeline-step .inner-circle::before {
  content: "";
  background-color: var(--pcd-blue);
  display: inline-block;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
  opacity: 0.35;
  position: absolute;
  z-index: -1;
}

@media (min-width: 768px) {
  .timeline-step:not(:last-child)::after {
    content: "";
    border-top: 0.25rem dotted var(--pcd-blue);
    width: 3.5rem;
    position: absolute;
    left: 7.5rem;
    top: 0.4rem;
  }
  .timeline-step:not(:first-child)::before {
    content: "";
    border-top: 0.25rem dotted var(--pcd-blue);
    width: 3.5rem;
    position: absolute;
    right: 7.5rem;
    top: 0.4rem;
  }
}

.timeline-content p {
  margin-bottom: 0;
}

/* Galerie-Thumbnails */
#team .gallery-item { transition: transform .2s ease, box-shadow .2s ease; }
#team .gallery-item:hover { transform: translateY(-2px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12); }


/* Service-Karten: flachere Bildhöhe */
.service .thumb-ratio { 
  --bs-aspect-ratio: 45%;   /* ~ 2.2:1 – flacher als 16:9 */
}
/* ab Desktop noch etwas flacher (optional) */
@media (min-width: 992px){
  .service .thumb-ratio { --bs-aspect-ratio: 40%; } /* ~ 2.5:1 */
}


/* LEISTUNGEN */

/* Thumbs etwas niedriger, damit die Karten nicht so groß sind */
.thumb-ratio{ --bs-aspect-ratio: 56%; }   /* ~16:9 -> etwas flacher */


/* Box für den Downloadbereich */
.downloads-box{
  max-width: 980px;            /* schmaler machen */
  border-radius: 1rem;
  background: #fff;
}

/* Listen im Downloadbereich kompakter */
.download-cat .list-group-item{
  padding: .85rem 0;
  border: 0;                   /* Trennlinien übernehmen wir unten */
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.download-cat .list-group-item:last-child{
  border-bottom: 0;
}

/* Ziffer links (01/02/...) etwas dezenter auf Weiß */
.download-cat .display-6{
  color: var(--pcd-blue);
  opacity: .85;
}

/* OVERRIDES – ganz am Ende der styles.css platzieren */
.section-soft{
  /* deutlichere, markenkonforme Tönung */
  background: linear-gradient(180deg, rgba(11,97,178,.08) 0%, rgba(11,97,178,.04) 100%) !important;
}

.section-soft .card.service{
  /* optional: bisschen Lift auf farbigem Grund */
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.06);
}

#downloads{ background-color: var(--bs-tertiary-bg) !important; }
.downloads-box{
  max-width: 980px;
  border-radius: 1rem;
  background:#cfddf4;
}



.gallery-box{ background:#fff; border-radius:1rem; box-shadow:0 1rem 2rem rgba(0,0,0,.08); }
.portfolio-box img{ display:block; width:100%; height:auto; }
.portfolio-box .caption-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:.75rem 1rem; color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0, rgba(0,0,0,.65) 85%);
  opacity:0; transition:.2s ease;
  border-bottom-left-radius:.5rem; border-bottom-right-radius:.5rem;
}
.portfolio-box:hover .caption-overlay{ opacity:1; }


/* Werdegang – Lesbarkeit & Akzente */
.career-story .dropcap::first-letter{
  float:left; font-size:3.2rem; line-height:1; padding-right:.35rem;
  font-weight:700; color: var(--pcd-blue);
}
.career-story .callout{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem; padding:.65rem .75rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.04);
}
.career-story .callout .bi{ font-size:1.05rem; }

/* Fusion – weicher Kasten rechts */
.story-fusion .fusion-card{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.06);
}
.story-fusion .fusion-card .bi{ flex: 0 0 auto; margin-top:.15rem; }

/* ===== Beruflicher Werdegang (innerhalb Viktor-Karte) ===== */
.about-card .werdegang p { margin-bottom: 1rem; line-height: 1.65; }

.about-card .werdegang .dropcap::first-letter {
  float: left;
  font-size: 3.2rem;
  line-height: 1;
  padding-right: .35rem;
  font-weight: 700;
  color: var(--pcd-blue);
}

/* Kleine Akzent-Kästchen */
.about-card .callout {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .75rem;
  padding: .65rem .75rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
}

.about-card .callout .bi {
  color: var(--pcd-blue);
  flex-shrink: 0;
}

/* === Custom Toggle (statt Accordion) === */
.career-toggle {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.04);
  overflow: hidden;
}

.btn-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: 1rem;
  color: #212529;
  cursor: pointer;
  transition: background-color .2s ease;
}
.btn-toggle:hover { background: rgba(11,97,178,.05); }
.btn-toggle .toggle-icon { transition: transform .3s ease; }

/* === Custom Toggle (statt Accordion) – veredelt === */
.career-toggle{
  border: 1px solid color-mix(in srgb, var(--pcd-blue) 22%, #0000);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .85rem 1.5rem rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}

/* feine linke Akzentleiste in Markenblau */
.career-toggle::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: .28rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pcd-blue) 92%, #fff) 0%, var(--pcd-blue) 100%);
  border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;
}

.btn-toggle{
  display: flex; align-items: center; gap: .75rem;
  width: 100%;
  background: none; border: none;
  text-align: left;
  padding: 1.1rem 1.25rem 1.1rem 1.4rem; /* etwas größerer Klickbereich */
  font-weight: 650; font-size: 1rem; color: #1f2833;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.btn-toggle:hover{ background: rgba(11,97,178,.06); }
.btn-toggle:focus-visible{
  outline: .18rem solid color-mix(in srgb, var(--pcd-blue) 35%, #fff);
  outline-offset: .15rem;
  border-radius: .6rem;
}
.btn-toggle .toggle-icon{ transition: transform .3s ease; opacity: .9; }

/* auf/zu Animation */
.career-content{
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .45s ease, opacity .3s ease, padding .3s ease;
  padding: 0 1.25rem;
}
.career-toggle.open .career-content{
  max-height: 2000px; opacity: 1; padding: 1.1rem 1.25rem 1.25rem;
}
.career-toggle.open .btn-toggle{ color: #0b61b2; }
.career-toggle.open .toggle-icon{ transform: rotate(180deg); }

/* kleine Info-Kästchen bleiben wie gehabt, nur Icon in Blau betonen */
.about-card .callout .bi{ color: var(--pcd-blue); }

/* — Dropcap „S“ wie gewünscht — */
.career-content .dropcap::first-letter{
  float: left;
  font-size: clamp(2.6rem, 5vw, 3.3rem);
  line-height: 1;
  padding-right: .35rem;
  font-weight: 800;
  color: var(--pcd-blue);  /* dein Markenblau */
  font-variant-numeric: lining-nums;
}

/* etwas mehr Zeilenhöhe im Text */
.career-content p{ line-height: 1.65; }

/* reduziert Bewegung für Nutzer mit Motion-Preference */
@media (prefers-reduced-motion: reduce){
  .career-content{ transition: none; }
  .btn-toggle .toggle-icon{ transition: none; }
}



/* INDEX QM-Urkunde: dezenter Rahmen/Schimmer */
.qm-frame{
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.08);
  border: 1px solid rgba(11,97,178,.10);
}
.qm-frame img{
  transition: transform .25s ease;
}
.qm-lightbox:hover .qm-frame img{
  transform: scale(1.02);
}