/* =========================================================================
   Print Stylesheet — A4 optimiert
   Konzept: klassischer Recruiter-CV mit zweispaltigen Eintraegen
   (Date-Column | Content-Column), monochrom + Teal-Akzent nur als
   Border/Color (NICHT als Background, damit „Hintergrundgrafiken
   drucken" nicht aktiviert werden muss).
   Logos + Hero-Foto entfernt, Timeline-Grafik entfernt, Icons entfernt,
   Chips als Inline-Komma-Liste. Page-Breaks halten logische Einheiten
   zusammen.
   ========================================================================= */

@page {
  size: A4;
  /* 18/16mm Margins (statt 16/14mm Original): gibt Browser-Print-
     Renderern etwas Buffer am Edge. Zusaetzliches 2mm-Inline-Padding
     auf .container (siehe unten) faengt restliches Subpixel-Clipping
     bei italic-Glyphen + Date-Ziffern ab. */
  margin: 18mm 16mm;

  /* Page-Header rechts oben — Content wird zur Druckzeit per JS
     injected (scripts/app.js Print-Modul, beforeprint-Event mit
     aktuellem Datum + Uhrzeit in de-CH). Ohne JS bleibt der Bereich
     leer — kein Layout-Bruch. */
  @top-right {
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 9pt;
    color: #555;
  }
}

