/* =========================================================
   ACRE – Light Theme (clean, accessible, production-ready)
   ========================================================= */

:root{
  /* Grundfarben */
  --bg:    #ffffff;   /* Seitenhintergrund (vorher #f8f8f8) */
  --ink:   #222222;   /* Fließtext */
  --muted: #666666;   /* Sekundärtext, small */

  /* ACRE Akzente */
  --acre-green:      #4b8740;
  --acre-green-200:  #5ea852;  /* hellere Var. für aktive States */
  --acre-purple:     #e20074;

  /* Komponenten */
  --accent: var(--acre-purple); /* Standard-Link/CTA (nur semantisch) */
  --card:   #ffffff;            /* Karten/Boxen hell */
  --card-bd:#dddddd;            /* Kartenrand/Fokus */
  --panel:  #f0f0f0;            /* Tabellenköpfe etc. */

  --maxw:1024px;
}

/* Reserviert Platz für den Scrollbalken auf ALLEN Seiten */
html{
  scrollbar-gutter: stable both-edges;   /* moderne Lösung */
}

/* Fallback für ältere Browser */
body{
  overflow-y: scroll; /* erzwingt immer den Platz für die Scrollbar */
}

*{ box-sizing:border-box }

/* Typo & Grundlayout */
html{
  font-family:'Fabrikat',system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height:1.6;
  font-synthesis-weight: none;
  font-synthesis-style: none; /* verhindert Fake Bold/Italic */
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
}

/* Gemeinsamer Startabstand nach dem Header
   für alle Inhaltsseiten außer Home */
.page-top {
  padding-top: clamp(8px, 2vh, 18px);
}

/* Home: Intro-Text schmaler und weniger Abstand vor dem Footer */
.section.home-about {
  width: 70%;           /* Textblock links bündig, angenehm schmal */
  padding: 28px 0 8px;  /* oben normal, unten stark reduziert */
  margin: 0;            /* überschreibt default Section-Margins */
}

.home-about p:last-of-type {
  margin-bottom: 0;     /* verhindert unnötige Luft unten */
}

/* Oberer 2-Spalten-Bereich (Profile / Projects / Training) */
.page-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: flex-start;
  margin-top: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(32px, 4vw, 48px);
}

.page-intro-main {
  min-width: 0;
}

.page-intro-side {
  min-width: 0;
}

/* Mobile: untereinander */
@media (max-width: 860px) {
  .page-intro-grid {
    grid-template-columns: 1fr;
  }

  .page-intro-side {
    margin-top: 1.5rem;
  }
}

/* Bilder im Intro einheitlich */
.page-intro-side img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* Bilder & Links */
img{ max-width:100%; height:auto; display:block }
/* Globale Links (Content/Footer) – Purpur, nur underline auf Hover */
a{
  color: var(--acre-purple);
  text-decoration: none;
}
a:hover{
  text-decoration: underline;  /* keine Farbänderung */
}

/* Layout-Container */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  /* erster Wert = oben/unten, zweiter Wert = links/rechts */
padding:clamp(4px,1vw,12px) clamp(12px,2.2vw,28px);
}



/* Navigation */
.nav{
  display:flex; gap:14px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
}
.brand{
  font-family:'Fabrikat Kompakt','Fabrikat',system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  font-weight:600; letter-spacing:.3px; color:var(--acre-green);
}
/* Top-Menü: ruhig, aktiv = grüne Pill; kein Farbwechsel auf Hover */
.menu{ display:flex; gap:14px; flex-wrap:wrap }
.menu a{
  padding:8px 10px; border-radius:12px;
  background:transparent; color:var(--ink);
  text-decoration:none;
}
.menu a:hover{
  text-decoration:underline;
  color:var(--ink);
  background:transparent;
}
.menu a.active{
  background:#eef6f0;            /* dezente grüne Pill */
  color:var(--acre-green);
  text-decoration:none;
}

/* Hero kompakt, oben + rechts */
.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 1fr auto 8fr;     /* Text im oberen Bereich */
  gap:20px; position:relative; color:#fff;

  background-image:url('../img/hero-ACRE-gardenwall-2000px.jpg?v=9');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center 28%;        /* etwas mehr oben sichtbar */
  min-height:520px;                      /* flacher */
  height:56vh;                           /* flacher */
}

