@charset "UTF-8";

/*Schriften*/
@font-face { font-family:'Text'; src:url('/lebenslauf/merriweather-regular.woff2'); font-display: swap; }

@font-face { font-family:'Ueberschrift'; src:url('/lebenslauf/ibm-plex-serif.woff2'); font-display: swap; }

:root {
	--font-sans-serif:Text, 'Segoe UI', Tahoma, Geneva, Verdana, 'Helvetica Neue', -apple-system, sans-serif;
	--font-serif:Ueberschrift, Georgia, "Times New Roman", Times, "Noto Serif", serif;
	--primary:#0052cc;
	--bg:#fef6e9;
	--bglight:#fefef9;
	--bggray:#f1f3f4;
	--color:#000;
}

@media (prefers-reduced-motion:no-preference) {
	:root { scroll-behavior:smooth; }
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*Standards*/
html { color:var(--color); background:var(--bg); font-family:var(--font-sans-serif); }

body { font-size:100.1%; font-weight:400; letter-spacing:.02em; line-height:1.6; }

ul { margin:.5rem; padding:0; }
li { margin:.5rem; padding:0; }

p { margin:0; padding:0 0 0.5rem 0; hyphens:auto; hyphenate-limit-chars:auto 3; hyphenate-limit-lines:2; hyphenate-limit-last: none; }

h1, h2, h3, h4, h5 { margin:0.2rem 0 0.2rem 0; padding:0; font-weight:700; }
h1 { font-size:2.4rem; line-height:1.4rem;  font-family:var(--font-serif); }
h2 { font-size:1.3rem;  font-family:var(--font-serif); }
h3 { font-size:1.2rem; }
h4 { font-size:1.1rem; }
h5 { font-size:1.0rem; }

a, a:visited { color:var(--color); background:none; text-decoration:underline; font-weight:700; border-radius:0.1rem; transition:color .2s, background .2s; }
a:visited { font-weight:inherit; }
a:focus-visible, a:hover, a:active { text-decoration:none; background:none; color:var(--primary); }

img { margin:0; padding:0; border:none; }

.hidden { display:none; }

/*Anpassungen */
html { min-height: 100vh; max-width:100vw; padding: 0.8rem; font-size:clamp(1rem, 1vw + 0.3rem, 1.125rem); }

body { max-width: 70em; width: 95%; margin: 0 auto; padding:0.8em 0.8em 0 0.8em; background: linear-gradient(90deg, #fff, #eee, #fff); border-radius: 0.3rem; box-shadow: 0 0.4rem 0.8rem rgba(0,0,0,0.1); }
body::after { content: ""; display: table; clear: both; }

/* Desktop: 3-Spalten-Raster */
body{ display:grid; grid-template-columns:auto 1fr; gap:1rem; }
header,footer{ grid-column:1/-1; }
nav{ position:sticky; top:2rem; height:fit-content; }


header, footer { background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); color: #fff; padding: 1.2rem 0.6rem 0.8rem; border-radius:0.4em; }

header h1 { padding: 0.5rem 0.5rem 1.5rem 0.5rem; }

header ul, footer ul { display: flex; justify-content: center; gap:0.6rem 0; flex-wrap: wrap; flex-direction: column; align-items: flex-start; }

header li, footer li { display: flex; align-items: center; font-size: 0.9rem; font-weight:700; margin:0; padding:0; }

header li::before, footer li::before { content: attr(data-icon); font-size: 1.2rem; }
footer li:first-child { font-size:1.2rem; }
footer p { font-size:0.9rem; padding:0.9rem 0.9rem 0.3rem; }

header a, footer a, header a:visited, footer a:visited  { color:#fff; }

nav { margin:0; padding: 0.4rem 0.4rem 0.4rem 0; }
nav ul { margin:0; padding:0; }
nav li { list-style:none; }
nav li a { display:block; padding: .5rem; border-radius: 1rem 1rem 0.3rem 0.3rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); transition: all 0.3s ease; }
nav li a:hover { background:#fff; }

main { padding: 0.6rem; }

figure { display:flex; text-align:right; margin:0 0 0.8em 0.8em; padding:0; }

header figure, footer figure { margin-top:-0.5rem; max-width:25%; float:right; }
header img, footer img { margin:0; padding:0; border-radius: 0.4rem; transition: all 0.3s ease; }
header span, footer span { display:none; }

article { margin:0 0 1em 0; padding: 0 0.8rem; background: #fff; border-radius:0.8rem 0.8rem 0.2rem 0.2rem; }
article p { color: #2c3e50; padding: 0.4rem 0.4rem 0.8rem 0.4rem; margin:0; font-size: 1.1rem; }

section { margin-bottom: 0.8rem; padding: 1.5rem 0.8rem 1.5rem 0.8rem; border-radius: 1.3rem 1.3rem 0.8rem 0.8rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

h2 { color: #2c3e50; font-size: 1.8rem; margin: 0.4rem 0 0.4rem 0; padding: 0.5rem 0 0.2rem 0; border-bottom: 0.1rem solid #3498db; }
article h2 { border-bottom:none; }

aside { margin:1rem 0.2rem 0.5rem 0; padding:0; }
.back-to-top { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: bold; color: #333; padding: 0.5rem 1rem; border-radius: 0.5rem; transition: background 0.3s ease; }
aside:nth-child(2) { display:none; }

.job { margin-bottom: 0.5rem; padding: 0.4rem; background: #f8f9fa; border-radius: 0.15rem; border-left: 0.1rem solid #3498db; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; align-items: flex-start; gap: 1rem; }
.job-content { flex: 1; }
.job .certificate-image { flex-shrink: 0; margin: 0; width: 10rem; }
.job:nth-child(3) { background-image:url('img/hanfmuseum-logo.png'); background-repeat: no-repeat; background-position:left bottom; background-origin: content-box; }
.job:nth-child(7) { background-image:url('img/deutscher-hanfverband-logo.png'); background-repeat: no-repeat; background-position:left bottom; background-origin: content-box; }

.job, .education-item, .skills > li { border-radius:.75rem; margin-top:1rem; padding:1.25rem; box-shadow:0 0.05rem 0.15rem rgba(0,0,0,.08); transition:box-shadow .2s; }
.job:hover, .education-item:hover, .skills > li:hover { margin-top:1rem; box-shadow:0 0.2rem 0.2rem rgba(0,0,0,.5), 0.1rem 0.2rem 0.6rem rgba(0,0,0,.25); }
.projects-list li:hover { background: var(--bggray); border-left-color: #229954; }

.publications-list li:hover { background: var(--bggray); border-left-color: #d68910; }

.job-title { font-size: 1.2rem; font-weight: bold; color: #2c3e50; background:var(--bggray); margin-bottom: 0.15rem; }
.job-company { color: #3498db; font-weight: bold; margin-bottom: 0.15rem; }
.job-period { color: #555; font-size: 0.9rem; margin-bottom: 0.2rem; }
.job-description { color: #555; background: #f8f9fa; line-height: 1.5; }
.job-certificate { margin-top: 0.3rem; text-align: right; }

.image { margin:0; width: 12rem; height:auto; border-radius: 0.15rem; transition: all 0.3s ease; display:grid; grid-template-columns:1fr; }
.image ~ .image { margin:0 0 0 1em; }
section .image { margin:0.5em 0 0 0; color: #555; } 
.image:hover { transform: scale(1.05); border-color: #3498db; box-shadow: 0 0.15rem 0.3rem rgba(52, 152, 219, 0.3); color:var(--primary); }
.image img { margin:0 0 0.6em 0; padding:0; width:100%; height:auto; display:block; }
.certificate-label { font-size: 0.85rem; padding: 0.15rem 0.15rem 0.15rem 0; font-style: italic; }

.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0.4rem; list-style:none; }
.skills > li { background: #f8f9fa; padding: 0.4rem; border-radius: 0.2rem; border-left: 0.1rem solid #3498db; }
.skills li h3 { color: #2c3e50; margin-bottom: 0.3rem; font-size: 1.1rem; }
.skills li ul { list-style: none; }
.skills li li { padding: 0.15rem 0; color: #555; padding-left: 0.4rem; }
.skills li li::before { content: '▶'; margin:0 0.3em 0 0; color: #3498db; }

h3[data-type="speak"]::before { content: '🎙 '; }
h3[data-type="event"]::before { content: '🎪 '; }
h3[data-type="web"]::before { content: '🌐 '; }
h3[data-type="design"]::before { content: '🎨 '; }
h3[data-type="book"]::before { content: '📖 '; }
h3[data-type="award"]::before { content: '🏆 '; }
h3[data-type="nomination"]::before { content: '🌟 '; }


.education-item { background: #f8f9fa; padding: 0.4rem; border-radius: 0.15rem; margin-bottom: 0.3rem; border-left: 0.1rem solid #e74c3c; }
.education-title { font-weight: bold; color: #2c3e50; margin-bottom: 0.15rem; }
.education-institution { color: #3498db; margin-bottom: 0.15rem; }
.education-period { color: #555; font-size: 0.9rem; }

.languages { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.language { background: #3498db; color: #fff; padding: 0.2rem 0.4rem; border-radius: 0.5rem; font-weight: bold; }

.projects-list { list-style: none; }
.projects-list li { background: #f8f9fa; padding: 0.3rem; margin-bottom: 0.2rem; border-radius: 0.15rem; border-left: 0.1rem solid #27ae60; padding-left: 0.8rem; }
.projects-list li::before { content: '✓'; margin:0 0.5rem 0 0; color: #27ae60; font-weight: bold; }

#publikationen h3 { min-height:5.1rem; }
#publikationen li:last-child h3 { min-height:0; }
#publikationen .image { grid-template-rows:18.6rem auto; align-items:end; }

.publications-list { list-style: none; }
.publications-list li { background: #f8f9fa; padding: 0.3rem; margin-bottom: 0.2rem; border-radius: 0.15rem; border-left: 0.1rem solid #f39c12; padding-left: 0.8rem; }

/* Regenbogenverlauf je Section */
html { background: linear-gradient(135deg, #fce4ec, #ffe0b2, #fff9c4, #dcedc8, #bbdefb, #d1c4e9, #f3e5f5); }
#job, nav a[href="#job"]  {
  background: linear-gradient(135deg, #fce4ec, #f8bbd0);
}

#skills, nav a[href="#skills"] {
  background: linear-gradient(135deg, #ffe0b2, #ffccbc);
}

#bildung, nav a[href="#bildung"] {
  background: linear-gradient(135deg, #fff9c4, #fff59d);
}

#sprachen, nav a[href="#sprachen"] {
  background: linear-gradient(135deg, #dcedc8, #c5e1a5);
}

#projekte, nav a[href="#projekte"] {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
}

#publikationen, nav a[href="#publikationen"] {
  background: linear-gradient(135deg, #d1c4e9, #b39ddb);
}

#presse, nav a[href="#presse"] {
  background: linear-gradient(135deg, #f3e5f5, #e1bee7);
}

/* Test */
/* Small Screen */
/* Hamburger-Menue fuer kleine Bildschirme */
.menu-toggle { display:none; position:relative; cursor:pointer; padding:0.4em; margin:0.15em 0 0 0; border-radius:0.3em; background:transparent; border:none; font-size:1.4em; font-weight:700; transition:var(--transition-standard, all 1.5s ease); }

.menu-toggle:hover { color:#fff; background:#000; }

/* Checkbox verstecken */
#menu-checkbox { display:none; }

/* Hamburger-Icon (drei Striche) */
.hamburger { display:block; width:1.5625em; height:0.1875em; background:#000; margin:0.3125em 0; transition:0.3s; border-radius:0.125em; }
.hamburger::before, .hamburger::after { content:''; display:block; width:1.5625em; height:0.1875em; background:#000; margin:0.3125em 0; transition:0.3s; border-radius:0.125em; }
.hamburger::before { transform:translateY(-0.5em); }
.hamburger::after { transform:translateY(0.3125em); }

/* Animation wenn Menue geoeffnet ist */
#menu-checkbox:checked ~ .menu-toggle .hamburger { background:transparent; }
#menu-checkbox:checked ~ .menu-toggle .hamburger::before { transform:rotate(45deg); }
#menu-checkbox:checked ~ .menu-toggle .hamburger::after { transform:rotate(-45deg) translateY(-0.6em); }

/* Hamburger-Icon Farbe bei Hover */
.menu-toggle:hover .hamburger, .menu-toggle:hover .hamburger::before, .menu-toggle:hover .hamburger::after { background:#fff; }


/* Small Screen */
@media (max-width: 768px) {
	
/* Menue anzeigen wenn Checkbox gecheckt ist */
	#menu-checkbox:checked ~ nav ol { max-height: 30em; opacity: 1; }
	#menu-checkbox:checked { position:sticky; top:2rem; }
	.menu-toggle { display: block; }
    nav ol { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; }

/* Rest */	
	html { padding:0.2rem; }
	body { width:95%; max-width:95%; grid-template-columns:1fr; }
	h1 { font-size:1.8rem; line-height:2rem; }
	h2 { font-size:1.4rem; margin:0 0.2rem 0 0.4rem; }
	h3 { font-size:1.1rem; }
	nav{ position:static; margin: 0; }
	header, footer p { text-align: left; }
	header figure, footer figure { max-width:25%; }
	nav { font-size:1rem; }
	nav li { padding:0.2em 0 0.2em 0; }
	article { margin:0; padding-top:0; max-width; }
	aside:nth-child(2) { display: inline-flex; }
	#publikationen h3 { min-height:0; }
	section { padding: 0.2rem; }
	.contact-info { flex-direction: column; gap: 0.3rem; }
	.skills { grid-template-columns: 1fr; }
	.job { flex-direction: column; }
	.job:nth-child(3), .job:nth-child(7) { background-image:none; }
	header .image, footer .image { width:10rem; max-width:10rem; align-self: center; margin-top: 0.5rem; }
	.image { width:45%; max-width:45%; align-self: center; margin-top: 0.5rem; }
	#publikationen .image { grid-template-rows:auto auto; align-items:end; }
	.job, .education-item, .skills > li { box-shadow:0 0.2rem 0.6rem rgba(0,0,0,.12); }
}