/* ========= Base / Reset ========= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

:root{
  --c-primary: #1e3a8a;
  --c-text:    #0f172a;
  --c-muted:   #334155;
  --c-border:  #e5e7eb;
  --c-soft:    #f8fafc;
  --header-pad-y: 10px;     /* für konsistente Höhe */
  --header-pad-x: 20px;
}

body{
  font-family: system-ui, Arial, sans-serif;
  color: var(--c-text);
  background: #fff;

  /* Sticky-Footer-Layout */
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main{ flex: 1; display: block; }

/* ========= Einzeiliger Sticky Header ========= */
.site_header{
  position: sticky; top: 0; z-index: 30;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--c-border);
}

/* Eine Zeile mit links: Brand + Shortlinks, rechts: Projektnav */
.header_inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: var(--header-pad-y) var(--header-pad-x);
  flex-wrap: nowrap;
  min-height: 56px; /* visuelle Mindesthöhe */
}

/* Linke Gruppe */
.left_group{
  display: flex; align-items: center; gap: 16px; flex: 0 1 auto;
}
.brand {
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 18px;          /* falls vorher definiert */
  color: inherit;           /* übernimmt die normale Schriftfarbe */
  text-decoration: none;    /* entfernt Unterstreichung */
  cursor: pointer;
}

.brand:visited {
  color: inherit;           /* verhindert das typische „Link-violett“ */
}

.brand:hover,
.brand:focus {
  color: inherit;           /* kein Farbwechsel bei Hover */
  text-decoration: none;
}

/* CV/Kontakt */
.top_links{ display: flex; gap: 12px; flex-wrap: nowrap; }
.top_links a{
  text-decoration: none; color: var(--c-text); font-size: 14px;
  padding: 4px 8px; border-radius: 6px; border: 1px solid transparent;
}
.top_links a:hover{ border-color: var(--c-border); }

/* Projektnavigation rechts (scrollbar auf kleineren Screens) */
.nav_bar{
  display: flex; gap: 10px; flex: 1 1 auto; justify-content: flex-end;
  overflow-x: auto; overflow-y: hidden; white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-left: 10px; /* kleine optische Trennung */
}
.nav_bar::-webkit-scrollbar{ height: 6px; }
.nav_bar::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius: 9999px; }
.nav_bar a{
  flex: 0 0 auto;
  text-decoration: none; color: var(--c-text); font-size: 14px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid transparent;
}
.nav_bar a.active{ border-color: var(--c-primary); color: var(--c-primary); }

/* Anker-Offset unter Sticky Header (≈ Headerhöhe) */
.section{ scroll-margin-top: 72px; }

/* ========= Sections / Panels ========= */
.section{ border-bottom: 1px solid var(--c-border); padding: 16px 0; }
.section_inner{ width: min(1100px, 92vw); margin: 0 auto; display: grid; gap: 12px; }

.section_title_row{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 8px 0;
}
.section_title_row:hover{ background: #f8fafc; transition: background-color .15s ease; }
.section_title{ font-size: 20px; font-weight: 700; color: var(--c-primary); user-select: none; }

.section_panel{ display: grid; overflow: hidden; transition: grid-template-rows .28s ease, opacity .28s ease; }
.section_panel.closed{ grid-template-rows: 0fr; opacity: .25; }
.section_panel.open{   grid-template-rows: 1fr; opacity: 1; }
.panel_content{ min-height: 0; }

/* ========= Inhalt: 70/30 Layout ========= */
.block_content{
  display: grid;
  /* Textspalte auf sinnvolle Zeilenlänge begrenzen, Bildspalte mit Mindestbreite */
  grid-template-columns: minmax(56ch, 1fr) minmax(360px, 28%);
  column-gap: 10px;     /* NUR horizontaler Abstand */
  row-gap: 8px;         /* vertikal */
  align-items: start;
}

.block_text p{ line-height: 1.55; font-size: 15px; margin-bottom: 8px; }
.block_kv{ display: grid; gap: 6px; font-size: 14px; color: var(--c-muted); }
.block_kv dt{ font-weight: 600; }
.block_kv dd{ margin-left: 0; }

/* ========= Buttons / Links im Info-Block ========= */
.block_kv a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--c-primary);
  border-radius: 6px;
  color: #fff;                   /* weiße Schrift */
  background: var(--c-primary);  /* blauer Hintergrund */
  text-decoration: none;
  font-size: 14px;
  transition: background .2s ease, color .2s ease;
}

