@font-face{
  font-family: "Marfa Light";
  src: url("fonts/marfa/MarfaSemi-Mono-Light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Marfa Regular";
  src: url("fonts/marfa/MarfaSemi-Mono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Marfa Semibold";
  src: url("fonts/marfa/MarfaSemi-Mono-Semibold.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: "Fraunces";
  src: url("fonts/Fraunces/Fraunces_72pt-Regular.ttf") format("ttf");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Fraunces";
  src: url("fonts/Fraunces/Fraunces_72pt-Italic.ttf") format("ttf");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html{
  font-synthesis: none;
}

:root{
  --ui-edge: 24px;   /* entspricht .canvas-ui top */
}

:root{
  --peek: 53px;
  --top-gap: 0px; /* ggf. 52px wenn du eine Topbar hast */
}

:root{
  --tree-tab-safe: 180px; /* ungefähr Höhe der Struktur-Lasche + etwas Luft */
}

:root{
  --label-h: 220px;   /* Höhe der Lasche (anpassen) */
  --label-w: 70px;    /* „volle“ Laschenbreite (anpassen) */
}

:root{ --ui-edge: 24px; }



/* ------------------------ Intro Overlay ------------------------ */

html, body{
  margin: 0;
  padding: 0;
}

.intro-overlay{
  background: #fff; /* oder efefef*/
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 300ms ease;
}

/* "Papier" / Rahmen */
.intro-frame{
  display: grid;
  grid-template-columns: 1.05fr 1fr;

  /* du hattest 150px – behalten wir für Desktop */
  gap: 150px;

  /* top right bottom left */
  padding: 0px 64px 64px 0;

  /* optional, falls du wirklich einen Frame willst */
  background: transparent; /* oder #fff wenn du willst */
}

/* LINKS */
.intro-left{
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
  padding-left: 180px;   /* mehr = weiter rechts */
  padding-top: 40px;  
  gap: 30px;
}

/* Grafik */
.intro-morph{
  width: min(460px, 44vw);
  aspect-ratio: 374 / 385.39;
  justify-self: center;
  align-self: start;
  margin-top: 30px;
  margin-left: 15px;
}
.intro-morph svg{
  width: 100%;
  height: 100%;
  display: block;
  margin-left: -20px;
}

/* Zitat */
.intro-quote{
  margin: 0;
  padding-top: 40px;
  padding-left: 40px;
  font-family: "Marfa Light";
  font-size: 0.8rem;
  line-height: 1.4;
  justify-self: center;
  width: 100%;
  max-width: none;     /* wichtig */
  padding-left: 0; 
}
.intro-quote blockquote{ margin: 0 0 10px 0; }
.intro-quote figcaption{ font-size: 0.72rem; opacity: 0.9; }

/* RECHTS */
.intro-right{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 30px;

  /* EINMAL definieren statt überall margin-left */
  --indent: 3.5em;
}

/* Titel */
.intro-title{
  margin: 50px 0 20px 0;
  font-family: "Fraunces", serif;
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0.01em;
  font-size: 3em;
}

/* Titel-Zeilen */
.title-stack{ display: inline-block; }
.title-top, .title-bottom{ display: block; white-space: nowrap; }
.title-bottom{
  margin-left: 1em;
  font-style: italic;
}

/* Textblock (gleiches Aussehen, aber sauberer) */
.intro-subtitle{
  margin: 0 0 28px 0;
  padding-left: var(--indent);
  font-family: "Source Serif 4", serif;
  font-size: 0.9rem;
  line-height: 1.35;
  max-width: 52ch;
}

.intro-body{
  padding-left: var(--indent);
  margin-top: 1em;
  font-family: "Source Serif 4", serif;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 51ch;
  hyphens: auto;
  -webkit-hyphens: auto;   /* Safari */
  -ms-hyphens: auto;       /* alte Edge/IE */

  overflow-wrap: break-word; /* Fallback für sehr lange Wörter */
}

.intro-body p{ margin: 0 0 18px 0; }

/* CTA */
.intro-cta{
  padding-left: var(--indent);
  margin-top: 1em;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: "Marfa Regular";
  font-size: 0.9rem;
}
.intro-cta:hover{ text-decoration: underline; }


/* etwas kleinere Screens: gap & paddings runter, sonst gleiches Layout */
@media (max-width: 1100px){
  .intro-frame{
    gap: 96px;
    padding: 0 48px 48px 0;
  }
  .intro-morph{
    width: min(420px, 46vw);
    margin-top: 56px;
  }
  .intro-title{ font-size: 2.6em; }
  .intro-right{ --indent: 3.0em; }
}

/* mobile: untereinander */
@media (max-width: 900px){
  .intro-frame{
    height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 24px;
  }

  .intro-left{
    padding-left: 0;
    padding-top: 0;
  }

  .intro-morph{
    width: min(420px, 92vw);
  }
}


.intro-frame{
  position: relative; /* wichtig für ::before */
}

/* Rasterfläche: links+oben bis Rand, rechts bis Mitte, unten dynamisch */
.intro-frame::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: var(--raster-w, 50%);
  height: var(--raster-h, 50%);

  background-image: radial-gradient(rgba(0,0,0,0.14) 1px, transparent 1px);
  background-size: 22px 22px;   /* Rastergröße (größer = gröber) */
   background-position: -11px -11px;

  pointer-events: none;
  z-index: 0;
}


.intro-overlay.is-hidden{
  opacity: 0;
  pointer-events: none;
}



/* ------------------------ Canvas und Suche / Ãœber Button / Titel ------------------------ */


/* Menü im Canvas */
#graph-container{ position: relative; } 

.canvas-ui{
  position: absolute;
  top: var(--ui-edge);
  left: 12px;
  right: 24px;        /* Abstand zur Textspalte – hier stellst du ihn ein */
  z-index: 4;

  display: block;
  align-items: baseline;  /* <<< gemeinsame Grundlinie */
  gap: 24px;

  pointer-events: none;
}

.canvas-controls{
  position: absolute;
  top: 0;
  right: 0;
  
  margin-left: auto;          /* <<< schiebt Suche + Über das Projekt nach rechts */
  display: flex;
  align-items: baseline;
  gap: 36px;
  flex-wrap: nowrap;
  white-space: nowrap;
  pointer-events: auto;
}

.canvas-title,
.canvas-controls,
.canvas-controls *{
  pointer-events: auto; /* nur UI ist klickbar */
  z-index: 2;
}

.menu-item,
.search-item{
  line-height: 1;
}

.menu-item {
  font-size: 0.8rem;
  font-family: "Marfa Light";
  cursor: pointer;

  /* Button weg */
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  appearance: none;
}

.menu-item:hover {
  text-decoration: underline;
  background: transparent;
}

.search-item {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: "Marfa Light";
  font-size: 0.8rem;
  color: inherit;
  line-height: 1;          /* <<< gleiche Basis */
}

.search-item:hover {
  text-decoration: underline;
}

.ui-link:focus-visible{ 
  outline: none; 
  text-decoration: underline; 
}

.search-form{
  position: absolute;
  right: 0;          /* <<< an rechter Kante des search-slot */
  top: 50%;
  transform: translateY(-50%);  /* nur vertikal zentrieren */
  z-index: 10;
  font-size: 0.8rem;
  font-family: "Marfa Light";

  transform: translateY(-50%) translateX(-6px) scale(0.98);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 180ms ease,
    transform 260ms ease,
    visibility 0s linear 260ms;
}

#search-toggle:focus,
#search-toggle:focus-visible{
  outline: none;
  box-shadow: none;
}

.canvas-controls.search-open .search-form{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform: translateY(-50%) translateX(0) scale(1);

  transition:
    opacity 180ms ease,
    transform 260ms ease,
    visibility 0s;
}

.canvas-controls.search-open #search-toggle{ 
  visibility: hidden;
}

.search-shell{
  display: flex;
  align-items: center;
  gap: 10px;

  background: #fff;
  border: 1px solid #000;
  border-radius: 999px;
  padding: 0.45em 0.75em;

  transition: box-shadow 220ms ease;
}

.search-slot{
  position: relative;
  display: inline-flex;
  align-items: baseline;
}


/* Input schlicht */
#search-input{
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: none;

  font: inherit;
  width: 16ch;
}

