html{
scroll-behavior:smooth;
}

body{
background:#e7ecea;
font-family:'Manrope',sans-serif;
color:#1e2b28;
margin:0;
}



/* SIDEBAR */

.sidebar{
position:fixed;
left:0;
top:0;
height:100%;
width:55px;
overflow:hidden;
background:rgba(235,240,238,0.97);
backdrop-filter:blur(6px);
box-shadow:2px 0 8px rgba(0,0,0,0.06);
z-index:1001;
transition:width .25s ease;
display:flex;
flex-direction:column;
}
.sidebar.open{
width:200px;
}
.sidebar-toggle{
display:flex;
justify-content:center;
align-items:center;
width:55px;
padding:8px 0;
background:none;
border:none;
cursor:pointer;
flex-shrink:0;
color:#5b6e69;
transition:color .2s ease;
}
.sidebar-toggle:hover{
color:#2fbf71;
}
.sidebar-nav{
padding-top:12px;
display:flex;
flex-direction:column;
}
.sidebar-link{
display:flex;
align-items:center;
padding:8px 0;
text-decoration:none;
color:#5b6e69;
white-space:nowrap;
overflow:hidden;
transition:color .2s ease;
}
.sidebar-link:hover{
color:#2fbf71;
}
.sidebar-link:hover .sidebar-label{
font-weight:600;
}
.sidebar-icon{
width:55px;
flex-shrink:0;
display:flex;
justify-content:center;
align-items:center;
}
.sidebar-icon img{
width:45px;
height:45px;
object-fit:contain;
filter:grayscale(1) brightness(0.55);
transition:filter .2s ease;
}
.sidebar-link:hover .sidebar-icon img{
filter:grayscale(1) sepia(1) saturate(5) hue-rotate(107deg);
}
.pair-head-icon{
display:inline-block;
width:55px;
height:55px;
background:url('/logo.png') no-repeat;
background-size:210% auto;
background-position:50% 0%;
filter:grayscale(1) brightness(0.55);
transition:filter .2s ease;
}
.sidebar-link:hover .pair-head-icon{
filter:grayscale(1) sepia(1) saturate(5) hue-rotate(107deg);
}
.sidebar-label{
padding-left: 10px;
font-size:15px;
font-weight:500;
opacity:0;
transform:translateX(-8px);
transition:opacity .2s ease,transform .2s ease;
}
.sidebar.open .sidebar-label{
opacity:1;
transform:translateX(0);
}



/* centered content container */

.main-container{
max-width:1200px;
margin:auto;
}



/* FULL WIDTH HEADER */

.top-links{

position:sticky;
top:0;
z-index:1000;

width:100%;

background:rgba(200,208,206,0.97);
backdrop-filter:blur(6px);

padding:8px 0;
}

.nav-inner{
max-width:1200px;
margin:auto;
text-align:center;
}



/* NAV LINKS */

.top-links a{

margin:0 24px;
font-size:18px;
font-weight:500;
text-decoration:none;
color:#5b6e69;

transition:all .2s ease;

}

.top-links a:hover{

color:#2fbf71; /* saturated gray-green */
/*font-weight:600;*/

}



/* HOME */

#home{

height:1100px;

display:flex;
align-items:center;
justify-content:center;
flex-direction:column;

position:relative;

}

.home-image{
	max-width:100%;
}



/* SCROLL INDICATOR */

.scroll-indicator{

position:absolute;
bottom:40px;
font-size:28px;
opacity:.6;

animation:arrowBounce 2s infinite;

}

@keyframes arrowBounce{

0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(10px);}
60%{transform:translateY(6px);}

}






/* TITLE */

.sessions-header h2{

font-size:42px;
font-weight:600;
margin-bottom:0;

}



/* SUBTITLE — point 1: 14px, muted gray */

.sessions-header p{

font-size:14px;
margin-top:2px;
color:#6f817b;

}



/* subtitle link style (same behavior as nav) */

.sessions-header a{

color:#5b6e69;
text-decoration:none;
font-weight:500;
transition:all .2s ease;

}

.sessions-header a:hover{

color:#2fbf71;
/*font-weight:600;*/

}



