/* ================================================================
   PORTFOLIO ZINA TARUS – style.css
   ================================================================
   Diese Datei steuert das AUSSEHEN der Seite.
   Inhalt:
     1. Farben & Grundwerte (hier änderst du Farben zentral)
     2. Grundlagen (Schrift, Links, Fokus)
     3. Bausteine (Buttons, Platzhalter, Container)
     4. Kopfbereich & Navigation
     5. Einstieg (Hero)
     6. Projekte & Galerie
     7. Detailansicht (Dialog)
     8. Leistungen
     9. Über mich
    10. Kontakt & Fußzeile
    11. Druckansicht (für das Portfolio-PDF)
   ================================================================ */


/* ---------------------------------------------------------------
   1. FARBEN & GRUNDWERTE
   Ändere hier eine Farbe, und sie ändert sich auf der ganzen Seite.
   --------------------------------------------------------------- */
:root {
  --hintergrund: #fbf7f2;      /* warmes, helles Creme */
  --flaeche: #ffffff;          /* Karten und Kästen */
  --text: #1f2a2e;             /* dunkle Schrift */
  --text-leise: #4f5d62;       /* Nebentexte */
  --petrol: #0e5e6f;           /* Hauptakzent */
  --petrol-dunkel: #0a4552;
  --pfirsich: #f6d5c2;         /* dezenter Pfirsichton */
  --pfirsich-hell: #fcebe0;
  --linie: #e8ddd3;

  --schrift-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-titel: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --radius: 14px;
  --schatten: 0 10px 30px rgba(31, 42, 46, 0.10);
  --abstand-abschnitt: clamp(4rem, 9vw, 7.5rem);
  --kopf-hoehe: 4.5rem;
}


/* ---------------------------------------------------------------
   2. GRUNDLAGEN
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--kopf-hoehe);  /* Abschnitte nicht unter dem Kopf verstecken */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body.dialog-offen { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  line-height: 1.15;
  margin: 0 0 0.6em;
  font-weight: 600;
}
h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
h3 { font-size: 1.45rem; }
h4 { font-size: 1.05rem; font-family: var(--schrift-text); text-transform: uppercase; letter-spacing: 0.06em; color: var(--petrol); margin-top: 1.5em; }

p { margin: 0 0 1em; }

a { color: var(--petrol); text-underline-offset: 0.2em; }
a:hover { color: var(--petrol-dunkel); }