.search-submit{
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.search-submit svg{
  width: 1.1em;
  height: 1.1em;
  display: block;
}

/* Fokus/Outline sauber */
.search-submit:focus,
.search-submit:focus-visible,
#search-input:focus,
#search-input:focus-visible{
  outline: none;
}

/* Main Layout */

.main-layout {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(0, 0.9fr) auto;
}


/* ------------------------ Ansicht ------------------------ */

.canvas-view{
  position: absolute;
  right: var(--ui-edge, 24px);
  bottom: var(--ui-edge, 24px);
  z-index: 6;
  pointer-events: auto;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}


#view-wrap.canvas-view-top{
  position: relative;
  right: auto;
  bottom: auto;
  z-index: 10;
}

#view-wrap.canvas-view-top .view-menu{
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
}


.view-menu{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);

  transition: opacity 180ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

#view-wrap.open .view-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);

  transition: opacity 180ms ease, transform 220ms ease, visibility 0s;
}

/* Optionen: animierbarer Startzustand */
.view-menu .view-option{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 220ms ease;
}

/* offen: sichtbar */
#view-wrap.open .view-menu .view-option{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger */
#view-wrap.open .view-menu .view-option:nth-child(1){ transition-delay: 0ms; }
#view-wrap.open .view-menu .view-option:nth-child(2){ transition-delay: 80ms; }
#view-wrap.open .view-menu .view-option:nth-child(3){ transition-delay: 160ms; }