/* youtube icon */

.youtube-icon{

height:13px; /* 35% smaller */
margin-right:6px;
vertical-align:middle;

}



/* VIDEOS */

.video-row{
margin-top:28px !important;
}



/* RECORDINGS — point 2: tall section matching home */

#recordings{

min-height:1000px;
padding-top:60px;
padding-bottom:80px;

}



/* FOOTER */

.footer-sep{
  border-top:1px solid #cfd7d4;
  margin:70px 0 0 0;
}


/* PROJECT LIST */

#projects{

min-height:800px;
padding-top:60px;
padding-bottom:80px;

}


.project-list{
margin-top:40px;
}

/* PROJECT CARD — point 3: concept C with eyebrow + all-caps name */

.project-item{
margin-bottom:32px;
border:0.5px solid #cfd7d4;
border-radius:12px;
background:#fff;
padding:20px 22px;
}

.project-item-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:16px;
}

.project-eyebrow{
font-size:10px;
font-weight:500;
letter-spacing:0.12em;
text-transform:uppercase;
color:#8fa39e;
display:block;
margin-bottom:3px;
}

.project-item h3{
font-size:17px;
font-weight:600;
letter-spacing:0.08em;
text-transform:uppercase;
margin:0 0 3px 0;
}

.project-sub{
font-size:13px;
color:#6f817b;
margin:0;
}

.project-repo-count{
font-size:11px;
color:#2fbf71;
background:rgba(47,191,113,0.1);
border-radius:8px;
padding:3px 9px;
white-space:nowrap;
margin-top:2px;
}

.repo-links{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}

.repo-links a{
display:flex;
align-items:center;
gap:9px;
padding:9px 12px;
font-size:12px;
border:0.5px solid #cfd7d4;
border-radius:8px;
text-decoration:none;
color:#5b6e69;
transition:color .2s ease, border-color .2s ease;
}

.repo-links a:hover{
color:#2fbf71;
border-color:#2fbf71;
}

.repo-links a svg{
width:17px;
height:17px;
opacity:0.55;
flex-shrink:0;
transition:opacity .2s ease;
}

.repo-links a:hover svg{
opacity:1;
}

.repo-link-name{
font-size:12px;
color:#1e2b28;
font-weight:500;
display:block;
}

.repo-link-sub{
font-size:11px;
color:#8fa39e;
}

/* AI BACKGROUND */
.ai-list{margin-top:40px;}

.ai-item{
margin-bottom:32px;
padding-bottom:16px;
border-bottom:1px solid #cfd7d4;
}

.ai-top{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}

.ai-title{
font-size:18px;
text-decoration:none;
color:#1e2b28;
font-weight:500;
transition:all .2s ease;
}