/* Sichtbarer Tastaturfokus für alle bedienbaren Elemente */
:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Text nur für Screenreader */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  background: var(--petrol); color: #fff;
  padding: 0.6rem 1rem; border-radius: 8px;
}
.skip-link:focus { top: 1rem; color: #fff; }


/* ---------------------------------------------------------------
   3. BAUSTEINE
   --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

.abschnitt { padding: var(--abstand-abschnitt) 0; }

.abschnitt-label {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 0.75rem;
}
.abschnitt-label::before {
  content: "";
  display: inline-block;
  width: 1.8rem; height: 2px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 0.6rem;
}

.abschnitt-intro { color: var(--text-leise); max-width: 40rem; font-size: 1.125rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.btn:hover { transform: translateY(-1px); }

.btn-primaer { background: var(--petrol); color: #fff; }
.btn-primaer:hover { background: var(--petrol-dunkel); color: #fff; }

.btn-sekundaer { background: transparent; color: var(--petrol); border-color: var(--petrol); }
.btn-sekundaer:hover { background: var(--petrol); color: #fff; }

.btn-hell { background: var(--pfirsich); color: var(--petrol-dunkel); }
.btn-hell:hover { background: #fff; color: var(--petrol-dunkel); }

/* Platzhalter für offene Angaben – absichtlich gut sichtbar */
.platzhalter {
  display: inline-block;
  border: 2px dashed #d39a78;
  background: var(--pfirsich-hell);
  color: #6b3d22;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-size: 0.95rem;
}
.platzhalter::before {
  content: "Offen: ";
  font-weight: 700;
}
.platzhalter-dunkel { background: rgba(255,255,255,0.1); color: #fff; border-color: var(--pfirsich); }

/* Hinweis bei fehlendem Bild (wird von script.js eingesetzt) */
.bild-fehlt {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  width: 100%;
  padding: 1rem;
  text-align: center;
  border: 2px dashed #d39a78;
  background: var(--pfirsich-hell);
  color: #6b3d22;
  font-size: 0.95rem;
  border-radius: var(--radius);
}

.hinweis {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--flaeche);
  border-left: 4px solid var(--petrol);
  border-radius: 6px;
  font-size: 0.95rem;
}

/* Werkzeug-Schlagwörter */
.werkzeuge {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.werkzeuge li {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--pfirsich-hell);
  color: var(--petrol-dunkel);
  border: 1px solid var(--pfirsich);
}
.werkzeug-zusatz { font-weight: 400; }


/* ---------------------------------------------------------------
   4. KOPFBEREICH & NAVIGATION
   --------------------------------------------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 247, 242, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.kopf-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--kopf-hoehe);
}
.logo {
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.logo:hover { color: var(--petrol); }

.navigation ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 0.25rem;
}
.navigation a {
  display: block;
  padding: 0.5rem 0.9rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-radius: 999px;
}
.navigation a:hover { background: var(--pfirsich-hell); color: var(--petrol-dunkel); }

.menu-knopf {
  display: none;
  width: 3rem; height: 3rem;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.menu-knopf-linien,
.menu-knopf-linien::before,
.menu-knopf-linien::after {
  position: absolute;
  left: 50%;
  width: 1.5rem; height: 2px;
  background: var(--text);
  transform: translateX(-50%);
  transition: transform 0.2s;
}
.menu-knopf-linien { top: 50%; }
.menu-knopf-linien::before,
.menu-knopf-linien::after { content: ""; left: 0; transform: none; }
.menu-knopf-linien::before { top: -7px; }
.menu-knopf-linien::after { top: 7px; }
.menu-knopf[aria-expanded="true"] .menu-knopf-linien { background: transparent; }
.menu-knopf[aria-expanded="true"] .menu-knopf-linien::before { transform: translateY(7px) rotate(45deg); }
.menu-knopf[aria-expanded="true"] .menu-knopf-linien::after { transform: translateY(-7px) rotate(-45deg); }

/* Smartphone: Menü klappt aus */
@media (max-width: 720px) {
  .js .menu-knopf { display: block; }
  .js .navigation {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--hintergrund);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
  }
  .js .navigation.ist-offen { display: block; }
  .js .navigation ul { flex-direction: column; padding: 0.5rem 1rem 1rem; }
  .js .navigation a { padding: 0.85rem 1rem; border-radius: 8px; }
  .no-js .navigation ul { flex-wrap: wrap; }
}


/* ---------------------------------------------------------------
   5. EINSTIEG (HERO)
   --------------------------------------------------------------- */