/* “active” = fett (nutzt deine Marfa Regular falls vorhanden) */
.view-option.is-active{
  font-family: "Marfa Semibold";
  text-decoration: none;
}

.view-option.is-active:hover{
  text-decoration: none; /* bleibt ohne underline */
}





/* ------------------------ Titel ------------------------ */

.canvas-title{
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 2rem;  /* ggf kleiner als Textpanel */
  line-height: 0.9;
  padding-left: 2rem;

  position: absolute;
  top: 0;
  left: 0;
}

.canvas-title .title-top{
  display: block;
  font-style: normal;
}

.canvas-title .title-bottom{
  display: block;
  margin-left: 0.9em;   /* Einzug wie im Panel */
  font-style: italic;
}

.canvas-title{
  cursor: pointer;
}


/* <<< Damit Fraunces schärfer kommt */
.canvas-title, .text-title {
  
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}


/* ------------------------ Text Column ------------------------ */

:root{
  --ui-edge: 24px;      /* entspricht .canvas-ui top */
  --text-pad-l: 1.5rem;
  --text-pad-r: 2rem;
}

#text-column{
  border-left: 1px solid #ddd;
  background: #fff;
  box-shadow: -5px 0 5px rgba(127, 127, 127, 0.08);
  z-index: 3;
  position: relative;
 

  /* gleiche “Edge” wie die Canvas-Controls */
  padding: var(--ui-edge) var(--text-pad-r) var(--ui-edge) var(--text-pad-l);

  overflow-y: auto;
}


/* ----------- Kategorie Zuordnung oben ----------- */

.text-category{
  font-family: "Marfa Light";
  font-size: 0.6rem;   /* wie menu-item */
  line-height: 1;
  margin: 0 0 1.2rem 0;

  transform: translateY(1px);
}

/* ----------- Titel im Textpanel ----------- */
.text-title{
  margin: 2.5rem 0 0.8rem 0;
  font-family: "Fraunces", serif;
  font-weight: 400;
  font-size: 2rem;      /* nach Bedarf */
  line-height: 1;
}

/* Stack-Wrapper */
.text-title .title-stack{
  display: inline-block;
}

/* obere Zeile */
.text-title .title-top{
  display: block;
  font-style: normal;
  font-size: 1.9rem;  
}

/* untere Zeile: eingerückt + kursiv */
.text-title .title-bottom{
  display: block;
  margin-left: 0.9em;     /* Einrückung wie im Screenshot */
  font-style: italic;
}


/* ----------- Quotes und Quote Sources ----------- */

/* Quote-Block */
.quotes{
  margin: 0.8rem 0 0.9rem 0;
}

#text-content{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

#text-content p.quote{
  font-family: "Marfa Light";
  font-size: 0.75rem;
  line-height: 1.4;
  margin: 0 0 0.35rem 0;

}

#text-content p.quote-source{
  font-family: "Marfa Light";
  font-size: 0.65rem;
  line-height: 1.2;
  margin: 0;
  opacity: 0.8;
}

/* Deutsche Anführungszeichen */
#text-content p.quote::before{
  content: "„";
}

#text-content p.quote::after{
  content: "“";
  margin-left: 0.05em;
}


/* ----------- Text im paragraphen ----------- */
#text-content p {
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

#text-content p.body { 
  font-family: "Source Serif 4", serif;
  font-size: 0.82em;
  line-height: 1.4;
  margin-bottom: 0.4rem;
  hyphens: auto;
  -webkit-hyphens: auto;   /* Safari */
  -ms-hyphens: auto;       /* alte Edge/IE */

  overflow-wrap: break-word; /* Fallback für sehr lange Wörter */
}