.ai-title:hover{color:#2fbf71;}

.ai-tag{
font-size:12px;
padding:3px 8px;
border-radius:12px;
background:#e7ecea;
color:#5b6e69;
}

.ai-desc{
font-size:14px;
color:#6f817b;
margin-top:6px;
}

/* ── FOOTER ──
   Der <footer> geht über die volle Bildschirmbreite (kein padding links/rechts
   auf dem Element selbst). Das innere .footer-inner spiegelt exakt
   .main-container: max-width 1200px, margin auto, padding 0 24px.
   Dadurch fluchten alle Spaltenränder mit dem Seiteninhalt.
*/
footer {
  background: #0f172a;
  color: #e5e7eb;
  margin-top: 80px;
  padding: 48px 0 40px 0;   /* ← kein horizontales padding hier */
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;           /* ← identisch mit .main-container */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
  line-height: 1.6;
  min-width: 120px;
}

.footer-col-label {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #64748b;
  margin-bottom: 2px;
}

.footer-col .footer-value { color: #e5e7eb; }

/* Footer-Links: hell auf dunkel, Hover grün – nie blau */
.footer-col a {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #e5e7eb !important;   /* überschreibt den globalen a-Stil */
  text-decoration: none;
  font-weight: 400;
  transition: color .2s ease;
}
.footer-col a:hover, .footer-bottom a:hover { color: #2fbf71 !important; }

.footer-col svg {
  width: 14px; height: 14px;
  fill: currentColor;
  flex-shrink: 0;
  opacity: 0.7;
}
.footer-col a:hover svg { opacity: 1; }

/* Trennlinie + Copyright – ebenfalls bündig mit main-container */
.footer-divider {
  border: none;
  border-top: 1px solid #1e293b;
  max-width: 1200px;
  margin: 32px auto 0 auto;
  padding: 0 24px;            /* wirkt nicht auf hr – deshalb wrapper unten */
}

/* wrapper damit die Linie auch padding bekommt */
.footer-bottom-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  border-top: 1px solid #1e293b;
  margin-top: 32px;
}

.footer-bottom {
  font-size: 13px;
  color: #475569;
  padding-top: 20px;
}

.footer-bottom a {
  font-size: 13px;
  color: #475569;
  text-decoration: none;
  font-weight: 400;
  transition: color .2s ease;
}



/* IMPRESSUM */

/* base anchor style (scoped overrides in nav/footer take precedence) */
a{color:#5b6e69;text-decoration:none;transition:color .2s ease;}
a:hover{color:#2fbf71;}

/* impressum adds top/side padding to the shared container */
#impressumPage{padding:60px 24px 0 24px;}

.content-inner{max-width:760px;}
.page-section{margin-bottom:60px;}

h1{font-size:36px;font-weight:600;margin:0 0 6px 0;}
h2{font-size:18px;font-weight:600;margin:32px 0 6px 0;color:#1e2b28;}
p,li{font-size:15px;line-height:1.75;color:#3a4f4a;margin:0 0 8px 0;}
ul{padding-left:20px;margin:0 0 12px 0;}

code{font-size:13px;background:#d8e0dd;padding:1px 5px;border-radius:3px;}
.section-divider{border:none;border-top:1px solid #cfd7d4;margin:50px 0;}

/* NONCEY PAGE */
#nonceyPage{padding:60px 24px 0 24px;}
#nonceyPage h1{font-size:46px;margin-bottom:70px;}
#nonceyPage h2{font-size:26px;font-weight:600;margin:0 0 20px 0;color:#1e2b28;}
#nonceyPage h3{font-size:18px;font-weight:600;margin:20px 0 26px 0;color:#1e2b28;}
#nonceyPage a{color:#0f172a;}
#nonceyPage a:hover{color:#2fbf71;}

/* Bootstrap form overrides — keep Manrope, accent green focus */
.form-label{font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;color:#1e2b28;margin-bottom:5px;}
.form-control{font-family:'Manrope',sans-serif;font-size:15px;color:#1e2b28;border-color:#cfd7d4;}
.form-control:focus{border-color:#2fbf71;box-shadow:0 0 0 0.2rem rgba(47,191,113,0.2);}
.form-check-input:checked{background-color:#2fbf71;border-color:#2fbf71;}
.form-check-input:focus{box-shadow:0 0 0 0.2rem rgba(47,191,113,0.2);}
.form-check-label{font-family:'Manrope',sans-serif;font-size:14px;color:#3a4f4a;}
.noncey-form{margin-top:4px;}
.noncey-submit{margin-top:4px;padding:10px 28px;font-family:'Manrope',sans-serif;font-size:15px;font-weight:500;color:#fff;background:#2fbf71;border:none;border-radius:8px;cursor:pointer;transition:background .2s ease;}
.noncey-submit:hover{background:#28a862;}
.form-success{padding:12px 16px;background:rgba(47,191,113,0.12);border:1px solid #2fbf71;border-radius:8px;color:#1a7a48;font-size:15px;margin-bottom:20px;}
.form-error{padding:12px 16px;background:rgba(200,50,50,0.08);border:1px solid #c43232;border-radius:8px;color:#8b1a1a;font-size:15px;margin-bottom:20px;}

/* Installation links */
.install-link{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:500;color:#0f172a;text-decoration:none;transition:color .2s ease;}
.install-link:hover{color:#2fbf71;}
.install-link i{font-size:16px;line-height:1;}
.build-meta{font-size:13px;color:#8fa39e;margin-top:6px;}