/* Aufbau: Hintergrundbild (.hero-hintergrund) liegt ganz hinten,
   darüber ein cremefarbener Verlauf hinter dem Text (::before) und
   unten ein weicher Übergang in den Projekte-Abschnitt (::after). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--hintergrund);
  min-height: clamp(34rem, 78vh, 46rem);
  display: flex;
  align-items: center;
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(5.5rem, 10vw, 8rem);
}
.hero-hintergrund {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  z-index: -2;
  width: max(62rem, 78%);     /* Bild beginnt rechts vom Text */
  height: 100%;
  object-fit: cover;
  object-position: 0% 55%;    /* Bildausschnitt verschieben: hier ändern */
  /* linke Bildkante weich in den Cremegrund auslaufen lassen */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.hero::before {               /* ruhige Fläche hinter dem Text */
  inset: 0;
  background: linear-gradient(90deg,
    rgba(251, 247, 242, 0.9) 0%,
    rgba(251, 247, 242, 0.7) 32%,
    rgba(251, 247, 242, 0) 58%);
}
.hero::after {                /* Übergang in den folgenden Abschnitt */
  left: 0; right: 0; bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--flaeche));
}
.hero-inhalt { position: relative; }
.hero-text { max-width: 36rem; }
.hero-kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 1.25rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 5.6vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.5rem;
}
.hero h1 .akzent { color: var(--petrol); white-space: nowrap; }  /* „KI-Anwendung“ nie am Bindestrich trennen */
.hero-intro {
  font-size: clamp(1.125rem, 2vw, 1.3rem);
  color: var(--text-leise);
  max-width: 32rem;
  margin-bottom: 2rem;
}
.hero-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}
.hero-link {
  display: inline-block;
  padding: 0.8rem 0;          /* bequeme Klickfläche */
  color: var(--petrol);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.hero-link::after { content: "→"; display: inline-block; margin-left: 0.45rem; }
.hero-link:hover { color: var(--petrol-dunkel); }

/* Dekorative Begriffe über dem Bildmotiv */
.hero-begriff {
  position: absolute;
  font-family: var(--schrift-titel);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: 0.04em;
  color: var(--petrol-dunkel);
  opacity: 0.8;
  pointer-events: none;
}
.begriff-sprache { top: 15%; right: 36%; }
.begriff-ideen   { top: 38%; right: 9%; }
.begriff-wissen  { bottom: 24%; right: 26%; }

/* Breite Bildschirme: feste Zeilenaufteilung der Überschrift */
@media (min-width: 700px) {
  .hero-zeile { display: block; }
}

/* Mittlere Breiten: Verlauf hinter dem Text etwas kräftiger */
@media (min-width: 861px) and (max-width: 1200px) {
  .hero::before {
    background: linear-gradient(90deg,
      rgba(251, 247, 242, 0.94) 0%,
      rgba(251, 247, 242, 0.8) 42%,
      rgba(251, 247, 242, 0) 66%);
  }
}

/* Tablet und Smartphone: Text oben auf Creme, Bildmotiv darunter */
@media (max-width: 860px) {
  .hero-begriffe { display: none; }
  .hero {
    min-height: 0;
    display: block;
    padding-bottom: clamp(15rem, 78vw, 28rem);   /* Platz für das Motiv */
  }
  .hero-hintergrund {
    top: auto;
    width: clamp(34rem, 135vw, 56rem);
    max-width: none;
    height: auto;
    object-fit: initial;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  }
  .hero::before { display: none; }
  .hero::after { height: 15%; }
}


/* ---------------------------------------------------------------
   6. PROJEKTE & GALERIE
   --------------------------------------------------------------- */
/* Blaugrauer Galerie-Bereich. Oben weicher Übergang aus dem weißen
   Hero-Ende, unten nur ein kurzer Abstand zum nächsten Abschnitt. */
.projekte {
  --galerie-grund: #e8eef0;
  background: linear-gradient(180deg, var(--flaeche) 0, var(--galerie-grund) 5rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.projekte .abschnitt-intro { margin-bottom: 2rem; }   /* Abstand zur Galerie wie bei den Karten in „Mein Hintergrund“ */

/* Neutrale blaugraue Werkzeug-Tags (Galerie und Detailansicht) */
.projekte .werkzeuge li,
.detail-dialog .werkzeuge li {
  background: #dde6e9;
  border-color: #c7d4d8;
  color: var(--text);
}

.projekt-bild {
  border-radius: 10px;
  overflow: hidden;
  background: var(--hintergrund);
  aspect-ratio: 16 / 10;
}
.projekt-bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Projektkarte: helle Fläche mit Kontur und weichem Schatten */
.projekt {
  background: var(--flaeche);
  border: 1px solid rgba(14, 94, 111, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(31, 42, 46, 0.09);
  padding: 0.6rem;
}
.projekt-info { padding: 1rem 0.65rem 0.4rem; }
.projekt-kopf {                 /* Titel und Tags in einer Zeile */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}
.projekt-kopf h3 { margin: 0; }
.projekt-kopf .werkzeuge { margin: 0; }
.projekt-adresse { font-size: 0.95rem; margin-bottom: 1rem; }
.js .projekt-adresse { display: none; }   /* Adresse steckt im Vorschau-Link; bleibt für Druck und ohne JavaScript */
.projekt-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
}
.link-extern { font-weight: 600; }
.link-extern::after { content: " ↗"; }
.vorschau-hinweis { font-size: 0.8rem; color: var(--text-leise); margin: 0.5rem 0 0; }

/* Ohne JavaScript: Projekte einfach untereinander */
.no-js .projekt { margin-bottom: 2rem; }
.no-js [data-detail-oeffnen] { display: none; }
.no-js .detail-screenshots { display: none; }

/* Mit JavaScript: Detailtexte nur im Dialog zeigen */
.js .projekt-details { display: none; }

/* --- Galerie (nur mit JavaScript) ---
   Alle Projekte liegen im selben Rasterfeld. Die Bühne ist so hoch wie das
   höchste Projekt – dadurch springt beim Wechsel nichts. Die drei Projekte
   sind fast gleich hoch, es entsteht also kein nennenswerter Leerraum. */
.js .galerie { position: relative; }
.js .galerie-buehne {
  display: grid;
  overflow: hidden;           /* seitliche Projekte werden am Rand angeschnitten */
  padding: 0.5rem 0 1.25rem;  /* Platz für den Schatten der Karte */
  touch-action: pan-y;        /* senkrechtes Scrollen bleibt auf dem Handy möglich */
}
.js .projekt {
  grid-area: 1 / 1;
  align-self: start;
  width: min(70%, 780px);
  justify-self: center;
  transition: transform 0.45s ease, opacity 0.45s ease;
  opacity: 0;
  visibility: hidden;
}
.js .projekt.ist-aktiv   { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.js .projekt.ist-vorher  { opacity: 0.5; visibility: visible; transform: translateX(-80%) scale(0.84); z-index: 1; cursor: pointer; box-shadow: none; }
.js .projekt.ist-nachher { opacity: 0.5; visibility: visible; transform: translateX(80%) scale(0.84); z-index: 1; cursor: pointer; box-shadow: none; }
.js .projekt.ist-vorher:hover,
.js .projekt.ist-nachher:hover { opacity: 0.75; }
.js .projekt:not(.ist-aktiv) .projekt-info { visibility: hidden; }

/* Steuerung: eine Zeile „← 01 / 03 →“ */
.galerie-steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.25rem;        /* zusammen mit der Bühne ca. 24 px unter der Karte */
}
.galerie-pfeil {
  width: 3rem; height: 3rem;  /* 48 × 48 px */
  border-radius: 50%;
  border: 2px solid var(--petrol);
  background: var(--flaeche);
  color: var(--petrol);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.galerie-pfeil:hover { background: var(--petrol); color: #fff; }
.galerie-pfeil:focus-visible { outline: 3px solid var(--petrol-dunkel); outline-offset: 3px; }
.galerie-zaehler {
  margin: 0;
  min-width: 4.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--petrol-dunkel);
}

@media (max-width: 720px) {
  .js .projekt { width: 86%; }
  .js .projekt.ist-vorher  { transform: translateX(-92%) scale(0.88); }
  .js .projekt.ist-nachher { transform: translateX(92%) scale(0.88); }
  .projekt { padding: 0.45rem; }
  .projekt-info { padding: 0.85rem 0.45rem 0.3rem; }
  .js .galerie-buehne { padding-bottom: 1rem; }
}


/* ---------------------------------------------------------------
   7. DETAILANSICHT (DIALOG)
   --------------------------------------------------------------- */
.detail-dialog {
  width: min(1100px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--hintergrund);
  color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.detail-dialog[open] { display: flex; flex-direction: column; }
.detail-dialog::backdrop { background: rgba(15, 30, 34, 0.7); }

.dialog-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.dialog-kopf h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; }
.dialog-schliessen {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 2px solid var(--petrol);
  background: var(--flaeche);
  color: var(--petrol);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.dialog-schliessen:hover { background: var(--petrol); color: #fff; }

.dialog-inhalt {
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.dialog-inhalt .detail-screenshots { display: grid; gap: 1rem; }

/* Vorschaufenster: lange Screenshots scrollen darin senkrecht */
.screenshot-rahmen {
  max-height: 68vh;
  overflow-y: auto;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: var(--schatten);
  overscroll-behavior: contain;
}
.screenshot-rahmen img { width: 100%; height: auto; }
.screenshot-hinweis { font-size: 0.85rem; color: var(--text-leise); margin: 0.4rem 0 0; }

/* Beschriftung über der Vorschau: „Live-Vorschau“ oder „Bildvorschau“ */
.vorschau-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol);
  margin: 0 0 -0.5rem;
}

/* Live-Vorschau: eingebettete Webseite, darin scrollbar */
.live-rahmen {
  position: relative;
  height: 68vh;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
  box-shadow: var(--schatten);
}
.live-rahmen::before {
  content: "Vorschau wird geladen …";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  color: var(--text-leise);
}
.live-laden { justify-self: start; }
.live-rahmen iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  transform-origin: 0 0;
}

.dialog-text h4:first-child { margin-top: 0; }
.dialog-text .platzhalter { margin-bottom: 0.5rem; }
.dialog-link { margin-top: 1.75rem; }

@media (max-width: 820px) {
  .dialog-inhalt { grid-template-columns: 1fr; }
  .screenshot-rahmen { max-height: 55vh; }
  .live-rahmen { height: 55vh; }
}


/* ---------------------------------------------------------------
   7a. WARUM DIGITALISIERUNG?
   Offene Textspalten statt Karten, kleine Ablauf-Illustration und
   ein petrolfarbener Abschlussstreifen.
   --------------------------------------------------------------- */
.digitalisierung {
  background: var(--flaeche);
  /* Der Farbwechsel zur blaugrauen Galerie trennt die Abschnitte */
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
.digi-kopf { max-width: 46rem; }

/* Zwei offene Textspalten */
.digi-spalten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-top: 2rem;
}
.digi-spalte {
  padding-left: 1.25rem;
  border-left: 2px solid var(--pfirsich);
}
.digi-icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  color: var(--petrol);
  background: var(--pfirsich-hell);
}
.digi-icon svg {
  width: 1.35rem; height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.digi-spalte h3 {
  font-size: 1.3rem;
  color: var(--petrol-dunkel);
  margin-bottom: 0.6rem;
}
.digi-spalte p { color: var(--text-leise); margin: 0; }
.digi-spalte .digi-merkzeile {
  margin-top: 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--petrol);
}

/* Ablauf-Illustration (nur HTML/CSS) */
.digi-ablauf {
  margin: 2.25rem 0 0;
  padding: 1.1rem 1.25rem;
  border: 1px dashed rgba(14, 94, 111, 0.35);
  border-radius: var(--radius);
  background: var(--hintergrund);
}
.digi-ablauf figcaption {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin-bottom: 0.75rem;
}
.digi-ablauf ol {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0;
}
.digi-ablauf li {                    /* Schrittkapsel */
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--petrol-dunkel);
}
.digi-ablauf li:not(:last-child) { margin-right: 2.25rem; position: relative; }
.digi-ablauf li:not(:last-child)::after {   /* Pfeil zum nächsten Schritt */
  content: "→" / "";
  position: absolute;
  right: -1.65rem;
  color: var(--petrol);
  font-weight: 400;
}
.digi-ablauf .schritt-mensch { background: var(--pfirsich-hell); border-color: var(--pfirsich); }
.digi-ablauf .schritt-frei   { border-color: var(--petrol); }

/* Abschluss als Petrol-Streifen */
.digi-abschluss {
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) 1.6fr;
  gap: 0.75rem 2.5rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.6rem clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--petrol);
  color: #fff;
  border-left: 6px solid var(--pfirsich);
}
.digi-abschluss h3 {
  margin: 0;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: #fff;
}
.digi-abschluss p { margin: 0; color: #fff; }
.digi-zeile { display: inline-block; }   /* Umbruch nur zwischen den beiden Sätzen */
.digi-schlusszeile {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--text-leise);
}