/* ----------- Quellen ----------- */

.sources{
  margin-top: auto;
  padding-top: 12px;
  padding-bottom: 0;   
  /*border-top: 1px solid #eee;*/
  transform: translateY(-1px);
}

.text-category,
#text-content .source-line{
  font-family: "Marfa Light";
  font-size: 0.6rem;
  margin: 0;         
  line-height: 1.5;
}



/* ------------------------ Graph Container ------------------------ */

#graph-container{
  position: relative;
  overflow: hidden;

  background-color: #fafafa;

  /* Punkt-Raster */
  background-image: radial-gradient(circle, rgba(0,0,0,0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0; /* oder -9px -9px für "zentrierter" */
}


#graph-svg {
  width: 100%;
  height: 100%;
  z-index: 0;
}

.graph-node {
  cursor: pointer;
}

/* ------------------------ nodes ------------------------ */

.graph-node-pill {
  fill: #dff6d6 ;        /* hellgrün wie dein Beispiel */
}

/* Ausgewählt: dunkler (aber nicht schwarz) */
.graph-node.selected .graph-node-pill {
  fill: #1F7652;         /* dunkleres grün */
}

.graph-node.hovered:not(.selected) .graph-node-pill { fill: #A5D0AE; }

/* neighbor nur, wenn NICHT selected */
.graph-node.neighbor:not(.selected) .graph-node-pill { fill: #A5D0AE; }

.graph-node-label {
  font-size: 14px;
  font-weight: 500;
  font-family: "Source Serif 4", serif;
}


.graph-node.selected .graph-node-label {
  fill: #ffffff;          /* weißer Text */
}

/* Smooth transitions für Auswahl */
.graph-node-pill{
  transition: fill 220ms ease, filter 220ms ease, transform 220ms ease;
  transform-origin: center;
  transform-box: fill-box;
}

.graph-node-label{
  transition: fill 220ms ease, transform 220ms ease;
  transform-origin: center;
  transform-box: fill-box;
}

/* Selected wirkt "oben" durch Schatten + minimal Scale */


/* ------------------------ Kategorie Nodes in Cluster ------------------------ */
/* Kategorie-Zentren: klare Außenlinie + etwas mehr Gewicht */
.layout-cluster .graph-node.category-root .graph-node-pill{
  stroke: #1F7652;
  stroke-width: 1;
  /*vector-effect: non-scaling-stroke;*/ /* Stroke bleibt bei Zoom gleich dick */
}


/* ------------------------ Edges ------------------------ */

/* Default: sehr leise */
.graph-edge {
  stroke: rgba(0,0,0,0.12);
  stroke-width: 1;
}

.graph-edge.active {
  stroke: rgba(0,0,0,0.7);
  stroke-width: 1;

}


/* ------------------------Overlays: Glossar und Baum ------------------------*/
/* --- Gemeinsame Basis für beide Seitenleisten --- */
body{ overflow-x: hidden; }


/* Drawer */
.tab{
  position: fixed;
  left: 0;
  top: var(--top-gap);
  bottom: 0;

  transform: translateX(calc(-100% + var(--peek)));
  transition: transform 0.35s ease;
  z-index: 5;
}

.tab.is-open{ transform: translateX(0); }

/* SVG muss IN FLOW bleiben, damit .tab eine echte Breite hat */
.tab img{
  height: 100%;
  width: auto;
  display: block;
  pointer-events: none;
  filter: drop-shadow(5px 0 5px rgba(127, 127, 127, 0.08));
}

/* Inhalt des Tabs liegt über der SVG */
.tab-content{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  right: var(--peek);     /* <<< Scrollbar positionieren Platz für die Lasche freilassen */

  padding: 22px 18px 24px 18px;
  overflow-y: auto;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tab-glossar .tab-content{
  right: calc(var(--peek) - 11px); /* Scrollbar Glossar 8px weiter rechts */
}

.tab.is-open .tab-content{
  opacity: 1;
  pointer-events: auto;
}

/* Tree visuell oben */
.tab-tree{ z-index: 6; }
.tab-glossar{ z-index: 5; }

/* Tree soll Glossar-Hover nicht blockieren (geschlossen) */
.tab-tree{ pointer-events: none; }
.tab-tree .tab-label{ pointer-events: auto; }
.tab-tree.is-open{ pointer-events: auto; }

/* Sicherstellen, dass Inhalt über dem SVG liegt */
.tab img { z-index: 1; }
.tab-content { z-index: 2; position: absolute; }
.tab-label { z-index: 3; }

/* Wenn Tree geschlossen ist, darf er durchlässig sein – aber offen muss Inhalt klickbar sein */
.tab-tree { pointer-events: none; }
.tab-tree .tab-label { pointer-events: auto; }
.tab-tree.is-open { pointer-events: auto; }  /* wichtig: muss NACH der pointer-events:none Regel stehen */

/* Klickbare Einträge in Glossar + Struktur */
.glossary-item,
.tree-item{
  cursor: pointer;
}

/* Hover: unterstreichen */
.glossary-item:hover,
.tree-item:hover{
  text-decoration: underline;
}



/* Glossar: unten extra Platz, damit nichts hinter der Struktur-Lasche endet */
.tab-glossar .tab-content{
  padding-bottom: calc(var(--tree-tab-safe) + 16px);
}


 /*--- --- --- Laschen Text --- --- --- ---*/

/* Text sitzt als Overlay über der Lasche */
/* Text sitzt genau in der sichtbaren Laschenbreite (damit er nicht weggeclippt wird) */
.tab img{ pointer-events: none; }

.tab-label{
  position: absolute;
  right: 0;
  width: var(--peek);
  height: 220px;
  top: 0;

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  font-family: "Marfa Light", normal;
  font-size: 20px;
  color: #000;

  writing-mode: vertical-rl;

  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-label:hover{ text-decoration: underline; }

.tab-glossar .tab-label{ top: 69%; transform: translateY(-50%); }
.tab-tree   .tab-label{ top: 89%; transform: translateY(-50%); }

.tab-tree .tab-label{
  pointer-events: auto;
}


/* ------------------------ Glossar hübsch machen ------------------------ */


/* Glossar: Typo + mehr Zeilenabstand */
#glossary-list .glossary-item{
  font-family: "Source Serif 4", serif;
  font-size: 16px;       /* ggf. 16–20 */
  font-weight: 200;
  line-height: 1.2;      /* mehr Zeilenabstand */
  letter-spacing: 0.01em;

  display: block;
  padding: 6px 0; 
  padding-left: 18px;        /* Luft zwischen Einträgen */
  cursor: pointer;
  text-decoration: none;
}

/* Hover */
#glossary-list .glossary-item:hover{
  text-decoration: underline;
}

/* Optional: wenn Wörter sehr lang sind */
#glossary-list .glossary-item{
  white-space: normal;
  overflow-wrap: anywhere;
}


/* ------------------------ Aufklappbarer Tree (Struktur) ------------------------ */



.tree-row{
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 4px 0;
  padding-left: calc(var(--depth) * 18px);
}

.tree-toggle{
  width: 18px;
  flex: 0 0 10px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-size: 14px;
  transform: translateY(1px);
}

/* wenn keine Kinder: Pfeil "Platzhalter" unsichtbar, aber Layout bleibt */
.tree-toggle:disabled{
  visibility: hidden;
  cursor: default;
}

.tree-link{
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  padding: 1px;

  font-family: "Source Serif 4", serif;
  font-size: 16px; /* anpassen */
  color: #000;
  line-height: 1.2;
}

.tree-link:hover{
  text-decoration: underline;
}

/* Ebene 1 optisch stärker */
.tree-row[style*="--depth: 0"] .tree-link,
.tree-row[style*="--depth:0"] .tree-link{
  font-weight: 700;
}


.tab-tree .tab-content{
  display: flex;
  flex-direction: column;
}

/* der eigentliche “Block” wird in der freien Höhe zentriert */
.tab-tree #tree-list{
  margin-top: auto;
  margin-bottom: auto;
  width: 100%;
}