.hero > .container{
  grid-row: 2;
  justify-self: end;
  max-width: 680px;
  text-align: left;
  transform: translateX(70%);            /* 50–70% testen; 75% ist oft zu weit */
}

/* kein Overlay */
.hero::after{ background:none !important; }

@media (max-width:860px){
  .hero{
    grid-template-rows: 1fr auto 1fr;
    min-height:480px; height:52vh;
    background-position:center 32%;
  }
  .hero > .container{ justify-self:start; transform:none; }
}

.hero h1{ font-size:42px; line-height:1.15; color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.45); }
.hero p { font-size:22px; line-height:1.35; color:#fff !important; text-shadow:0 2px 6px rgba(0,0,0,.35); }

/* Projects – zweispaltig, Text links, Bild rechts */
.projects-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}

.projects-figure{ margin:0; }
.projects-figure img{
  display:block;
  width:100%;
  height:auto;           /* zeigt das Bild vollständig, ohne Crop */
  border-radius:12px;    /* optional */
}

.projects-copy h1{
  margin:0 0 8px;
  /* nutzt deine globalen h1-Styles (ACRE-grün etc.) */
}
.projects-copy p{ margin:0; }

/* Reihenfolge für „Bild rechts“ */
.projects-right .projects-copy{   order:1; }
.projects-right .projects-figure{ order:2; }

/* Mobil: untereinander (Text zuerst, Bild darunter) */
@media (max-width:860px){
  .projects-grid{ grid-template-columns:1fr; }
}

/* Grids */
.grid{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)) }

/* Karten/Boxen */
.card{
  background:var(--card);
  padding:18px; border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.09);
  border:1px solid var(--card-bd);
}
/* Bildkarte: Figure/Hover/Caption */
.card figure{
  margin:0; position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:12px; background:#f4f4f4;
}
.card figure img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease }
.card:hover figure img{ transform:scale(1.02) }
.card figcaption{
  padding:10px 12px; font-size:14px; color:var(--muted);
  border-top:1px solid #eee; margin-top:10px;
}

/* Platzhalter-Visual */
figure.placeholder{
  display:block; aspect-ratio:16/9; border-radius:14px;
  background:linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.01));
  outline:1px dashed rgba(0,0,0,.08);
}

/* Monospace */
pre,code,kbd,samp{
  font-family:'Fabrikat Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* Überschriften */
h1,h2,h3{
  font-family:'Fabrikat Kompakt','Fabrikat',system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--acre-green);
  margin-top:1.2em; margin-bottom:.5em; font-weight:600;
}

/* Section-Abstände */
.section{ padding:28px 0 }

/* Tabellen */
table{ border-collapse:collapse; width:100% }
th,td{ border:1px solid var(--card-bd); padding:.6em }
th{ background:var(--panel); color:var(--acre-green) }

/* Buttons */
button,.button,input[type="submit"]{
  background:var(--acre-green); color:#fff;
  border:none; border-radius:8px; padding:.6em 1.2em;
  cursor:pointer; font-weight:500;
}
button:hover,.button:hover{ background:var(--acre-green-200) }

