/*
 * Eigene Ergänzungen zum ResuMine-Template.
 * normalize.css, webflow.css und resumine.css bleiben unverändert –
 * alle Anpassungen und neuen Komponenten stehen hier.
 */

/* ---------- Schriften (selbst gehostet, OFL; nur die tatsächlich genutzten Schnitte) ---------- */

@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: Martel; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/martel-latin-400-normal.woff2') format('woff2'); }

/* ---------- Farbwelt „Marine & Petrol“ ----------
   Abgeleitet vom Hero-Foto: Marine aus dem Pullover, Petrol als ruhiger Akzent für Flächen,
   Pills und Linien. Keine dritte Farbfamilie: Abstufungen des Petrol übernehmen Hover und Patent-Label.
   Hover-Logik: auf hellem Grund wird zu Marine abgedunkelt, auf dunklem Grund zu Eispetrol aufgehellt.
   Überschreibt die Template-Variablen; feste Farbwerte des Templates folgen direkt darunter. */

:root {
  --primary: #307e87;
  --primary-dark: #24626a;
  --primary-bright: #3f8c95;
  --primary-ice: #9cd6de;
  --secondary: #12293d;
  --secondary-raised: #193145;
  --secondary-deep: #0b1d2c;
  --secondary-line: #3a566d;
  --secondary-muted: #93a5b5;
  /* das Template nutzt --button-color für Hover auf hellem Grund */
  --button-color: var(--secondary);
}

.page-sticky-wrap {
  background-color: var(--secondary);
}

.sticky-page-title-wrap {
  background-color: var(--secondary-deep);
}

.sticky-title-link {
  color: var(--secondary-muted);
  border-bottom-color: var(--secondary-line);
}

.sticky-title-link.w--current {
  border-bottom-color: var(--primary);
}

.author-social-wrap {
  border-bottom-color: var(--secondary-line);
}

.knowledge-logo-wrap {
  background-color: var(--primary-dark);
}

.my-resume-section {
  background-color: var(--secondary-deep);
}