/* -------- Info Overlay (Über das Projekt) -------- */

.info-panel{
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #efefef; /* gleicher Grauton wie Intro */
  display: flex;

  opacity: 1;
  transition: opacity 300ms ease;
}

.info-panel.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.info-inner{
  width: 100%;
  height: 100%;
  overflow: auto;        /* falls lang: scrollt das Overlay */
}

.info-page{
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 64px 80px 64px;
  --info-inset: 45px;
}

.info-fourcol{
  font-family: "Source Serif 4", serif;
  font-size: 0.9rem;
  line-height: 1.55;
}

.info-fourcol > div{
  padding-left: var(--info-inset);
}

.info-credits{
  padding-left: var(--info-inset);
}

info-credits p{
  margin: 0 0 18px 0;
}
.info-credits p:first-child{
  margin-top: 0;
}

/* Header: Logo links, Schließen rechts */
.info-header{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 56px;
}

.info-close{
  /* nutzt deinen menu-item Look */
  white-space: nowrap;
}

/* Logo */
.info-title{
  margin: 0 0 10px 0;
  font-family: "Fraunces", serif;
  font-weight: 400;
  line-height: 0.92;
  font-size: 3em; /* anpassen nach Geschmack */
}

.info-title .title-stack{ display: inline-block; }
.info-title .title-top,
.info-title .title-bottom{ display: block; white-space: nowrap; }