/* Lightbox (vanilla) */
.lightbox{ position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.85); z-index:50 }
.lightbox.open{ display:grid }
.lightbox img{
  max-width:min(96vw,1400px); max-height:90vh;
  border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.lightbox .close{
  position:absolute; top:14px; right:16px;
  background:#fff; color:#000; border-radius:999px; padding:6px 10px;
  font-weight:700; cursor:pointer;
}
.sr-only{ position:absolute; left:-9999px }

/* Responsive */
@media (max-width:860px){
  .hero{ grid-template-columns:1fr }
  .grid{ grid-template-columns:1fr }
}

/* Optionale Dark-Segment-Section */
.segment-dark{
  background:#1e1e1e; color:#f0f0f0; border-radius:16px; padding:18px;
}
.segment-dark a{ color:#ffffff; text-decoration:underline }
.segment-dark h1,.segment-dark h2,.segment-dark h3{ color:#cfe9d6 }

/* Projekt-/Sponsor-Utilities */
.banner-thin{
  background-image:url('../img/27-FINAL-Mauer-Halle-Garten-2002.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat;
  height:56px; border-radius:12px; filter:brightness(1.1) saturate(.9) opacity(.12);
  margin:12px 0 20px;
}
.logo-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr)) }
@media (max-width:900px){ .logo-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:600px){ .logo-grid{ grid-template-columns:1fr } }
.logo-card{
  background:var(--card); border:1px solid var(--card-bd);
  border-radius:12px; padding:14px; display:grid; place-items:center;
}
.logo-card img{ max-height:64px; width:auto }

/* Footer V4 — etwas dichter unter dem Home-Text */
footer.site-footer {
  margin-top: 16px;     /* statt 32px */
  padding-top: 16px;
  border-top: 1px solid #e3e3e3;
  color: #444;
  font-size: 1rem;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-mini {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: inherit;             /* übernimmt 1rem von site-footer */
}

.footer-mini a {
  color: var(--acre-purple);
  text-decoration: none;
}

.footer-mini a:hover {
  text-decoration: underline;
}

.footer-meta {
  margin-top: 4px;         /* vorher 8px – jetzt enger zur ersten Zeile */
  font-size: inherit;
  color: var(--ink);
  line-height: 1.35;       /* vorher 1.5 – etwas dichter, wie Fließtext */
}

.footer-meta a {
  color: var(--acre-purple);
  text-decoration: none;
}

.footer-meta a:hover {
  text-decoration: underline;
}

.footer-meta .sep {
  opacity: 0.55;
  padding: 0 6px;
}

.site-footer small {
  font-size: inherit;             /* gleich groß wie Haupttext */
  color: var(--ink);
}

@media (max-width: 640px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ---- Fonts (place your licensed .woff2 files in assets/fonts/...) ---- */

/* ===== Fabrikat (Normal) ===== */
@font-face{
  font-family:'Fabrikat';
  src:url('../fonts/fabrikat/Fabrikat-Normal-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fabrikat';
  src:url('../fonts/fabrikat/Fabrikat-Normal-Regular-Italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Fabrikat';
  src:url('../fonts/fabrikat/Fabrikat-Normal-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fabrikat';
  src:url('../fonts/fabrikat/Fabrikat-Normal-Medium-Italic.woff2') format('woff2');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Fabrikat';
  src:url('../fonts/fabrikat/Fabrikat-Normal-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fabrikat';
  src:url('../fonts/fabrikat/Fabrikat-Normal-Bold-Italic.woff2') format('woff2');
  font-weight:700; font-style:italic; font-display:swap;
}

/* ===== Fabrikat Kompakt ===== */
@font-face{
  font-family:'Fabrikat Kompakt';
  src:url('../fonts/fabrikat-kompakt/Fabrikat-Kompakt-Web-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fabrikat Kompakt';
  src:url('../fonts/fabrikat-kompakt/Fabrikat-Kompakt-Web-Regular-Italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Fabrikat Kompakt';
  src:url('../fonts/fabrikat-kompakt/Fabrikat-Kompakt-Web-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fabrikat Kompakt';
  src:url('../fonts/fabrikat-kompakt/Fabrikat-Kompakt-Web-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fabrikat Kompakt';
  src:url('../fonts/fabrikat-kompakt/Fabrikat-Kompakt-Web-Bold-Italic.woff2') format('woff2');
  font-weight:700; font-style:italic; font-display:swap;
}

/* ===== Fabrikat Mono (optional) ===== */
@font-face{
  font-family:'Fabrikat Mono';
  src:url('../fonts/fabrikat-mono/Fabrikat-Mono-Web-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Fabrikat Mono';
  src:url('../fonts/fabrikat-mono/Fabrikat-Mono-Web-Regular-Italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
/* === ACRE minimal type scale overrides (Nov 2025) === */

/* Headings (ACRE green, enhanced hierarchy) */
h1{ font-size:32px; }
h2{ font-size:28px; }
h3{ font-size:20px; } /* nur falls verwendet */

/* --- Hero Text stronger --- */
.hero h1{
  font-size:42px;
  line-height:1.15;
  color:#ffffff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.4);
}
.hero p{
  font-size:22px;
  line-height:1.35;
  color:#ffffff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}

/* --- ACRE Oneline Logo (voll, ohne Beschnitt) --- */
:root{
  --logo-h: 48px; /* gewünschte Logohöhe im Header */
}

/* Container bleibt wie gehabt */
.brand{ display:flex; align-items:center; }
.brand-link{ display:block; line-height:0; }

/* Volles Oneline-Logo: NICHT croppen */
.logo-full{
  height: var(--logo-h);
  margin-left:4px;
  width: auto;          /* Breite ergibt sich proportional */
  display: block;
}

.logo-icon{
  height: var(--logo-h);
  aspect-ratio: var(--logo-ar) / 1;  /* nicht-quadratische Box */
  object-fit: cover;                 /* rechts (Text) wird sauber abgeschnitten */
  object-position: left center;      /* linke Welle zeigen */
  border-radius: 0px;
  display: block;
}

/* Optional: responsiv etwas kleiner auf ganz schmalen Geräten */
@media (max-width:520px){
  :root{ --logo-h: 42px; }
}

/* Narrow content wrapper for legal/privacy etc. */
.content-narrow{
  max-width:72ch;  /* begrenzt die Zeilenlänge */
  /* kein margin:auto -> bleibt linksbündig am Container */
}

.legal-note{
  font-weight:400;
}

.projects-top,
.training-top{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: flex-start;
  margin-bottom: 40px;
}

/* responsive: Bild unter den Text */
@media(max-width:860px){
  .projects-top{
    grid-template-columns:1fr;
  }
}

.projects-col-right{
  margin:0;
  position:relative;
}
.projects-col-right img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
}

/* === Projects & Training unified visual styles === */

/* Training intro layout — aligns left edge with ACRE logo */
.training-top {
  display: flex;
  gap: 2rem;
  align-items: flex-start;   /* <-- jetzt oben bündig */
  flex-wrap: wrap;
  margin-left: calc(-1 * clamp(12px, 2.2vw, 28px));
  margin-right: calc(-1 * clamp(12px, 2.2vw, 28px));
}

.training-col-left {
  flex: 1 1 340px;   /* links minimal schmaler */
  padding-left: clamp(12px, 2.2vw, 28px);
}

.training-col-right {
  flex: 1 1 480px;   /* rechts etwas breiter → Bild wird sichtbar größer */
  margin: 0;
  position: relative;
}

/* Image + readable white overlay title */
.training-hero img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 12px;
}

/* Projects & Training intro heading tightening */
.projects-intro h1,
.training-intro h1 {
  line-height: 1.15;          /* enger, Standard wäre 1.3–1.4 */
  margin-bottom: 0.35em;      /* etwas geringerer Abstand zur Folgezeile */
}

/* Tighten multi-line course titles on Training page */
.training-course h2 {
  line-height: 1.15;     /* enger, wie bei Intro-Überschriften */
  margin-bottom: 0.4em;
}

/* Alle Figuren im Hauptbereich: Bezugspunkt für Overlays */
main.page-top figure {
  position: relative;
  margin: 0;
}

/* Weißer Titel im Bild – rechts oben, harmonisiert zwischen Projects & Training */
.projects-overlay-big,
.training-overlay-big {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
  letter-spacing: .5px;
  font-family: 'Fabrikat Kompakt','Fabrikat',system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Bilder in diesen Figuren: sauber skalieren, block-level */
main.page-top figure > img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 800px) {
  .training-top { gap: 1.2rem; }
  .training-overlay-big { right: .75rem; top: .75rem; }
}

/* Training course color tokens */
:root{
  --training-blue:  #1f77b4;
  --training-red:   #d62728;
  --training-green: #2ca02c;
}

/* =========================================================
   ACRE – Course Tags (Training page)
   ========================================================= */

/* Grundform der farbigen Labels */
.course-tag {
  display: inline-block;
  padding: 2px 10px 3px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Blauton: Climate Time Series Analysis */
.course-blue {
  background-color: #2f6bb3;   /* tiefes, klares Blau */
}

/* Rotton: Statistical Analysis of Climate Extremes */
.course-red {
  background-color: #b32121;   /* kräftig, leicht warmes Rot */
}

/* Grünton: APRISE / Advanced Quantitative Research Techniques */
.course-green {
  background-color: #4b8740;   /* ACRE-Green */
}

/* optional etwas heller für optische Harmonie (Variante) */
/*
.course-green {
  background-color: #5ea852;
}
*/

/* Training courses: Bild links, an rechten Spaltenrand andocken */
.training-course .projects-grid{
  grid-template-columns:  minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3vw, 28px);      /* etwas engerer Gutter als Projekte */
  align-items: start;
}

.training-course .projects-figure{
  margin:0;
  display:flex;
  justify-content:flex-end;         /* Bild an den rechten Spaltenrand */
  align-items:flex-start;
}

.training-course .projects-figure img{
  width:auto;
  max-width:220px;                  /* Größe wie APRISE-Logo, bei Bedarf 200px */
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.10);
}

/* Mobile: Bild zentrieren unter/über Text */
@media (max-width:860px){
  .training-course .projects-grid{ grid-template-columns:1fr; }
  .training-course .projects-figure{ justify-content:center; }
}

/* Mobil neutralisieren */
@media (max-width: 860px){
  .course--offset-left.container{
    margin-left: 0 !important;
    padding-left: clamp(12px, 2.2vw, 28px) !important;
    padding-right: clamp(12px, 2.2vw, 28px) !important;
  }
}

.training-course .projects-grid{
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 28px);
  align-items: start;
}

.training-course .projects-figure{
  margin:0;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.training-course .projects-figure img{
  width:auto;
  max-width:220px;
  height:auto;
  border-radius:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.10);
}

/* Optional: Textbreite begrenzen (falls dir Zeilen zu lang werden) */
.course--cts .projects-copy{
  max-width: 40rem;
}

/* Optional: Textbreite */
.course--extremes .projects-copy{
  max-width: 42rem;
}

/* Optional: Textbreite */
.course--aprise .projects-copy{
  max-width: 30rem;
}

/* Mobile */
@media (max-width:860px){
  .training-course .projects-grid{ grid-template-columns:1fr; }
  .training-course .projects-figure{ justify-content:center; }
}

/* TRAINING: Einheitliche Bildgröße */
.course--cts .projects-figure img,
.course--extremes .projects-figure img,
.course--aprise .projects-figure img {
  max-width: 280px;
  height: auto;
  display: block;
  border: none;
  box-shadow: none;   /* entfernt grauen Rand bei APRISE */
}

/* TRAINING: Einheitliches Grid-Layout für alle Kurse */
.course--cts .projects-grid,
.course--extremes .projects-grid,
.course--aprise .projects-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: flex-start;   /* Bild und Text oben bündig */
}

.course--cts .projects-copy,
.course--extremes .projects-copy,
.course--aprise .projects-copy {
  max-width: 40rem;
}

/* TRAINING: Überschrift im Textblock oben bündig mit dem Bild */
.course--cts .projects-copy h2,
.course--extremes .projects-copy h2,
.course--aprise .projects-copy h2 {
  margin-top: 0;
}

/* =========================================================
   ACRE – (Profile page)
   ========================================================= */
.profile-questions{
  margin: 0.75rem 1.5rem 0.5rem;  /* beiderseits eingerückt */
}

.profile-questions ul{
  margin: 0;
  padding-left: 1.2rem;
}

.profile-questions li{
  margin-bottom: 0.25rem;
}

.profile-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

/* Referenzen-Card im rechten Stack nicht mehr nach ganz rechts schieben */
.profile-right .profile-refs{
  margin-top:16px;
  margin-left:0;
}

.profile-refs {
  max-width: 340px;
  margin-top: 3.5rem;
  margin-left: auto;
  font-size: 0.95rem;
}
.profile-refs h3 {
  margin-top: 0;
  font-size: 1.05rem;
}
.profile-refs ul {
  padding-left: 1.1rem;
  margin: 0;
}
.profile-refs li {
  margin-bottom: 6px;
}

/* Profile page: rechts exakt oben bündig */
.profile-right {
  margin-top: 0;
}

/* Default: kein Extra-Offset (Tablet / kleine Laptops) */
:root{ --course-left-extra: 0px; }

/* Ab 1200px Breite: leicht links */
@media (min-width: 1200px){
  :root{ --course-left-extra: -180px; }
}

/* Ab 1440px: stärker links */
@media (min-width: 1440px){
  :root{ --course-left-extra: -260px; }
}

/* Ab 1680px (Widescreen): dein „sweet spot“ */
@media (min-width: 1680px){
  :root{ --course-left-extra: -350px; }
}

/* Ab 2000px (ultra-wide): Deckel drauf, nicht mehr weiter */
@media (min-width: 2000px){
  :root{ --course-left-extra: -380px; } /* ggf. -350px lassen */
}