/* Jahres-Kästchen im Werdegang etwas heller als der Abschnitt, damit sie sich abheben */
.resume-sub-title-wrap {
  background-image: linear-gradient(110deg, #0000 12%, var(--secondary-raised) 27%);
}

.certification-section,
.certificate-line-break,
.certificate-link-wrap {
  background-color: var(--primary);
}

/* Hover auf dunklem Grund: aufhellen statt der Template-Zweitfarbe */
.certificate-title:hover,
.author-link:hover {
  color: var(--primary-ice);
}

.certificate-link-wrap:hover {
  background-color: var(--primary-bright);
}

.main-menu-link:hover {
  color: var(--primary);
}

/* ---------- Allgemein ---------- */

/* Weiches Scrollen übernimmt der Browser; webflow.js springt dank data-wf-scroll-motion="none" am <body>
   in einem Schritt (sonst glätten beide doppelt und ein Sprung dauert über 3 s) */
html {
  scroll-behavior: smooth;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.cv-popup,
.home-creative-close {
  cursor: pointer;
}

/* ---------- Hintergründe als WebP (gleiche Motive wie im Template, zusammen rund 40 % kleiner) ----------
   Linienmuster farbneutral (dunkel bzw. hell mit Transparenz), damit sie zu jeder Flächenfarbe passen */

.banner-cv {
  background-image: url('../images/bg-hero-lines.webp'), url('../images/bg-hero-paper.webp');
}

.knowledge-section {
  background-image: url('../images/deco-focus.svg'), url('../images/bg-focus-lines.webp');
}

.my-resume-section {
  background-image: url('../images/bg-career-lines.webp');
}

.certification-section {
  background-image: url('../images/bg-certificates-lines.webp');
}

/* ---------- Hero: Sprachumschalter ---------- */

.main-menu-link.w--current {
  color: var(--primary);
  font-weight: 600;
}

/* Ohne Hero-Popup bleibt der Sprachumschalter auch unter 992px sichtbar (Template blendet ihn dort aus) */
@media screen and (max-width: 991px) {
  .corporate-menu-wrap {
    display: flex;
  }
}

/* ---------- Sidebar ---------- */

.author-image {
  aspect-ratio: 1;
  object-fit: cover;
  height: auto;
  background-color: #e4e4e6;
}

/* width/height-Attribute gegen Layout-Sprünge; Höhe folgt der skalierten Breite */
.banner-author-image {
  height: auto;
}

/* Template-Logo neben der Sidebar entfernt: unter 992px trug es die Höhe der Leiste,
   an deren Unterkante der Menü-Button hängt (50px Padding + 61px Logo) */
@media screen and (max-width: 991px) {
  .cv-popup-flex {
    min-height: 111px;
  }
}

/* Social-Icons als SVG-Sprite: Farbe folgt dem Link, Hover wie die übrigen Links auf dunklem Grund */
.author-social-link {
  color: #fff;
  transition: color .2s;
}

.author-social-link:hover {
  color: var(--primary-ice);
}

.social-icon {
  display: block;
  fill: currentColor;
}

/* Abstand unter der E-Mail = Abstand Trennlinie → E-Mail (row-gap 20px) */
.author-wrap {
  padding-bottom: 20px;
}

/* Unter 1440px ist die Sidebar nur 300px breit: Name mit Innenabstand, darf umbrechen */
.author-title {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---------- Über mich: Lebenslauf-Button ---------- */

/* Im Template folgte der Button auf die (entfernte) Infobox; ohne sie reicht der Abstand
   der Textspalte (40px + Absatz), sonst klafft auf dem Desktop eine Lücke von 110px */
.about-signature-wrap {
  padding-top: 0;
}

/* Icon mit festem Abstand statt 15 %: gleiche Lage wie im Template bei „Download CV“,
   beim längeren „Lebenslauf herunterladen“ rutscht es sonst in den Text */
.creative-button.cv-download {
  background-image: url('../images/icon-download.svg');
  background-position: 25px 50%;
}

/* ---------- Werdegang: Timeline für beliebig viele Einträge ---------- */

/* Die Template-Linie endet per fester max-height (77 % / 83 %), abgestimmt auf 2–3 Einträge.
   main.js setzt die Höhe passend zum letzten Eintrag; ohne JS greift der Template-Wert. */
.resume-timeline-wrap.is-measured {
  max-height: none;
  bottom: auto;
}

/* Jahres-Kästen mit fester Breite, damit lange Institutionsnamen die Karten nicht verschieben;
   breit genug für „Uni Witten/Herdecke“ ohne Umbruch */
@media screen and (min-width: 992px) {
  .resume-sub-title-wrap {
    width: 220px;
  }
}

@media screen and (min-width: 1280px) {
  .resume-sub-title-wrap {
    width: 240px;
  }
}

/* Lange Komposita („Gesundheitswissenschaften“) dürfen umbrechen, sonst sprengen sie auf schmalen Screens das Raster */
.resume-content-wrap,
.publication-body {
  overflow-wrap: anywhere;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Einträge ohne Beschreibung: keine Trennlinie ins Leere */
.resume-college-title-wrap:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ---------- Zertifikate ---------- */

.certificate-issuer {
  color: #fff;
  letter-spacing: .08em;
  margin-bottom: 0;
  font-family: Martel, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
}

.certificate-title.no-link:hover {
  color: #fff;
}

@media screen and (min-width: 1280px) {
  .certificate-title {
    width: auto;
  }

  .certificate-wrap.certificate-third {
    grid-column-start: 2;
  }
}

@media screen and (min-width: 1440px) {
  .certificate-wrap.certificate-third {
    justify-self: end;
  }
}

/* ---------- Publikationen (ersetzt „Let's Talk“) ---------- */

.publication-list {
  grid-row-gap: 16px;
  flex-direction: column;
  max-width: 1100px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.publication-card {
  grid-column-gap: 40px;
  background-color: #f8f8f8;
  border-radius: 24px;
  align-items: flex-start;
  padding: 26px 32px 26px 36px;
  display: flex;
}

.publication-year {
  min-width: 70px;
  color: var(--primary);
  margin-bottom: 0;
  font-family: Martel, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
}

.publication-body {
  flex: 1;
  min-width: 0;
}

.publication-type {
  color: #fff;
  letter-spacing: .3em;
  text-transform: uppercase;
  background-color: var(--secondary);
  border-radius: 40px;
  padding: 3px 12px;
  font-size: 12px;
  line-height: 1.5;
  display: inline-block;
}

.publication-type.is-journal {
  background-color: var(--primary);
}

.publication-type.is-patent {
  color: var(--secondary);
  background-color: var(--primary-ice);
}

.publication-title {
  color: var(--secondary);
  margin-top: 10px;
  margin-bottom: 6px;
  font-family: Martel, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
}

.publication-authors {
  margin-bottom: 2px;
  font-size: 15px;
  line-height: 1.45;
}

.publication-authors strong {
  color: var(--secondary);
  font-weight: 600;
}

.publication-venue {
  color: var(--content-dim);
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
}

.nobr {
  white-space: nowrap;
}

.publication-link {
  background-color: var(--primary);
  border-radius: 100%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  transition: background-color .2s;
  display: flex;
}

.publication-link:hover {
  background-color: var(--button-color);
}

.publication-link-spacer {
  flex: none;
  width: 45px;
}

.contact-content a,
.legal-content a {
  color: var(--primary);
  font-size: inherit;
  text-decoration: underline;
}

.contact-content a:hover,
.legal-content a:hover {
  color: var(--button-color);
}

@media screen and (max-width: 767px) {
  .publication-card {
    grid-row-gap: 15px;
    border-radius: 15px;
    flex-wrap: wrap;
    padding: 20px;
  }

  .publication-year {
    min-width: 0;
    font-size: 24px;
  }

  .publication-body {
    flex-basis: 100%;
    order: 3;
  }

  .publication-card .publication-link,
  .publication-card .publication-link-spacer {
    margin-left: auto;
  }

  .publication-title {
    font-size: 18px;
  }
}

/* ---------- Rechtliches ---------- */

.legal-line {
  grid-column-gap: 10px;
  color: var(--content-dim);
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 40px;
  font-size: 14px;
  display: flex;
}

.legal-line a {
  color: var(--content-dim);
  font-size: 14px;
}

.legal-line a:hover {
  color: var(--primary);
}

.legal-page {
  padding: 80px 24px 100px;
}

.legal-content {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.legal-content h2 {
  color: var(--secondary);
  margin-top: 40px;
  font-family: Martel, sans-serif;
  font-size: 25px;
  font-weight: 400;
}

.legal-content p,
.legal-content li {
  font-size: 17px;
}

.legal-content .legal-back {
  color: var(--secondary);
  margin-bottom: 40px;
  font-size: 16px;
  text-decoration: none;
  display: table;
}

.legal-content .legal-back:hover {
  color: var(--primary);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}