@media print {
  /* Beide Theme-Selektoren ueberschreiben — sonst gewinnt Dark Mode in
     der Print-Vorschau, weil html[data-theme="dark"] (Specificity 0,1,1)
     :root (0,1,0) schlaegt. Print muss IMMER auf weisses Papier mit
     Teal-Akzent rendern, unabhaengig vom Browser-Theme des Users. */
  :root,
  html[data-theme="dark"],
  html[data-theme="light"] {
    --surf:                #FFFFFF;
    --surf-container-low:  #FFFFFF;
    --surf-container:      #FFFFFF;
    --surf-container-high: #FFFFFF;
    --chip-idle:           #FFFFFF;
    --on-surf:             #111111;
    --on-surf-variant:     #333333;
    --on-surf-muted:       #555555;
    --divider:             #BBBBBB;
    --primary:             #1F4040;  /* Teal-Akzent (nur als Color/Border) */
    --on-primary:          #FFFFFF;
    --primary-container:   transparent;
    --on-primary-container: #111111;
    --secondary-container: transparent;
    --on-secondary-container: #111111;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
  }

  /* JS-Motion-Animationen / Reveal-States zuruecksetzen. Sonst
     drucken unbeobachtete Sections und Timeline-Items leer. */
  html.js-motion .section,
  html.js-motion .section.is-visible,
  html.js-motion .timeline--alt > .timeline__item > *,
  html.js-motion .section.is-visible .timeline--alt > .timeline__item > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  html, body {
    background: #FFFFFF;
    color: #111111;
    font-size: 10pt;
    line-height: 1.45;
  }

  /* =========================================================================
     Sichtbarkeit — alles Interaktive + grafisch Dekorative aus
     ========================================================================= */
  .app-bar,
  .skip-link,
  .timeline-toggle,
  .footer__social,
  .hero__actions,
  .btn,
  .app-icon-btn,
  .contact-form,
  .card__actions,
  .dialog,
  .cf-turnstile,
  .section__meta,
  .section__stats,
  /* Hero-Foto laut Designentscheidung weg */
  .hero__photo,
  /* Timeline-Grafik weg: vertikale Linie + Indicator-Dots + Halo */
  .timeline::before,
  .timeline-stack::before,
  .timeline--alt::before,
  .timeline--alt .timeline__indicator,
  /* Firmen-Logos laut Designentscheidung weg */
  .timeline__logo,
  .featured-experience__logo,
  /* Alle Material-Symbols-Icons + LinkedIn-SVG im Content weg */
  .material-symbols-rounded,
  .contact-list__icon,
  .contact-list__trailing,
  .quote-card__mark,
  /* Featured-Experience „Aktuell"-Badge weg — alle Rollen gleichberechtigt */
  .featured-experience__current-badge {
    display: none !important;
  }

  /* Accordion-Wrap erzwingen: alle Stationen sichtbar. */
  .timeline-extras-wrap {
    display: block !important;
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .timeline-extras-wrap > .timeline {
    overflow: visible !important;
  }

  main {
    margin: 0;
    padding: 0;
  }

  .container {
    max-width: none;
    /* 4mm Inline-Padding: 2mm reichten in PR #152 nicht — Date-Ziffern
       („11/2024") und Firmen-Namen („Abraxas Informatik AG") wurden im
       Chromium-Print-Preview weiterhin links angeschnitten. 4mm gibt
       genug Buffer fuer Subpixel-Rounding-Quirks im Print-Renderer,
       ohne nennenswert Inhaltsbreite zu kosten (174mm bleiben). */
    padding-inline: 4mm;
  }

  .page {
    gap: 5mm;
    padding-block: 0;
  }

  /* =========================================================================
     Hero — kompakter Header (Datum jetzt im @page-Header oben rechts,
     nicht mehr im Hero-Block)
     ========================================================================= */
  .hero {
    padding: 0 0 4mm;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--primary);
    border-radius: 0;
  }

  .hero::before {
    display: none;
  }

  /* Foto-Sidebar weg → Hero-Layout single-column */
  .hero__layout {
    display: block;
  }

  .hero__overline {
    background: transparent;
    color: var(--primary);
    padding: 0;
    font-size: 9pt;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .hero__name {
    font-size: 22pt;
    font-weight: 700;
    margin-top: 1mm;
    color: var(--primary);
  }

  .hero__tagline {
    font-size: 11pt;
    margin-top: 1mm;
    color: var(--on-surf-variant);
  }

  /* Hero-Chips → inline Komma-Liste statt visuelle Chips */
  .hero__meta {
    display: block;
    margin-top: 3mm;
    font-size: 9.5pt;
    color: var(--on-surf-variant);
  }

  .hero__meta .chip {
    display: inline;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
    font-size: inherit;
    font-weight: inherit;
  }

  .hero__meta .chip + .chip::before {
    content: " · ";
    color: var(--on-surf-muted);
  }

  /* =========================================================================
     Section-Headers — Teal-Akzent via Border-Bottom (kein Background)
     ========================================================================= */
  .section__title {
    font-size: 13pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
    padding-bottom: 1mm;
    margin-bottom: 3mm;
  }

  /* =========================================================================
     Cards / Karten — flach, keine Boxes (= klassischer CV-Look)
     ========================================================================= */
  .card,
  .timeline__card,
  .feature,
  .skills-group,
  .quote-card,
  .featured-experience {
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
  }

  /* Featured-Experience visuell identisch zu anderen Items (kein Highlight) */
  .featured-experience::before {
    display: none;
  }

  /* =========================================================================
     Quote-Card (Kurzprofil) — als reiner Paragraph, kein Quote-Icon
     ========================================================================= */
  .quote-card {
    overflow: visible !important;
    break-inside: avoid;
  }

  .quote {
    font-style: normal;
    font-size: 10pt;
    color: var(--on-surf);
  }

  .quote p {
    margin: 0 0 2mm;
  }

  /* =========================================================================
     Timeline & Featured-Experience — Magazine-Style links-aligned Stack
     Reihenfolge: Date (Duration) → Role → Company → Body
     Date in Teal als visueller Akzent, steht als Mini-Header zuoberst.
     ========================================================================= */

  .timeline,
  .timeline--alt,
  .timeline--in-stack {
    display: block;
    margin: 0;
    padding: 0;
  }

  /* Layout-Trick: das Item wird ein Flex-Column-Container, alle Wrapper
     (card, head, title-group) sind display:contents → role, company,
     date-marker, body werden direkte Flex-Children des Items. Mit
     order: 1..4 wird die DOM-Reihenfolge fuer den Druck umgeordnet.

     SPECIFICITY-Battle vs. Screen-Rules:
     Die Screen-Rules verwenden konsequent .timeline--alt-Qualifier:
       .timeline--alt > .timeline__item        { display: contents }   (0,2,0)
       .timeline--alt .timeline__date-marker   { display: flex; ... }  (0,2,0)
       .timeline--alt > .timeline__item:nth-child(odd) > .timeline__date-marker
                                               { grid-column: 1; ... } (0,3,1)
       .timeline--alt .timeline__indicator     { width: 16px; ... }    (0,2,0)
     Damit Print garantiert gewinnt — auch bei Browser-spezifischen
     Cascading-Eigenheiten — qualifizieren wir alle Selektoren ebenfalls
     mit .timeline--alt (Specificity-Match) + !important als
     Belt-and-Suspenders. */

  .timeline--alt .timeline__item,
  .featured-experience {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3mm !important;
    padding: 0 !important;
    margin: 0 0 4mm !important;
    overflow: visible !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .timeline--alt .timeline__card,
  .timeline--alt .timeline__head,
  .timeline--alt .timeline__title-group,
  .featured-experience__head,
  .featured-experience__title-group {
    display: contents !important;
  }

  /* Role — fett, gross, unter dem Datum */
  .timeline--alt .timeline__role,
  .featured-experience__role {
    order: 2 !important;
    font-size: 11pt;
    font-weight: 700;
    color: var(--on-surf);
    margin: 0;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Company — medium, leicht zurueckgenommen, unter Role */
  .timeline--alt .timeline__company,
  .featured-experience__company {
    order: 3 !important;
    font-size: 10pt;
    font-weight: 500;
    color: var(--on-surf-variant);
    margin: 0 !important;
    break-after: avoid;
    page-break-after: avoid;
  }

  .timeline--alt .timeline__company a,
  .featured-experience__company a {
    color: inherit;
    text-decoration: none;
  }

  .timeline__company-icon {
    display: none;
  }

  /* Date-Marker — Teal-Akzent, „Datum (Dauer)" inline, als Mini-Header oben.
     Alle nth-child-Varianten (odd/even, extras-swap) ebenfalls matchen,
     damit deren grid-column/justify-self-Rules nicht greifen. */
  .timeline--alt .timeline__date-marker,
  .timeline--alt > .timeline__item:nth-child(odd) > .timeline__date-marker,
  .timeline--alt > .timeline__item:nth-child(even) > .timeline__date-marker,
  .timeline--extras-swap > .timeline__item:nth-child(odd) > .timeline__date-marker,
  .timeline--extras-swap > .timeline__item:nth-child(even) > .timeline__date-marker,
  .featured-experience__date-marker {
    order: 1 !important;
    display: block !important;
    width: auto !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    margin: 0 0 0.4mm !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 9pt !important;
    color: var(--primary) !important;
    opacity: 1 !important;
    text-align: left !important;
    grid-column: unset !important;
  }

  .timeline--alt .timeline__date-range,
  .featured-experience__date-range {
    display: inline !important;
    font-weight: 500 !important;
    color: var(--primary) !important;
    width: auto !important;
  }

  .timeline--alt .timeline__duration,
  .featured-experience__duration {
    display: inline !important;
    font-weight: 400 !important;
    color: var(--primary) !important;
    margin-left: 0.3em !important;
    opacity: 1 !important;
  }

  .timeline--alt .timeline__duration::before,
  .featured-experience__duration::before { content: "("; }
  .timeline--alt .timeline__duration::after,
  .featured-experience__duration::after  { content: ")"; }

  /* Im Studium-Bereich bleibt die Duration ausgeblendet
     (siehe components.css: #studium .timeline__duration). */

  /* Body — Beschreibung unter Date */
  .timeline--alt .timeline__body {
    order: 4 !important;
    margin: 1.2mm 0 0;
    font-size: 9.5pt;
    color: var(--on-surf);
  }

  /* Body-Paragraphen als Bulletpoints: Teal-Bullet + 4mm Hang-Indent.
     position:relative auf p + absolute auf ::before, damit der Bullet
     auch bei mehrzeiligem Text auf der ersten Zeile haengt und nicht
     den Text-Flow stoert. */
  .timeline__body p {
    position: relative;
    margin: 0 0 1mm;
    padding-left: 4mm;
  }

  .timeline__body p::before {
    content: "";
    position: absolute;
    left: 0.5mm;
    top: 0.55em;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary);
  }

  /* =========================================================================
     Skills — Inline-Komma-Liste pro Gruppe statt Chip-Border
     ========================================================================= */
  .skills-grid {
    display: block;
  }

  .skills-group {
    margin-bottom: 2.5mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .skills-group__header {
    display: inline;
  }

  .skills-group__icon {
    display: none;
  }

  .skills-group__label {
    display: inline;
    font-size: 10pt;
    font-weight: 700;
    color: var(--primary);
  }

  .skills-group__label::after {
    content: ": ";
    color: var(--on-surf-muted);
    font-weight: 400;
  }

  .chip-row {
    display: inline;
    gap: 0;
  }

  .chip-row .chip,
  .chip-row .chip--accent,
  .chip-row .chip--primary {
    display: inline;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    min-height: 0;
    font-size: 10pt;
    font-weight: 400;
    color: var(--on-surf);
  }

  .chip-row .chip + .chip::before,
  .chip-row .chip + .chip--accent::before,
  .chip-row .chip + .chip--primary::before {
    content: " · ";
    color: var(--on-surf-muted);
  }

  /* =========================================================================
     Contact — pro Eintrag eine Zeile, volle Breite, Label inline vor Value
     ("E-Mail: philipp@widmer.bz"). Keine fixe Label-Spalte, damit lange
     Values (z. B. Adresse) den Platz bekommen.
     ========================================================================= */
  .contact-list {
    display: block;
    border: 0;
  }

  .contact-list > li {
    display: block;
    margin: 0 0 1.2mm;
    padding: 0;
    border: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .contact-list__item {
    display: contents;
    background: transparent;
    padding: 0;
    color: var(--on-surf);
  }

  .contact-list__label {
    display: inline;
    font-size: 9.5pt;
    font-weight: 600;
    color: var(--on-surf-variant);
  }

  .contact-list__label::after {
    content: ": ";
    font-weight: 600;
    color: var(--on-surf-variant);
  }

  .contact-list__value {
    display: inline;
    font-size: 9.5pt;
    color: var(--on-surf);
  }

  .contact-list a {
    color: inherit;
    text-decoration: none;
  }

  /* =========================================================================
     Footer — Stand + Copyright (laut Designentscheidung A: drin)
     ========================================================================= */
  .footer {
    border-top: 1px solid var(--divider);
    padding-block: 2mm;
    margin-top: 6mm;
  }

  .footer__meta {
    font-size: 8.5pt;
    color: var(--on-surf-muted);
    text-align: center;
    margin: 0;
  }

  /* =========================================================================
     Page-Breaks — logische Einheiten zusammenhalten
     ========================================================================= */
  .section {
    break-inside: auto;
    page-break-inside: auto;
  }

  .section__header,
  .quote-card,
  .skills-group,
  .timeline__item,
  .featured-experience,
  .contact-list {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .section__title {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Links: kein Unterstrich, URL nicht ausgeschrieben (zu laut) */
  a {
    color: inherit;
    text-decoration: none;
  }
}