@media (max-width: 760px) {
  .digi-spalten,
  .digi-abschluss { grid-template-columns: 1fr; }
  .digi-ablauf ol { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .digi-ablauf li:not(:last-child) { margin-right: 0; }
  .digi-ablauf li:not(:last-child)::after {
    content: "↓" / "";
    right: auto; left: 1rem;
    top: calc(100% + 0.15rem);
  }
}


/* ---------------------------------------------------------------
   8. HINTERGRUND („Mein Hintergrund“, Klasse .leistungen)
   Die Höhe richtet sich nur nach dem Inhalt. Die Datenlinien liegen
   als zugeschnittener Streifen am unteren Rand (::before).
   Bild austauschen: Dateinamen bei background-image unten ändern.
   --------------------------------------------------------------- */
.leistungen {
  position: relative;
  isolation: isolate;
  /* weicher Übergang vom weißen Projekte-Abschnitt in den Cremegrund */
  background: linear-gradient(180deg, var(--flaeche) 0, var(--hintergrund) 6rem);
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(5.5rem, 10vw, 8.5rem);
}
.leistungen::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: -1;
  height: clamp(8rem, 19.7vw, 18rem);
  background: url("images/hintergrund-datenlinien.jpg") center bottom / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 40%);
  pointer-events: none;
}
.karten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* zwei Karten + ein breiter Bereich darunter */
  gap: 1.25rem;
  margin-top: 2rem;
}
.karte {
  position: relative;
  overflow: hidden;
  background: rgba(251, 247, 242, 0.88);   /* Creme, leicht transparent */
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  border: 1px solid rgba(14, 94, 111, 0.2);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem 1.75rem;
  box-shadow: 0 6px 20px rgba(31, 42, 46, 0.06);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.karte::before {                            /* Petrol-Linie oben, nach rechts auslaufend */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--petrol) 0%, var(--petrol) 30%, rgba(14, 94, 111, 0.12) 100%);
}
.karte:hover {
  transform: translateY(-3px);
  border-color: var(--petrol);
  box-shadow: var(--schatten);
}
.karte-kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.karte-kopf h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--petrol-dunkel);
}
.karte-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 12px;
  color: var(--petrol);
  background: var(--pfirsich-hell);
  border: 1px solid var(--pfirsich);
}
.karte-icon svg {
  width: 1.5rem; height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.karte p { color: var(--text-leise); margin: 0; }

/* Breiter Bereich „KI & digitale Prozesse“ mit drei Schwerpunkten */
.karte-breit { grid-column: 1 / -1; }
.karte-breit > p { max-width: 50rem; }
.karte .schwerpunkte-label {
  margin: 1.25rem 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol);
}
.schwerpunkte {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.schwerpunkte li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border-left: 3px solid var(--pfirsich);
}
.schwerpunkt-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  color: #fff;
  background: var(--petrol);
}
.schwerpunkt-icon svg {
  width: 1.2rem; height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.schwerpunkte h4 {
  margin: 0.15rem 0 0.25rem;
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--petrol-dunkel);
}
.schwerpunkte p { font-size: 0.95rem; hyphens: auto; }

