
  <style>
    :root{
      --bg: #202020;        /* dark slate */
      --bg-soft:#1DB56E;   /* Hintergrund bei Linker button */
      --text:#e5e7eb;      /* Standardtext */
      --muted:#FFFFFF;     /* Schriften */
      --brand:#037D44;     /* button verlauf1 */
      --brand-2:#0ED478;   /* button verlauf2 */
      --card:#262729;      /* boxes */
      --border:#57FFB1;    /* lines */
      --link:#FFFFFF;
      --shadow:0 10px 30px rgba(0,0,0,.35);
    }
    [data-theme="light"]{
      --bg:#ffffff;
      --bg-soft:#61CD9A;
      --text:#303030;
      --muted:#008346;
      --brand:#00FF7F;
      --brand-2:#0ED478;
      --card:#E5E5E5;
      --border:#00D270;
      --link:#000000;
      --shadow:0 10px 24px rgba(0,0,0,.08);
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      background:var(--bg); color:var(--text); line-height:1.6;
    }
    a{color:var(--link); text-decoration:none}
    a:focus, button:focus, input:focus, textarea:focus{outline:2px solid var(--brand); outline-offset:2px}
    img{max-width:100%; height:auto; display:block}
    .container{max-width:1100px; margin-inline:auto; padding:0 1rem}
    header{
      position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(8px);
      background:color-mix(in srgb, var(--bg), transparent 25%);
      border-bottom:1px solid var(--border);
    }
    nav{display:flex; align-items:center; gap:1rem; padding:.75rem 0}
    .brand{display:flex; align-items:center; gap:.75rem}
    .brand__logo{width:80px; height:60px; border-radius:8px; overflow:hidden; border:1px solid var(--border)}
    .brand__name{font-weight:700}
    .spacer{flex:1}
    .nav__links a{padding:.5rem .75rem; border-radius:999px}
    .nav__links a:hover{background:var(--bg-soft)}
    .theme-toggle{border:1px solid var(--border); background:var(--card); color:var(--text); border-radius:999px; padding:.4rem .75rem; cursor:pointer}

    .hero{padding:4rem 0 2rem; display:grid; gap:2rem; grid-template-columns:1fr; align-items:center}
    @media (min-width:900px){.hero{grid-template-columns:1.2fr .8fr}}
    .hero__title{font-size:clamp(2rem, 3.2vw + 1rem, 3.5rem); line-height:1.15; font-weight:800; margin:0}
    .hero__subtitle{font-size:1.125rem; color:var(--muted); margin:.75rem 0 1.25rem}
    .cta{display:flex; gap:.75rem; flex-wrap:wrap}
    .btn{display:inline-flex; align-items:center; gap:.5rem; padding:.65rem .9rem; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); box-shadow:var(--shadow)}
    .btn--primary{background:linear-gradient(135deg, var(--brand), var(--brand-2)); border:none}

    .section{padding:3rem 0; border-top:1px solid var(--border)}
    .section h2{margin:0 0 1rem; font-size:1.75rem}
    .grid{display:grid; gap:1rem}
    @media (min-width:800px){.grid-2{grid-template-columns:1fr 1fr}}
    @media (min-width:1000px){.grid-3{grid-template-columns:repeat(3, 1fr)}}

    .card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:1rem; box-shadow:var(--shadow)}
    .meta{color:var(--muted); font-size:.95rem}



    /* Publikationsliste */
    .pub-list{display:grid; gap:1rem}
    .pub-item{padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--card)}
    .pub-actions{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}

    /* Tabelle für CV (druckfreundlich) */
    table{width:100%; border-collapse:collapse}
    th, td{padding:.6rem .5rem; border-bottom:1px solid var(--border); vertical-align:top}
    th{text-align:left; width:28%}

	.hero__media {
	  text-align: right; /* Inhalt (das Bild) rechts ausrichten */
	}	

	.hero__media img {
	  width: 40%;
	  height: auto;
	  object-fit: cover;
	  border: 3px solid #808080; /* kleiner Rahmen, Farbe nach Wunsch */
	  border-radius: 4px;
	  margin-left: auto; /* schiebt das Bild nach rechts */
	  display: block;
	  transition: transform 0.3s ease, box-shadow 0.3s ease;
	}


	.hero__media img:hover {
	  transform: scale(1.05); /* leicht vergrößern */
	  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* Schatten hinzufügen */
	  border-color: #43CD80; /* optional: Rahmenfarbe leicht ändern */
	}

	.cv-header {
	  display: flex;
	  justify-content: space-between; /* Titel links, Button rechts */
	  align-items: center;           /* vertikal zentriert */
	  margin-bottom: 1rem;           /* etwas Abstand nach unten */
	}

	.cv-header h2 {
	  margin: 0; /* verhindert extra Abstand */
	}

	@media (max-width: 600px) {
	  body {
	    font-size: 14px;
	  }

	 }


	/* Language switch*/
 	.lang-btn { margin: 0 5px; cursor: pointer; }

	  /* Texte nach Sprache */
	  .lang { display: none; }
	  .lang.de { display: block; }



html[data-theme="dark"] {
  --bg-color: #262729;
  --text-color: #f0f0f0;
  --overlay-color: rgba(0, 0, 0, 0.8);
  --card-bg: #262729
;
}

/* Basis-Styling für das Popup (zuerst unsichtbar) */




    footer{padding:2rem 0; border-top:1px solid var(--border); color:var(--muted); font-size:.95rem}

    /* Druckstil (vereinfacht) */
    @media print{
      header, .cta, .theme-toggle, .nav__links, .hero__media, .contact-form {display:none !important}
      body{background:#fff; color:#000}
      a{color:#000}
      .section{border:0; padding:0}
    }

 </style>