.info-title .title-bottom{
  margin-left: 1em;      /* eingerückt */
  font-style: italic;    /* echter Fraunces Italic wie gewünscht */
}

.info-subtitle{
  margin: 0;
  font-family: "Source Serif 4", serif;
  font-size: 0.9rem;
  line-height: 1.35;
  max-width: 46ch;
  padding-left: 45px;
}

/* 4-Spalten Grid */
.info-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 28px;
}

/* Abschnitt 1 Layout */
.info-lead-text{
  grid-column: 1 / span 2; /* 2 Spalten breit */
  font-family: "Source Serif 4", serif;
  font-size: 0.9rem;
  line-height: 1.55;
  max-width: 80ch;
  padding-left: 45px;
  padding-bottom: 45px;

}

.info-lead-text p:first-child{
  margin-top: 0;
}

.info-col-empty{
  grid-column: 3; /* bleibt leer */
}

.info-credits{
  grid-column: 4;
  font-family: "Marfa Light", normal;
  font-size: 0.85rem;
  line-height: 1.45;
}

.info-h3{
  font-family: "Marfa Light", normal;
  padding-bottom: 0px;
}

/* Quellenbereich: Überschrift links, Bibliografie über Spalte 2–4 */
.info-sources .biblio{
  grid-column: 2 / -1;
  column-count: 3;
  column-gap: 56px;      /* wie dein info-grid gap */
  column-width: 18rem;   /* verhindert “Mini-Spalten” */
}

.info-sources .sources-block{
  grid-column: 1 / -1;
  padding-left: var(--info-inset);
}

.info-fourcol p{ margin: 0; }
.info-h3{ margin: 0 0 18px 0; } 

/* Einträge: nicht mitten drin umbrechen */
.biblio-item{
  break-inside: avoid-column;
  -webkit-column-break-inside: avoid;

  font-family: "Source Serif 4", serif;
  font-size: 0.8rem;
  line-height: 1.35;
  margin: 0 0 18px 0;

  hyphens: auto;
  overflow-wrap: normal;   /* wichtig: NICHT anywhere */
  word-break: normal;
}

.info-sources > div:first-child{
  grid-column: 1 / -1;
}

.info-sources .biblio{
  margin: 0;                 /* kein extra Abstand oben */
  column-count: 4;
  column-gap: 56px;
  column-width: 14rem;    /* verhindert zu schmale Spalten */
}

.biblio-item {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.info-spacer{
  height: 56px; /* „etwas Abstand“ zwischen den Blöcken */
}

/* Responsive: untereinander auf kleinen Screens */
@media (max-width: 900px){
  .info-page{ padding: 28px 24px 48px 24px; }

  .info-title{ font-size: 48px; }

  .info-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .info-lead-text,
  .info-col-empty,
  .info-credits{
    grid-column: auto;
  }
}

.textblock, .info-lead-text, .info-fourcol p {
  hyphens: auto;
  -webkit-hyphens: auto;   /* Safari */
  -ms-hyphens: auto;       /* alte Edge/IE */

  overflow-wrap: break-word; /* Fallback für sehr lange Wörter */
}

.hidden { display: none !important; }

/* ------------------------ Simple responsiveness ------------------------ */

@media (max-width: 1100px) {
  .main-layout {
    grid-template-columns: auto minmax(0, 4fr) minmax(0, 1.6fr) minmax(0, 2.2fr) auto;
  }
}

@media (max-width: 900px) {
  .main-layout {
    grid-template-columns: 0 minmax(0, 3fr) minmax(0, 2fr);
    grid-template-areas:
      "graph graph graph"
      "image text text";
  }

  #image-column {
    margin-top: 0.5rem;
  }
}