.block_kv a:hover {
  background: #fff;              /* weißer Hintergrund */
  color: var(--c-primary);       /* blaue Schrift */
}


/* ========= Bilder rechts ========= */
.block_image{
  position: relative;
  width: 100%;
  justify-self: end;      /* Bild an die rechte Kante, kein zusätzlicher „Innenabstand“ */
}
.block_image img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  max-width: 480px;       /* optional: harte Obergrenze */
}
/* ========= Footer ========= */
.site_footer{
  padding: 20px 14px;
  text-align: center;
  font-size: 13px;
  color: #475569;
  border-top: 1px solid var(--c-border);
  background: var(--c-soft);
  flex-shrink: 0;
}
.site_footer a{ color: var(--c-primary); text-decoration: none; }
.site_footer a:hover{ text-decoration: underline; }

/* ========= Textseiten (Impressum/Datenschutz) ========= */
.text_page{
  max-width: 700px;
  margin: 60px auto;
  padding: 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-text);
}
.text_page h1{ font-size: 24px; margin-bottom: 20px; }
.text_page p + p{ margin-top: 12px; }

/* ========= Responsive ========= */
@media (max-width: 980px){
  .block_content{
    grid-template-columns: minmax(50ch, 1fr) minmax(320px, 32%);
    column-gap: 10px;
  }
}
@media (max-width: 720px){
  .block_content{ grid-template-columns: 1fr; }  /* erst hier auf eine Spalte */
}
/* ========= Reduced Motion ========= */
@media (prefers-reduced-motion: reduce){
  .section_panel{ transition: none; }
  .section_title_row:hover{ transition: none; }
}

/* ========= Galerie – robuste Variante ========= */
.block_image.gallery {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

.block_image .slides {
  position: relative;
  width: 100%;
}

.block_image .slide { display: none; }
.block_image .slide.is-active { display: block; }

.block_image .slide img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ========= Pfeile – exakt symmetrisch und mittig ========= */
.block_image .nav{
  position: absolute;
  inset-block: 0;                 /* oben/unten 0 für saubere Vertikalmitte per Flex */
  margin-block: auto;             /* mittig innerhalb des verfügbaren Blocks */
  top: 0; bottom: 0;              /* Fallback für ältere Browser */
  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  background: rgba(0,0,0,.35);
  color: #fff;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
  opacity: .85;
  transition: opacity .2s ease, transform .05s ease;
  z-index: 1;                     /* über dem Bild */
  pointer-events: auto;
}

/* identischer Abstand links/rechts */
.block_image .nav.prev { left: 12px; }
.block_image .nav.next { right: 30px; }

.block_image .nav:hover { opacity: 1; }
.block_image .nav:active { transform: scale(0.98); }

/* ========= Dots ========= */
.block_image .dots{
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  display: flex; justify-content: center; gap: 6px;
  z-index: 1;
}
.block_image .dot{
  width: 8px; height: 8px;
  border-radius: 9999px; border: 0;
  background: rgba(0,0,0,.25);
  cursor: pointer;
}
.block_image .dot.is-active{ background: rgba(0,0,0,.6); }

.block { padding: 8px 0 18px; border-bottom: 1px dashed var(--c-border); }
.block:last-child { border-bottom: 0; }

.block_subtitle {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-primary);
  margin: 6px 0 8px;
}

.block_image.gallery { position: relative; padding-bottom: 48px; }
.block_image .nav{ position: absolute; bottom: 8px; top: auto; transform: none; }
.block_image .nav.prev{ left: 8px; }
.block_image .nav.next{ right: 30px; }
.block_image .dots{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 8px; }

/* ========= Abschnittstitel mit Hintergrundstreifen ========= */
.section_title_row {
  position: relative;
  background: #f3f4f6;
  padding: 10px 20px;
  margin: 0 -20px 12px;  /* zieht den Balken über die Seitenränder von section_inner */
}


.section_title_row:hover {
  background: #e5e7eb;         /* etwas dunkler bei Hover */
  transition: background-color .15s ease;
}

.section_title {
  position: relative;
  z-index: 1;
  color: var(--c-primary);
  font-weight: 700;
  font-size: 20px;
  user-select: none;
}