@media (prefers-reduced-motion: reduce) {
  .karte, .karte:hover { transition: none; transform: none; }
}
@media (max-width: 900px) {
  .karten { grid-template-columns: 1fr; max-width: 36rem; gap: 1rem; }
  .schwerpunkte { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .leistungen::before { background-image: url("images/hintergrund-datenlinien-900.jpg"); }
}


/* ---------------------------------------------------------------
   9. ÜBER MICH
   --------------------------------------------------------------- */
.ueber { background: #f2f2f0; }   /* neutrales, leicht graues Hell */
.ueber-grid {
  display: grid;
  grid-template-columns: minmax(16rem, 26rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.ueber-foto { margin: 0; }
.ueber-foto img {                 /* natürliches Hochformat, kein Zuschnitt */
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
}
.ueber-text h2 { max-width: 40rem; }
.ueber-text p { max-width: 38rem; }
/* Berufliches Profil (PDF-Link) */
.profil-bereich {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}
.ueber-text .profil-intro { margin: 0 0 1rem; color: var(--text-leise); }
.profil-knopf { min-height: 3.25rem; padding-inline: 1.6rem; }
.profil-knopf svg {
  width: 1.25rem; height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ueber-text .profil-info { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-leise); }

@media (max-width: 480px) {
  .profil-knopf { width: 100%; }
}

@media (max-width: 900px) {
  .ueber-grid { grid-template-columns: 1fr; gap: 2rem; }
  .ueber-foto { max-width: 20rem; }
}


/* ---------------------------------------------------------------
   10. KONTAKT & FUSSZEILE
   --------------------------------------------------------------- */
.kontakt {
  background: var(--petrol-dunkel);
  color: #fff;
  text-align: center;
}
.kontakt-inner { max-width: 46rem; }
.kontakt .abschnitt-label { color: var(--pfirsich); }
.kontakt h2 { color: #fff; }
.kontakt-zusatz { font-size: 1.2rem; color: #d7e7ea; margin-bottom: 2rem; }
.kontakt :focus-visible { outline-color: var(--pfirsich); }

.fuss {
  background: #082f37;
  color: #cfe0e3;
  font-size: 0.9rem;
  padding: 2rem 0;
}
.fuss-inner {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fuss p { margin: 0; }
.fuss a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.fuss a:hover { color: var(--pfirsich); }
.fuss a[aria-current="page"] { text-decoration: none; font-weight: 600; }

/* ---------------------------------------------------------------
   10a. RECHTLICHE SEITEN (impressum.html, datenschutz.html)
   --------------------------------------------------------------- */
.rechtsseite { display: flex; flex-direction: column; min-height: 100vh; }
.rechts-inhalt { flex: 1; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.rechts-container { max-width: 46rem; }
.rechts-container h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 1.5rem; }
.rechts-container h2 { font-size: 1.3rem; color: var(--petrol-dunkel); margin: 2.25rem 0 0.6rem; }
.rechts-container p { max-width: 42rem; }
.rechts-zurueck { font-weight: 600; color: var(--petrol); text-decoration: none; padding: 0.75rem 0; }
.rechts-zurueck:hover { text-decoration: underline; }
.rechts-stand { margin-top: 2.5rem; font-size: 0.9rem; color: var(--text-leise); }
.rechts-querverweis { font-size: 0.95rem; }
.fuss a { color: #fff; }
.fuss .platzhalter { font-size: 0.85rem; background: transparent; color: #f6d5c2; border-color: #f6d5c2; }


/* ---------------------------------------------------------------
   11. DRUCKANSICHT (für das Portfolio-PDF)
   Im Browser: Datei → Drucken → „Als PDF sichern“.
   --------------------------------------------------------------- */
@media print {
  @page { size: A4; margin: 16mm 15mm; }

  :root { --abstand-abschnitt: 0; }
  html { scroll-padding-top: 0; }
  body { background: #fff; font-size: 10.5pt; line-height: 1.5; }
  * { box-shadow: none !important; }

  /* Ausblenden: Navigation, Bedienelemente, Dialog */
  .kopf, .skip-link, .hero-hintergrund, .hero-begriffe, .galerie-steuerung,
  [data-detail-oeffnen], .link-extern, .detail-dialog, .profil-bereich,
  .detail-screenshots { display: none !important; }

  .container { max-width: none; padding: 0; }
  .abschnitt { padding: 0; margin-bottom: 9mm; }
  h2 { font-size: 18pt; }
  h3 { font-size: 13pt; }
  h4 { font-size: 9pt; margin-top: 0.8em; margin-bottom: 0.2em; }
  h2, h3, h4 { break-after: avoid; }

  /* Einstieg kompakt */
  .hero::before, .hero::after { display: none; }
  .hero-zeile { display: inline; }
  .hero { min-height: 0; display: block; padding: 0 0 6mm; background: none; border-bottom: 2px solid var(--petrol); margin-bottom: 8mm; }
  .hero h1 { font-size: 24pt; margin-bottom: 3mm; }
  .hero h1 .akzent { display: inline; }
  .hero-intro { margin-bottom: 0; font-size: 11pt; }
  .hero .btn, .hero-link { display: none; }

  /* Projekte untereinander, keine Galerie */
  .projekte { background: none; }
  .projekt { border: none; box-shadow: none !important; padding: 0; background: none; border-radius: 0; }
  .js .projekt-adresse { display: block; }
  .projekt-kopf { display: block; margin-bottom: 0; }
  .projekt-kopf h3 { margin-bottom: 0.4em; }
  .projekt-kopf .werkzeuge { margin-bottom: 0.6em; }
  .galerie-buehne { display: block !important; overflow: visible !important; padding: 0 !important; }
  .projekt {
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: grid !important;
    grid-template-columns: 95mm 1fr;
    gap: 7mm;
    align-items: start;
    margin: 0 0 7mm !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .projekt-info, .projekt:not(.ist-aktiv) .projekt-info { visibility: visible !important; padding: 0; }
  .projekt-bild { aspect-ratio: auto; border: 1px solid var(--linie); border-radius: 6px; }
  .projekt-bild img { height: auto; }
  .projekt-details { display: block !important; grid-column: 2; }
  .projekt-info { grid-column: 2; }
  .projekt-bild { grid-row: 1 / span 2; }
  .projekt-details p { margin-bottom: 0.4em; }
  .projekt-adresse { margin-bottom: 0.4em; }
  .projekt-adresse a { color: var(--petrol); }

  /* Leistungen & Über mich */
  .leistungen { break-before: page; background: none; padding: 0; }
  .leistungen::before { display: none; }
  .karte { backdrop-filter: none; background: #fff; box-shadow: none; }
  .karten { grid-template-columns: repeat(2, 1fr); gap: 4mm; margin-top: 4mm; max-width: none; }
  .schwerpunkte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
  .schwerpunkte li { padding: 3mm; gap: 2mm; background: var(--pfirsich-hell); break-inside: avoid; }
  .schwerpunkte h4 { font-size: 10pt; margin-top: 0; }
  .schwerpunkte p { font-size: 9pt; }
  .schwerpunkt-icon { width: 7mm; height: 7mm; }
  .schwerpunkt-icon svg { width: 4mm; height: 4mm; }

  /* Warum Digitalisierung? – Desktop-Anordnung, nicht über Seiten zerteilt */
  .digitalisierung { break-before: page; padding: 0; }
  .digi-spalten { grid-template-columns: 1fr 1fr; gap: 6mm; margin-top: 4mm; }
  .digi-spalte { break-inside: avoid; }
  .digi-ablauf { margin-top: 5mm; padding: 3mm 4mm; break-inside: avoid; }
  .digi-ablauf ol { flex-direction: row; align-items: center; gap: 2mm 0; }
  .digi-ablauf li:not(:last-child) { margin-right: 9mm; }
  .digi-ablauf li:not(:last-child)::after { content: "→" / ""; left: auto; top: auto; right: -6.5mm; }
  .digi-abschluss { grid-template-columns: 1fr; margin-top: 4mm; padding: 4mm 5mm; break-inside: avoid; }
  .karte { padding: 4mm; break-inside: avoid; }
  .ueber { background: none; }
  .ueber-grid { grid-template-columns: 45mm 1fr; gap: 8mm; align-items: start; break-inside: avoid; }
  .ueber-foto { max-width: none; }
  .ueber-foto img { box-shadow: none; }

  /* Kontakt & Fuß */
  .kontakt { background: none; color: var(--text); text-align: left; break-inside: avoid; }
  .kontakt h2, .kontakt .kontakt-zusatz { color: var(--text); }
  .kontakt .abschnitt-label { color: var(--petrol); }
  .platzhalter-dunkel { color: #6b3d22; background: var(--pfirsich-hell); border-color: #d39a78; }
  .fuss { background: none; color: var(--text-leise); padding: 4mm 0 0; border-top: 1px solid var(--linie); }
  .fuss a { color: var(--petrol); }
  .fuss .platzhalter { color: #6b3d22; border-color: #d39a78; }

  .platzhalter, .werkzeuge li, .karte-icon, .karte, .schwerpunkt-icon, .schwerpunkte li, .digi-abschluss, .digi-icon, .digi-ablauf li {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}