/* build: 2025-12-15T Version 3.0 */

/* =========================================================
 *  1) FONT-FACES
 * ======================================================= */

/* roboto mono regular */
@font-face {
  font-display: swap; /* fallback erst, font kommt nach */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-mono-v30-latin-regular.woff2') format('woff2'); /* lokal unter assets/fonts */
}
/* roboto mono 500 */
@font-face {
  font-display: swap; /* fallback erst, font kommt nach */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-mono-v30-latin-500.woff2') format('woff2'); /* lokal unter assets/fonts */
}


/************************************************************
 *  2) GLOBAL BASIS – Reset, Variablen, Body
 ************************************************************/

/* reset */
*,
*::before,
*::after { box-sizing: border-box; }

/* Globale Design-Variablen */
:root{
  --row-h: 80px;      /* menuehoehe */
  --row-py: 12px;     /* Vertikales Padding im Header – wird für die Tall-Schriftgröße mitverwendet. */

  --separator-gap: 6px; /* Vertikaler Abstand um den Separator unterhalb des Headers. */
  --color-patrol: #006d77; /* Akzentfarbe (Petrol); hex-Farbwert, super Standard. */
  
  --fx-time: 1s;          /* Standard-Animations-/Transition-Dauer; praktisch für konsistente Effekte. */
  --caption-size: clamp(18px, 3.4vw, 32px); /* captions responsive skalieren */

  --card-max: 800px; /* Maximale Breite für Karten/Galerie-Elemente. Klassische Layout-Konstante. */
  --card-w: 80vw;         /* Karte nutzt 80% der Viewport-Breite (vw = viewport width, gängig). */
  --gap: 1.25rem;         /* Globaler Standard-Abstand zwischen Items (1.25 * Grundschrift). */
  
  --radius: 3px;          /* Globaler Corner-Radius für Karten/Bilder; kleine, dezente Abrundung. */
  --project-max: 800px;   /* Maximalbreite für Project-Layouts (2-Spalten-Variante). */
  --project-w: 80vw;      /* Projekte: Breite relativ zur Viewport-Breite. */
  --gap: 1.25rem;         /* Gleicher Name wie oben – hier faktisch derselbe Wert; du nutzt das als globalen Gap. */
  --text-muted: #555;     /* Gedämpfter Text-Farbton für sekundäre Texte. */

  --img2-gap: 15px; /* Abstand zwischen den zwei Bildern im 2-Spalten-Bildlayout. */
  
  --project-offset-left: 1.1rem; /* Projekt Content einrücken um auf Niveau des Headers zu bleiben, war 1.2*/
  --project-offset-right: 1.1rem; /* Projekt Content einrücken um auf Niveau des Headers zu bleiben*/

  --contact-offset-mid: 1rem;
}


/* =========================================
   Custom Tap-Highlight Effekt
   ========================================= */

a, button {
  position: relative; /* fuer overlays */
  border-radius: 8px; /* Leicht abgerundete Ecken für interaktive Elemente; wirkt modern weicher. */
  overflow: hidden; /* Schneidet alles ab, was über die Box hinausgeht (z. B. Hover-Effekte). */
  -webkit-tap-highlight-color: transparent; /* kein tap highlight */
}

.text-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Menü darf über die Link-Box hinaus zeichnen */
.menu-tall > li > a { overflow: visible; }

/* Falls es immer noch clippt, auch die Menü-Box im Header */
.header > .menu.box { overflow: visible; }


.text-link:hover {
  color: var(--color-patrol); /* #006d77 */
}


/* verhindert synthetisches Bold/Italic */
html { font-synthesis: none; /* kein synthetic bold/italic */ }

/* Grundtypografie für den Body */
body{
  margin: 0; /* kein body margin */
  font-family: SFMono-Regular, Menlo, Consolas,
               'Liberation Mono', monospace;
  line-height: 1.4; /* Lesbarer Zeilenabstand (140%), Standard im Webdesign. */
  font-size: 13px; /* kleine basis */
  font-weight: 400; /* Normalgewicht. */
  padding: 1rem; /* Innenabstand um den gesamten Viewport, sorgt für Weißrand. */
  color: #000; /* Standard-Textfarbe: Schwarz. */
  background: #fff; /* Hintergrund: Weiß – klassischer Look. */
}

main { padding-bottom: 5rem; /* platz fuer footer */ }

/* Headline-Basis */
h1{
  font-size: 15px;
  font-weight: 500; /* Medium-Schnitt → etwas betonter. */
  line-height: 20px;
  margin: 10px 0 6px; /* Außenabstände oben/unten, neutral seitlich. */
}
h2, h3{
  font-size: 14px;
  font-weight: 500; /* Ebenfalls Medium, sorgt für klare Hierarchie. */
  line-height: 20px; /* Einheitliche Höhe mit h1. */
  margin-bottom: 0px; /* kein default abstand */
}

/* Hilfsklasse für Einrückung */
.pad {
	margin-top: 0px;       /* Kein Extraabstand nach oben, volle Kontrolle. */
	margin-bottom: 40px;   /* Deutlicher Blockabstand nach unten für Sektionen. */
    padding-left: 40px;    /* einrueckung */
}

/* Farbe für „Patrol“-Akzente */
.colorPatrol{
  color: var(--color-patrol); /* akzentfarbe */
}


/************************************************************
 *  3) DEBUG-HILFEN
 ************************************************************/

.box{
  --rand-h: 200; /* debug farbe */
  border: 2px solid transparent; /* basis fuer debug outlines */
  padding: 0.6rem 1rem; /* Innenabstand für Layoutboxen. */
  margin: 0.3rem 0; /* Vertikaler Außenabstand zwischen Boxen. */
  margin-bottom: 0px; /* Unten keinen Extra-Abstand – du steuerst das fein. */
}
body.debug-off .box{ border-color: transparent !important; /* debug borders aus */
}
body.debug-off .menu li,
body.debug-off .menu-tall > li > a{ border-color: transparent !important; /* debug borders aus */
}
body.debug-on .box{ outline: 2px solid hsl(var(--rand-h) 70% 45%); outline-offset: 0; /* debug outlines */ }


/************************************************************
 *  4) HEADER: TITLE-LINKS, KONTAKT
 ************************************************************/

/* TITLE-LINKS – keine Einrückung, inline */
.title-links{
  list-style: none; /* Entfernt Standard-Punkte von UL/OL. */
  margin: 0; /* Kein extra Außenabstand – volle Kontrolle. */
  padding: 0; /* Kein Innenabstand – sauberer Startpunkt. */
  margin-inline-start: 0; /* kein einzug */
  padding-inline-start: 0; /* Entspricht padding-left, aber logisch. */
}
.title-links li{
  display: inline; /* Links nebeneinander (statt untereinander). */
  margin-right: .5rem; /* Kleiner horizontaler Abstand zwischen Einträgen. */
}
.title-links a, .contact-link{
  color: #000; /* Schwarzer Text für Links – neutral, zurückhaltend. */
  text-decoration: none; /* Entfernt Unterstreichung, typischer Designentscheid. */
}
.title-links a:hover, .contact-link:hover{
  color: #4b6583; /* Hover-Farbe: dezentes Blau/Grau – gibt Feedback, ohne zu knallen. */
}
.contact-mail{ color: gray; /* Kontakt-Label in grau, um es leicht vom Rest abzusetzen. */ }


/************************************************************
 *  5) HEADER-LAYOUT – BRAND, CONTACT, MENU-CONTAINER
 ************************************************************/

/* Header ist Flex-Container; Flex-Wrap erlaubt Umbrechen */
.header{
  display: flex;
  flex-wrap: wrap; /* Erlaubt Umbrechen der Boxen auf mehreren Zeilen. */
  gap: var(--gap); /* Einheitlicher Abstand zwischen den Boxen. */
  align-items: flex-start;       /* Richtet Boxen am oberen Rand aus – sieht ordentlicher aus. */
  padding-block: var(--row-py); /* Vertikales Padding oben/unten, logische Eigenschaft. */
}

/* Jede Box so breit wie ihr Inhalt; kein forciertes display:block mehr */
.header > .box{
  flex: 0 1 auto; /* Boxen dürfen schrumpfen, aber nicht wachsen – orientieren sich an ihrem Inhalt. */
  margin: 0; /* Kein zusätzlicher Außenabstand – du steuerst Abstand via gap. */
  overflow: visible; /* nichts im header clippen */
}

/* BRAND: Logo + Title IMMER nebeneinander */
.brand{
  display: flex;                 /* Horizontaler Flex-Container für Logo + Text. */
  align-items: flex-start;       /* Beide Elemente oben bündig. */
  gap: 1rem;                     /* Abstand zwischen Logo und Textblock. */
}
.brand-logo{
  flex: 0 0 auto;                /* Feste Breite, schrumpft nicht. */
}
.brand-title{
  flex: 1 1 auto;                /* Darf wachsen und schrumpfen, füllt den Rest. */
  min-width: 0;                  /* gegen overflow im flex */
}

/* Title-Links ohne Einrückung (Sicherheit) */
.brand-title .title-links{
  list-style: none; /* Sicherheit: keine Bulletpoints. */
  margin: 0; /* Keine Extra-Margins. */
  padding: 0; /* Kein Padding. */
  margin-inline-start: 0; /* Kein logischer Einzug. */
  padding-inline-start: 0; /* Kein Innen-Einzug. */
}
.brand-title .title-links li{
  display: inline; /* Alles in einer Zeile. */
  margin-right: .5rem; /* Leichter Abstand zwischen Items. */
}

/* Logo-Box im Header */
.brand-logo{
  flex: 0 0 auto; /* logo fix */
  /* feste/planbare Breite + Höhe → kein Springen */
  inline-size: 100px;   /* fixe breite */
  block-size: 60px;     /* fixe hoehe */
  display: block;       /* Blocklevel für zuverlässiges Layout. */
}

/* Der eigentliche p5-Container */
#my-sketch-holder{
  inline-size: 100%; /* Füllt die Breite seiner Elternbox aus. */
  block-size: 100%;  /* Füllt die Höhe seiner Elternbox. */
  display: block;    /* Blocklevel-Element. */
  background: #fff;          /* falls canvas transparent ist */
  overflow: hidden;          /* Schneidet Inhalte ab, falls der Sketch größer zeichnet. */
}

.brand-link{
  border-radius: 0;
  color: inherit;
  text-decoration: none;
  display: flex;          /* wie .brand behandeln */
  align-items: flex-start;
  gap: 1rem;
}
.brand-link:hover{
  color: inherit;         /* oder deine Hover-Farbe, wenn du willst */
}

/************************************************************
 *  6) MENÜ – TALL-MENÜ (DESKTOP) UND BASIS-LINKS
 ************************************************************/

.menu{ align-self: stretch; /* an header hoehe ausrichten */ }
.menu-tall{
  display: flex; /* Flex-Layout für horizontale Menüeinträge. */
  height: 100%;  /* Füllt die Höhe der umgebenden .menu-Box (Desktop). */
  /* die Höhe kommt am Desktop von .menu (s. MQ) */
  gap: 1rem;     /* Abstand zwischen Menü-Items. */
  margin: 0;     /* Kein Außenabstand zum Container. */
  padding: 0;    /* Kein Innenabstand innerhalb der UL. */
  list-style: none; /* Keine Bulletpoints. */
}
.menu-tall > li{
  display: flex; /* Ermöglicht, dass der Link darin wieder flex-center ausgerichtet wird. */
  margin: 0;     /* Kein zusätzlicher Außenabstand. */
}
.menu-tall > li > a{
  display: flex; /* So kann der Text vertikal mittig ausgerichtet werden. */
  align-items: center; /* Zentriert den Text in der Höhe der Menü-Zeile. */
  justify-content: flex-start; /* Text bleibt links innerhalb des Links. */
  padding: 0 .8rem; /* Horizontaler Innenabstand, gibt den „Pill“-Look. */
  border: 1px dashed transparent; /* Unsichtbare Umrandung, leicht für Debugging aktivierbar. */
  text-decoration: none; /* Keine Unterstreichung. */
  color: inherit;        /* Farbe erbt vom Header/Body. */
}

/* Menü-Links beim Hover */
.menu-tall > li > a:hover {
  color: #006d77;  /* Petrolfarbe als Hover-Indikator; gibt Feedback. */
}


/************************************************************
 *  7) BREAKPOINTS FÜR MENÜ (DESKTOP / MOBILE)
 ************************************************************/

/* Desktop: Tall-Menü aktiv + einheitliche Zeilenhöhe für das Menü */
@media (min-width: 900px){
  /* Menü-Box hat feste Höhe, Liste füllt die Höhe */
  .menu{
    height: var(--row-h); /* Fixiert die Gesamthöhe für das Tall-Menü. */
  }
  .menu-tall{
    height: 100%; /* UL füllt die volle Höhe der Menübox. */
  }
  .menu-tall > li{
    height: 100%; /* Jede LI füllt die volle Höhe, damit der Link die ganze Spalte einnimmt. */
  }
  .menu-tall > li > a{
    height: 100%; /* Link ist so groß wie seine Zelle → großer Klickbereich. */
  }

  /* tall menu */
  .tall-letter > span[aria-hidden="true"]{
    display: inline-block; /* Ermöglicht transform, margin-top etc. */
    line-height: 1; /* Zeilenhöhe auf 1, damit transform nicht durch line-height verfälscht wird. */
    font-weight: 500; /* Medium, passt zur Overall-Optik. */
    font-size: calc(var(--row-h) - (2 * var(--row-py)) - 4px); /* Dynamisch: Fontgröße aus Zeilenhöhe minus Padding. Schön konsistent. */
    transform: scaleY(1.35); /* leicht gestreckt */
    transform-origin: center; /* Streckung von der Mitte aus, wirkt symmetrisch. */
    letter-spacing: .03em; /* Leichte Laufweite für Klarheit. */
    margin-top: -4px; /* optisch etwas hochziehen */
  }
  
  /* Gleichhöhe bleibt */
  .header { align-items: stretch; }
  .header > .box{
    height: var(--row-h);
    box-sizing: border-box;
  }

  /* nur menu und contact als column */
  .header > .menu.box,
  .header > .contact.box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* brand bleibt horizontal */
  /* der link ist hier die box */
  .header > a.brand.box.brand-link{
    height: var(--row-h);      /* nicht nur 100% */
    padding: 0.6rem 1rem;      /* bleibt wie .box */
    box-sizing: border-box;
	    align-items: flex-start;
    overflow: visible;
  }

  /* Falls dein Brand ein <a class="brand-link"> ist, soll der Link selbst horizontal bleiben */
  .header .brand-link{
    display: flex;           /* Logo links, Text rechts */
    flex-direction: row;
    align-items: flex-start;
    height: 100%;            /* füllt die Row-Höhe */
    gap: 1rem;
  }

  /* textblock im header ausrichten */
  .header .brand-title{
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* oder center */
  }
  
}


/************************************************************
 *  8) CONTENT-BEREICH & TEXT-HILFEN
 ************************************************************/

.content{ 
	margin-top: 0.5rem;  /* Kleiner Abstand zwischen Separator und Content. */
	padding-top: 0px;    /* Kein zusätzliches Padding oben. */
} /* war 2rem */

.contact-link {
  display: block;       /* Jeder Kontaktlink in eigener Zeile – besser lesbar. */
  line-height: 1.2;     /* Etwas enger als Standardtext, da es kurze Zeilen sind. */
  margin-bottom: 0.25rem; /* Kleiner Abstand zwischen den Links. */
}
.contact-link:last-child {
  margin-bottom: 0;     /* Kein Extra-Abstand bei letztem Element. */
}

.content-area{ width: 100%; /* Content füllt den verfügbaren Bereich in der Box. */ }

.text_big {
	font-size: 1.95rem; /* Große, markante Textgröße, z.B. für Intro-Sätze. */
	margin-bottom: 10px; /* Abstand nach unten, um ihn vom Folgecontent zu trennen. */
}

.text {
	font-size: .95rem;  /* Etwas kleinerer Fließtext, leicht „kompakt“. */
	margin-bottom: 10px; /* Standardabstand nach unten. */
}
	

/************************************************************
 *  9) A11Y-UTILITIES (SCREENREADER, VISUALLY HIDDEN)
 ************************************************************/

.visually-hidden{
  position: absolute !important; /* Positionierung aus dem Flow heraus, aber noch im DOM. */
  width:1px; height:1px; padding:0; margin:-1px; /* Minimalgröße, außerhalb des sichtbaren Bereichs. */
  overflow:hidden; clip:rect(0,0,0,0); /* Clippt alles, sodass nichts sichtbar ist. Klassisches A11y-Pattern. */
  white-space:nowrap; border:0; /* Kein Zeilenumbruch, keine Border. */
}
.sr-only{
  position: absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}


/************************************************************
 * 10) BRAND-FEINJUSTIERUNG (LOGO + TITEL)
 ************************************************************/

.brand {
  display: flex;          /* Bereits oben genutzt – hier nochmal explizit. */
  align-items: flex-start;  /* Alle Inhalte oben ausrichten, vermeidet „hängende“ Elemente. */
  gap: 1rem;              /* Abstand zwischen Logo und Titel. */
}

.brand-logo {
  flex: 0 0 auto; /* Logo bleibt in fester Größe, schrumpft nicht. */
}

.brand-title {
  flex: 1 1 auto;        /* Darf wachsen und schrumpfen. */
  min-width: 0;          /* Verhindert Overflow in Flex-Kontext. */
  display: flex;         /* Ermöglicht vertikale Ausrichtung der Unterelemente. */
  flex-direction: column;/* Stapelt h1 und Links untereinander. */
  justify-content: flex-start; /* Startet oben – kein „Centering“. */
}

/* Standard-Margins auf h1 und ul im Brand-Block entfernen */
.brand-title h1,
.brand-title ul {
  margin-top: 0;        /* Entfernt default margin-top. */
  margin-bottom: 0rem;  /* Kein extra Abstand nach unten. */
}


/************************************************************
 * 11) SEPARATOR-LINIE ZWISCHEN HEADER UND CONTENT
 ************************************************************/

.separator {
  display: block;          /* Blockelement, nimmt ganze Zeile. */
  inline-size: 100%;       /* Nimmt 96% der Viewportbreite – leicht eingerückt.war 96vw */
  block-size: 0;           /* Keine eigene Höhe, Linie kommt durch Border. */
  margin-top: 0;           /* Kein extra Abstand oben. */
  margin-inline: auto;     /* Zentriert horizontal. */
  margin-block: var(--separator-gap); /* Gleicher Abstand oben/unten, über Variable gesteuert. */
  border: 0;               /* Keine „normale“ Border. */
  border-top: 1px dashed #555; /* Obere Linie als gestrichelte Trennlinie. */
}


/************************************************************
 * 12) DEBUG-DARSTELLUNG TIEFE (VERSCHACHTELUNG)
 ************************************************************/

/* Baseline: transparent (stört das normale Design nicht) */
div                    { background-color: transparent; /* Standardmäßig durchsichtig – keine Störung des Layouts. */ }
div div                { background-color: transparent; }
div div div            { background-color: transparent; }
div div div div        { background-color: transparent; }
div div div div div    { background-color: transparent; }
div div div div div div{ background-color: transparent; }

/* Debug-Einblendung: wenn body.debug-depth aktiv ist */
body.debug-depth div                     { background-color: rgba(240,240,240,0.5) !important; /* Helle Graustufe für oberste Tiefe. */ }
body.debug-depth div div                 { background-color: rgba(224,224,224,0.5) !important; }
body.debug-depth div div div             { background-color: rgba(208,208,208,0.5) !important; }
body.debug-depth div div div div         { background-color: rgba(192,192,192,0.5) !important; }
body.debug-depth div div div div div     { background-color: rgba(176,176,176,0.5) !important; }
body.debug-depth div div div div div div { background-color: rgba(160,160,160,0.5) !important; /* Dunkler = tiefer verschachtelt. */ }


/************************************************************
 * 13) IMAGE-CARD-KOMPONENTE (CARD + CAPTION + HOVER)
 ************************************************************/

/* Images .................................. */

/* Bildkarte (minimal) */
.card{
  position: relative; /* Ermöglicht absolut positionierte Caption darüber. */
  border-radius: var(--radius); /* Nutzt deine globale Rundung. */
  overflow: hidden; /* Schneidet Bild und Caption auf Kartenform zu. */
  background: transparent; /* Kein zusätzlicher Hintergrund, Bild dominiert. */
  inline-size: min(80vw, 800px); /* Responsiv: max 800px, sonst 80% der Viewportbreite. */
  margin-inline: auto; /* Horizontal zentriert. */
}

/* Bild selbst: normal, beim Hover Filter aktiv */
.card img{
  display:block; width:100%; height:auto; /* Klassische Bild-Reset-Kombi, füllt Karte sauber. */
  aspect-ratio: 16/10; object-fit: cover; /* Modernes Property: hält Seitenverhältnis, füllt Raum. */
  filter: none; /* Standardzustand ohne Filter. */
  transition: filter var(--fx-time) ease, transform var(--fx-time) ease, opacity var(--fx-time) ease; /* Animiert Filter, Bewegung, Transparenz mit deiner Standarddauer. */
  will-change: filter, transform, opacity; /* Performance-Hinweis an den Browser, bei vielen Karten hilfreich. */
}

/* Overlay-Text mittig */
.caption{
  position: absolute; inset: 0; /* Deckt die gesamte Karte ab. inset ist Kurzform für top/right/bottom/left. */
  display: grid; place-items: center; /* Centered Text via CSS Grid – moderner, kompakter Trick. */
  pointer-events: none; /* Klicks gehen ans Bild, nicht an die Caption. */
  opacity: 0; /* Unsichtbar im Normalzustand. */
  transition: opacity var(--fx-time) ease; /* Weiches Ein-/Ausblenden. */
}
.caption span{
  color: #fff; font-weight: 800; letter-spacing: .02em; /* Weißer, fetter Text mit leichter Laufweite – gut lesbar auf Bild. */
  font-size: var(--caption-size); /* Nutzt clamp-Variable, responsive. */
  text-transform: none; /* Kein automatisches Uppercase – du steuerst das per Text. */
  text-shadow: 0 2px 12px rgba(0,0,0,.4); /* Leichter Schatten für Lesbarkeit auf hellem Hintergrund. */
}

/* Hover-Zustand: SW + Blur + 20% dunkler + Caption sichtbar */
.card:hover img{
  filter: grayscale(100%) blur(2px) brightness(0.8); /* Kombi aus SW, Blur und dunkler – erzeugt klaren Hover-Kontrast. */
  border: 0; /* Sicherheit, dass kein Border auftaucht. */
}
.card:hover .caption{ opacity: 1; /* Caption sichtbar beim Hover. */ }

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .card img, .caption{ transition: none; /* Deaktiviert Animationen für Nutzer mit Motion-Reduktion – wichtiger A11y-Aspekt. */ }
}


/* Layout nur als Beispiel */
.gallery{
  display: grid; /* Grid-Layout für mehrere Karten. */
  gap: var(--gap); /* Einheitlicher Abstand. */
  justify-items: center; /* Zentriert die Items innerhalb der Grid-Zellen. */
}

/* Karte/Abbildung */
.gallery-card{
  position: relative; /* Für Overlay oder View-Animations. */
  inline-size: min(var(--card-w), var(--card-max)); /* Breite über Variablen gesteuert. */
  
  overflow: hidden; /* Croppt Inhalt an Kartenränder. */
  background: transparent; /* Kein extra Hintergrund. */
  margin: 0; /* Kein extra Außenabstand. */
}

.gallery-card img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius); /* Gleicher Rundungsradius wie sonst. */
  aspect-ratio: 16 / 10; /* Fixes Seitenverhältnis, modern und klar. */
  object-fit: cover; /* Füllt den Rahmen, schneidet ggf. etwas ab. */
  filter: grayscale(100%);        /* Standard: in Grau, wirkt dokumentarisch. */
  transition: filter .2s ease;    /* Schneller, aber weicher Übergang. */
}

/* Optional: Caption */
.gallery-card figcaption{
  padding: .5rem .75rem; /* Innenabstand um Text. */
  font-size: .9rem;      /* Etwas kleiner als Bodytext. */
}

/* ---------- Fallback (ohne View Timelines): klassischer Hover ---------- */
.gallery-card:hover img{
  filter: none; /* Auf Hover in Farbe – Klassiker. */
}



/* ---------- Bevorzugt ohne Animation bei reduzierter Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .gallery-card img{ transition: none; /* Keine Filteranimation bei Motion-Reduktion. */ }
}

/* ---------- Scroll-linked Animation (ohne JS) ---------- */
@supports (animation-timeline: view()){
  /* Das Hover-Verhalten deaktivieren, damit sich Effekte nicht überlagern */
  .gallery-card:hover img{ filter: grayscale(100%); /* Hover-Effekt abgeschaltet, wenn Scrollanimation aktiv. */ }

  /* Jede Karte erhält eine eigene View-Timeline entlang der Block-Achse */
  .gallery-card{
    view-timeline-name: --card;  /* Benennt die View-Timeline; relativ moderner Standard. */
    view-timeline-axis: block;   /* Scrollrichtung: vertikal (Block-Achse). */
  }

  /* Bild „scrubbt“ über die Scrollposition: grau → farbig → grau */
  .gallery-card img{
    animation-name: card-colorize; /* Nutzt das definierte Keyframe-Set. */
    animation-timeline: --card;    /* Hängt Animation an View-Timeline. */
    animation-timing-function: linear; /* Linearer Verlauf beim Scrollen. */
    animation-fill-mode: both;     /* Hält Zustand am Anfang/Ende der Timeline. */

    /* Start/Ende der Animation: wenn die führende/trailende Kante
       die 50%-Linie des Viewports kreuzt */
    animation-range: entry 50% exit 50%; /* Neue Syntax, noch relativ frisch, aber modern. */
    /* Dauer ist egal, die Timeline ist scroll-gekoppelt */
    animation-duration: 1s; /* Formal nötig, aber bei view-timeline eher symbolisch. */
  }

  @keyframes card-colorize{
    0%   { filter: grayscale(100%); } /* Noch nicht sichtbar → grau. */
    50%  { filter: grayscale(0%);   } /* In der Mitte des Viewports → farbig. */
    100% { filter: grayscale(100%); } /* Wieder rausgescrollt → wieder grau. */
  }
}


/************************************************************
 * 14) PROJEKT-LAYOUT (WORK / ABOUT / LAB) – BASIS (2 SPALTEN)
 ************************************************************/

/* ===========================
   Projekt-Wrapper (pro Bild)
   =========================== */

.project{
  inline-size: min(var(--project-w), var(--project-max)); /* Breite ist responsiv und gedeckelt. */
  margin-inline: auto; /* Horizontal zentriert. */
  margin-block: 2rem;  /* Abstand nach oben und unten zwischen Projekten. */
  display: grid;       /* Grid für Kopf + Bild + Footer. */
  gap: 0.875rem;       /* Abstände innerhalb des Projekts. */
}

/* Kopfbereich mit Titel + 2 Spalten */
.project-head{
  display: grid;                         /* Grid mit zwei Spalten: Meta + Text. */
  grid-template-columns: 240px 1fr;      /* Linke Spalte fix ~240px, rechts flexibel. */
  gap: 1rem;                             /* Abstand zwischen Spalten. */
  margin-bottom: 20px;                   /* Abstand zum folgenden Bildblock. */
  align-items: start;                    /* Inhalte oben ausgerichtet. */
}

/* Titelzeile steht über beiden Spalten */
.project-title {
  grid-column: 1 / -1;     /* Nimmt beide Spalten ein. */
  margin: 0 0 .25rem 0;    /* Kein Margin oben/seitlich, kleiner unten. */
  font-size: 1.75rem;      /* Große Überschrift pro Projekt. */
  line-height: 1.3;        /* Komfortable Zeilenhöhe. */
  font-weight: 500;        /* Medium-Schnitt. */
  display: flex;           /* Flex für Label neben Titel. */
  align-items: center;     /* Vertikal zentriert mit Label. */
  gap: .75rem;             /* Abstand zwischen Titel und Label-Badge. */
  color: black;
}


/* linke Meta-Spalte: Keywords/Links in kurzer Liste */
.project-meta{
  font-size: .9rem;  /* Etwas kleiner für Metaangaben. */
  line-height: 1.4;  /* Lesbarer Zeilenabstand. */
}
.project-meta ul{
  list-style: none;  /* Keine Bulletpoints. */
  margin: 0;         /* Kein Außenabstand. */
  padding: 0;        /* Kein Innenabstand. */
}
.project-meta li + li{ margin-top: .25rem; /* Kleiner vertikaler Abstand zwischen Meta-Zeilen. */ }
.project-meta a{ color: inherit; text-decoration: none; /* Links sehen aus wie normaler Text, passen sich Style an. */ }
.project-meta a:hover{ text-decoration: underline; /* Auf Hover deutlich als Link erkennbar. */ }

/* rechte Spalte: Beschreibung */
.project-desc{
  font-size: .95rem;       /* Fließtext, leicht größer als Meta. */
  line-height: 1.5;        /* Klassischer Lesekomfort. */
  color: var(--text-muted);/* Gedämpfte Farbe, nicht tiefschwarz. */
}

.project-desc p:first-child {
  margin-top: 0rem; 
  margin-bottom: 1rem;           /* Standardabstand zwischen Absätzen */
  padding: 0;                     /* Padding brauchst du nicht */         
}

.project-desc p.project-title{
  font-size: 1.75rem;
  line-height: 1.3;
  font-weight: 500;
}


/* Bild-Karte – nutzt deine bestehende Klasse mit Scroll-Effekt:
   Wenn du gallery-card schon hast, übernehmen wir sie hier. */
.project figure.gallery-card{
  position: relative;   /* Ermöglicht spätere Overlays. */
  inline-size: 100%;    /* Füllt Projektbreite. */
  border-radius: 0;     /* Rahmen vom Container selbst: keine Rundung, nur das Bild. */
  overflow: visible;    /* Caption außerhalb nicht abgeschnitten. */
  background: transparent; /* Kein Hintergrund. */
  margin: 0;            /* Kein extra Außenabstand. */
}

/* Nur das Bild abrunden */
.project figure.gallery-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 10;   /* Einheitliches Bildformat. */
  object-fit: cover;       /* Füllt Box, schneidet ggf. ab. */
  border-radius: var(--radius); /* Globale Rundung. */
  /* dein Filter/Animation bleibt aus deiner bestehenden CSS bestehen */
}

/* Caption als normaler Text unter dem Bild */
.project figure.gallery-card figcaption{
  position: static;       /* Normale Dokumentenposition. */
  margin-top: .5rem;      /* Abstand zum Bild. */
  font-size: .9rem;       /* Etwas kleinerer Erklärtext. */
  color: #000;            /* Schwarzer Text, anders als Muted-Body. */
  text-align: left;       /* Linksbündig. */
  opacity: 1;             /* Immer sichtbar. */
}



/************************************************************
 * 15) ZWEI-BILDER-LAYOUT (.img-2-columns)
 ************************************************************/

/* Wrapper für 2 Spalten */
.img-2-columns{
  display: grid;              /* Grid für zwei Bilder nebeneinander. */
  grid-template-columns: 1fr 1fr; /* Gleiche Breite für beide Spalten. */
  gap: var(--img2-gap);       /* Abstand, über Variable gesteuert. */
  inline-size: min(80vw, 800px);  /* Gesamtlayoutbreite. */
  margin-inline: auto;        /* Horizontal zentriert. */
}

/* Jede Karte nutzt die existierenden gallery-card-Regeln,
   aber hier ohne eigene Breitensteuerung – sie füllt die Spalte */
.img-2-columns .gallery-card{
  inline-size: 100%;       /* Füllt die jeweilige Spalte komplett. */
  margin: 0;               /* Kein zusätzlicher Außenabstand. */
  background: transparent; /* Kein Hintergrund. */
  overflow: visible;       /* Caption etc. können ausreichend Platz haben. */
}

/* Nur das Bild abrunden (wie beim Einzelbild) */
.img-2-columns .gallery-card img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;    /* Gleiches Seitenverhältnis wie große Bilder. */
  object-fit: cover;      /* Füllt die Box. */
  border-radius: var(--radius); /* Gleiche Rundung. */
}

/* Caption unter jedem Bild */
.img-2-columns .gallery-card figcaption{
  position: static;       /* Normale Position. */
  margin-top: .5rem;      /* Abstand zum Bild. */
  font-size: .9rem;       /* Etwas kleiner als Bodytext. */
  color: #000;            /* Schwarz. */
}

/* VIDEO */
.img-2-columns .gallery-card video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--radius);
}


/************************************************************
 * 16) PROJEKT-FOOTER (TEXT UNTER DEM BILD)
 ************************************************************/

.project-footer {
  grid-column: 1 / -1;     /* Nimmt die gesamte Projektbreite ein. */
  margin-top: 0.5rem;      /* Abstand zum Bildblock. */
  font-size: .95rem;       /* Ähnlich wie Fließtext. */
  line-height: 1.0;        /* Relativ enger Zeilenabstand, da meist kurze Zeilen. */
  color: var(--text-muted);/* Gedämpft, nicht dominant. */
}

.project-footer p{
  padding:0;   /* Kein zusätzliches Padding. */
  margin:0;    /* Kein default-Margin. */
}
.project-footer a {
  color: var(--color-patrol);     /* Links als farbige Akzente. */
  text-decoration: none;          /* Keine Unterstreichung. */
}
.project-footer a:hover {
  text-decoration: underline;     /* Hover: zeigt deutlich, dass es Link ist. */
}


/* Label-Badge neben dem Projekttitel (z.B. „Work“, „Lab“) */


.project-label {
  display: inline-flex;       /* statt inline-block */
  align-items: center;        /* vertikal zentrieren */
  justify-content: center;    /* optional: horizontal zentrieren */
  background: #555;
  color: #fff;
  font-size: .8rem;
  font-weight: 500;
  padding: .2rem .6rem;
  border-radius: .4rem;
  line-height: 1;             /* keine extra Zeilenhöhe mehr nötig */
}


/************************************************************
 * 17) SITE-FOOTER (IMMER UNTEN FIXIERT)
 ************************************************************/

.site-footer {
  position: fixed;   /* Footer bleibt am unteren Fensterrand „ankleben“. */
  bottom: 0;         /* Am unteren Rand. */
  left: 0;           /* Ganz links. */
  right: 0;          /* Ganz rechts. */

  background: #aaa;              /* Grauer Hintergrund. */
  border-top: 20px solid #fff;   /* Weißer Balken oben, als visueller Trenner. */
  padding: 0.3rem 1rem;          /* Innenabstand. */

  z-index: 9999;                 /* Sehr hoch, damit er über allem liegt. */
  
  font-size: 0.75rem; /* kleiner */
}

.footer-nav {
  display: flex;                     /* Flexcontainer für Footerlinks. */
  justify-content: flex-end;        /* Rechtsbündige Ausrichtung. */
  gap: 1.5rem;                      /* Abstand zwischen Links. */
}

.footer-nav a {
  color: #fff;           /* Weiße Links auf grauem Hintergrund. */
  text-decoration: none; /* Keine Unterstreichung. */
  font-size: 0.4rem;     /* Etwas kleinerer Footertext. */
}

.footer-nav a:hover {
  text-decoration: underline; /* Hover-Unterstreichung. */
}

/* Debug Buttons im Footer */
.site-footer [data-debug]{
  font-size: 0.7rem;
  padding: .25rem .6rem;
  border: 1px dashed #666;
  background: transparent;
  color: #000;
}

.site-footer [data-debug].is-active{
  background: #006d77;
  color: #fff;
  border-color: #006d77;
}



/************************************************************
 * 18) I18N / LANGUAGE-SWITCH
 ************************************************************/

/* === i18n Sichtbarkeit ===================================== */
/* Beide Sprachen sind im HTML vorhanden; wir blenden per data-lang um */
.i18n { display: none; /* Standard: versteckt alle i18n-Blöcke, bis eine Sprache aktiv ist. */ }

/* DE zeigen */
body[data-lang="de"] .lang-de { display: revert; /* Moderne Syntax, um default-Display (block/inline) wiederherzustellen. */ }

/* EN zeigen */
body[data-lang="en"] .lang-en { display: revert; }

/* (Optional) kleiner Sprachschalter-Stil – neutral gehalten */
.lang-switch {
  display: flex;               /* Flexlayout für Sprachbuttons. */
  justify-content: flex-end;   /* Rechtsbündig im Footer. */
  gap: 1rem;                   /* Abstand zwischen Buttons/Links. */
  font-size: .9rem;            /* Angepasste Schriftgröße. */
}

.lang-switch a {
	font-size: 0.6rem;
  color: #fff;                 /* Weißer Text wie andere Footerlinks. */
  text-decoration: none;       /* Keine Unterstreichung. */
  font-size: 0.9rem;           /* Konsistente Schriftgröße. */
}

.lang-switch button {
	font-size: 0.6rem;
  background: none;            /* Transparenter Hintergrund, wirkt wie Textbutton. */
  border: 1px solid #ccc;      /* Leichter Rahmen zur Abgrenzung. */
  padding: .15rem .5rem;       /* Innenabstand, kleine „Pille“. */
  border-radius: .35rem;       /* Abgerundete Ecken. */
  cursor: pointer;             /* Handcursor, zeigt Klickbarkeit. */
}
.lang-switch button[aria-current="true"] {
  border-color: #000;          /* Aktive Sprache dunkler eingerahmt. */
  font-weight: 500;            /* Etwas fetter für Hervorhebung. */
}


/************************************************************
 * 20) OPTIONALE 3-SPALTEN-VARIANTE FÜR PROJEKTE (.project-3-col)
 ************************************************************/

/* Projekt linksbündig statt mittig */
.project.project-3-col {
  /* Mehr Breite nur für 3-Spalten-Layouts */
  inline-size: 100%;  /* Nutzt die volle Breite des Contentbereichs (abzüglich body-Padding). */
  margin-left: 0;     /* Startet direkt an der linken Contentkante. */
  margin-right: 0;    /* Kein Auto-Zentrieren. */
  padding-left: var(--project-offset-left); /* NEU: Contentblock rutscht nach rechts */
  padding-right: var(--project-offset-right); /* NEU: Contentblock rutscht nach rechts */
}


/* Kopfbereich: 3 Spalten (Meta, Beschreibung, Bilder) */
.project-head.project-head-3-col {
  display: grid;                               /* Gridlayout mit drei Spalten. */
  grid-template-columns: 200px 2.6fr 2.4fr; /* Linke Spalte fix, mittlere und rechte verhältnisorientiert – Bilder bekommen am meisten Platz. */
  gap: 2rem;                                 /* Etwas größerer Abstand für Luft zwischen Spalten. */
  margin-bottom: 1.5rem;                       /* Abstand zum Rest des Projekts. */
  align-items: flex-start;                     /* Inhalte oben auszurichten wirkt geordneter. */
}


/* Titel über alle 3 Spalten */
.project-head.project-head-3-col .project-title {
  grid-column: 1 / 4; /* Titel steht über allen drei Spalten. */
}

/* Spalte für Bilder rechts */
.project-media {
  display: grid;    /* Ermöglicht mehrere Bildblöcke (z. B. 1 Bild + 2-Bilder-Grid). */
  gap: 0.75rem;     /* Vertikaler Abstand zwischen Bildern/Grids. */
}

/* Bilder / Bildgruppen füllen die Spalte komplett aus */
.project-3-col .project-media .gallery-card,
.project-3-col .project-media .img-2-columns {
  inline-size: 100%; /* Füllen ihre Spalte vollständig aus. */
  margin-inline: 0;  /* Kein zusätzliches horizontales Margin. */
}

/* In der 3-Spalten-Variante: 2-Bilder-Layout innerhalb der Spalte */
.project-3-col .project-media .img-2-columns {
  grid-template-columns: 1fr 1fr; /* Zwei Bilder nebeneinander innerhalb der Bildspalte. */
}





/* =========================================
   Lightbox-Overlay für Foto-Galerie
   ========================================= */

body.lightbox-open {
  overflow: hidden; /* Scrollen im Hintergrund verhindern, solange Overlay offen ist */
}

.lightbox-overlay {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* sichtbar, wenn aria-hidden="false" */
.lightbox-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-inner {
  max-width: 100vw;
  max-height: 100vh;
  display: flex;
  flex-direction: column;   /* NEU: alles untereinander statt nebeneinander */
  align-items: center;
  justify-content: center;
}

.lightbox-caption {
  margin-top: 0.75rem;
  text-align: center;
  color: #fff;   
  font-size: 0.9rem;
}

/* Bild nutzt die komplette Höhe des Viewports,
   bleibt dabei im Seitenverhältnis */
#lightbox-image {
  max-height: 90vh;  /* volle Höhe nutzen */
  max-width: 90vw;   /* nicht über die Breite hinaus */
  width: auto;        /* Breite ergibt sich aus Höhe + Seitenverhältnis */
  height: auto;
  object-fit: contain;   /* Sicherheit, falls doch skaliert wird – kein Cropping */
  border-radius: var(--radius);
}

/* Close-Button oben rechts */
.lightbox-close {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

/* Pfeilnavigation links/rechts */
.lightbox-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
}

.lightbox-prev {
  left: 1.5rem;
}

.lightbox-next {
  right: 1.5rem;
}

/* =========================================
   Lightbox – Mobile Ansicht (<700px)
   Pfeile sollen UNTER dem Bild erscheinen
   ========================================= */
@media (max-width: 700px) {

  .lightbox-close {
    top: 1rem;
    right: 1rem;
    font-size: 1.6rem;
  }

  /* Pfeile sollen nicht seitlich über dem Bild kleben → statisch positionieren */
  .lightbox-nav {
    position: static;
    transform: none;
    font-size: 2rem; /* etwas kleiner für mobile Screens */
    margin: 0.75rem 1rem;
    color: #fff;
  }

  /* Container für die Pfeile unter dem Bild */
  .lightbox-nav-wrapper {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 400px;
    margin: 0.5rem auto 1rem;
  }

  /* Overlay-Layout muss Platz für die Pfeile unterhalb behalten */
  .lightbox-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

body.lightbox-open .site-footer {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 400px) {
  .tall-letter > span[aria-hidden="true"]{
    font-size: 20px;
    /* ############# war 22 und 0.7remvtl. letter-spacing minimal verringern */
  }

  .menu-tall {
    gap: 0.4rem;
  }
}

@supports not (animation-timeline: view()) {
  /* z.B. einfach immer farbig auf iOS */
  .gallery-card img {
    filter: none;
  }
  
}

/* ===================================================================
   ABOUT: volle Breite, aber 1-spaltiges Layout
   =================================================================== */

.project.project-wide {
  inline-size: 100%;
  margin-left: 0;
  margin-right: 0;
  max-width: none;     /* überschreibt die alten Grenzen */
  padding-left: 2rem;  /* schöner Abstand links */
  padding-right: 2rem; /* Abstand rechts */
}

/* Kopfbereich bleibt 1-spaltig → kein Grid */
.project.project-wide .project-head {
  display: block;
}

/* Titel wie gewohnt */
.project.project-wide .project-title {
  margin-bottom: 1rem;
}

/* Abstand zum Fließtext */
.project.project-wide .project-desc {
  margin-top: 0rem; /* war 1rem */
  max-width: 900px;   /* Optional: bessere Lesbarkeit */
  line-height: 1.6;
}

.project.project-wide.home-hero{
  padding-left: var(--project-offset-left);
  padding-right: var(--project-offset-right);
}

/* ===========================================================
   INDEX – volle breite
   =========================================================== */
   
  /* INDEX: volle Breite + keine 900px Deckelung */
  .home-hero .project-desc{
    max-width: none;      /* <- killt die 900px Grenze */
    width: 100%;
  }

  /* INDEX: alles so groß wie der About-Hauptsatz */
  .home-hero .project-desc p{
    color: #000;
    margin: 0 0 1rem 0;   /* kontrollierter Abstand */
  }

  /* Fokuszeile wirkt wie ein Satz */
  .home-hero .home-focus{
    margin-top: 0.25rem;
  }
  
  /* INDEX: überschreibt ABOUT max-width sicher */
.project.project-wide.home-hero .project-desc{
  max-width: none;
  width: 100%;
}

  
/* ===========================================================
   ABOUT – 2-Spalten-Layout (Bild links, Text rechts)
   =========================================================== */
.project.about-2col {
  inline-size: 100%;
  margin-inline: 0;
  padding-left: var(--project-offset-left);
  padding-right: var(--project-offset-right);
}


.about-head {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* links Bild, rechts Text */
  gap: 2rem;
  align-items: start;
}

/* Titel über beide Spalten */
.about-head .project-title {
  grid-column: 1 / 3;
}

/* Bild-Spalte */
.about-head .project-media {
  display: block;
  width: 100%;
}

/* Text-Spalte */
.about-head .project-desc {
  font-size: .95rem;
  line-height: 1.6;
}


/* ===========================================================
   ABOUT – Portrait-Bild ohne Zuschnitt / ohne 16:10
   =========================================================== */

/* ===========================================================
   ABOUT – Portrait-Bild ohne Zuschnitt / ohne 16:10
   =========================================================== */

/* Figure selbst – kann so bleiben wenn du willst */
.about-portrait {
  inline-size: 100%;
  max-width: 100%;
  margin: 0;
}

/* Spezifischer Selector, damit wir .project figure.gallery-card img überstimmen */
.project.about-2col .about-portrait img {
  width: 100%;         /* füllt die Spalte */
  height: auto;        /* echte Höhe aus dem Seitenverhältnis */
  max-height: none;    /* keine künstliche Begrenzung */
  aspect-ratio: auto;  /* überschreibt 16/10 */
  object-fit: contain; /* nichts beschneiden */
  filter: none;        /* farbig, kein SW-Scroll-Effekt */
}

/* ABOUT – Portrait in Textspalte (Mobile-Bild) sauber einpassen */
.project-desc .gallery-card.about-1b {
  inline-size: 100%;
  margin: 1.5rem 0;  /* Luft über/unter dem Bild */
}

.about-1a {
  display: block;
}

.about-1b {
  display: none;
}

 .home-layer-1{
    font-size: 3.1rem;
    line-height: 1.25;
    font-weight: 500;

    margin: 0 0 0.75rem 0;
    text-align: justify;
    hyphens: auto;
  }

  .home-layer-2{
    font-size: 2.05rem;
    line-height: 1.3;
    font-weight: 400;

    margin: 0 0 0.75rem 0;
    text-align: justify;
    hyphens: auto;
  }

  .home-layer-3{
    font-size: 1.75rem;
    line-height: 1.35;
    font-weight: 400;

    margin: 0;
    text-align: justify;
    hyphens: auto;
  }


body.debug-layout .header > .box {
  position: relative;
  overflow: hidden;
}


/* =========================================
   DEBUG STATS BOX
   ========================================= */

.debug-stats {
  position: fixed;
  bottom: 3.2rem; /* über Footer */
  left: 1rem;

  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;

  background: rgba(0,0,0,0.85);
  color: #0f0;
  padding: 0.75rem 0.9rem;

  border-radius: 4px;
  z-index: 9999;

  display: none;
  pointer-events: none;
}

body.debug-stats-on .debug-stats {
  display: block;
}

.debug-stats b {
  color: #7fff7f;
  font-weight: 500;
}

/* =========================================================
   HEADER – Zwischenlayout (2 Zeilen)
   900px – 1349px
   ========================================================= */
   
/* =========================================================
   HEADER – Zwischenlayout (2 Zeilen)
   900px – 1349px
   ========================================================= */

@media (max-width: 1400px) and (min-width: 900px){

  /* Header bleibt flex + wrap */
  .header{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.5rem;
  }

  /* Reihenfolge */
  .header > .brand.box   { order: 1; }
  .header > .contact.box { order: 2; }
  .header > .menu.box    { order: 3; }

  /* ALLE Header-Boxen exakt gleich hoch */
  .header > .brand.box,
  .header > .contact.box,
  .header > .menu.box{
    height: var(--row-h);
    box-sizing: border-box;
  }

  /* Menü ist komplette zweite Zeile */
  .header > .menu.box{
    flex: 0 0 100%;
    /* KEIN display:flex hier */
	overflow: visible;
  }

  /* Menü selbst bleibt wie im Desktop */
  .menu-tall{
    height: 100%;
  }

  .menu-tall > li{
    height: 100%;
  }

  .menu-tall > li > a{
    height: 100%;
    align-items: center;       /* vertikal */
    justify-content: flex-start; /* links */
  }

  /* Contact niemals nach rechts drücken */
  .header > .contact.box{
    margin-left: 0;
  }
}



/************************************************************
 * 19a) MOBILE HEADER / MENÜ (< 900px)
 ************************************************************/

/* =====================================================
   HEADER – Mobile (<900)
   IDENTISCH zum 900–1349 Layout
   ===================================================== */

@media (max-width: 899.98px){

  /* Header: gleiche Geometrie wie Zwischenlayout */
  .header{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.3rem;
  }

  /* gleiche Reihenfolge */
  .header > .brand.box   { order: 1; }
  .header > .contact.box { order: 2; }
  .header > .menu.box    { order: 3; }

  /* KEINE feste Höhe mehr */
  .header > .brand.box,
  .header > .contact.box,
  .header > .menu.box{
	  flex: 0 0 100%;
    height: auto;
    box-sizing: border-box;
	padding-left: 1.3rem;   /* identisch zu --project-offset-left */
    padding-right: 0; 
  }

  /* Contact + Menu rutschen automatisch nach unten */
  .header > .menu.box{
    flex: 0 0 100%;
  }

  /* ======= NUR MOBILE-SPEZIFISCH ======= */

  /* Menü kleiner, kein Tall */
  .menu{
    align-self: auto;
    height: auto;
  }

  .menu-tall{
    height: auto;
    flex-wrap: wrap;
    gap: .5rem;
  }

  .menu-tall > li{
    height: auto;
  }

  .menu-tall > li > a{
    height: auto;
    padding-left: 0;
    padding-right: .8rem;
  }

  .tall-letter > span[aria-hidden="true"]{
    font-size: 23px;
    transform: none;
  }
}


/************************************************************
 * 19b) MOBILE CONTENT / TYPO / PROJECTS (< 900px)
 ************************************************************/

@media (max-width: 899.98px){

  body {
    padding: 1rem;      /* wie Desktop */
    margin: 0;
  }
  
  .content{ 
    margin-top: 0.0em;
    padding-top: 0px;
  }

  .about-head {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .about-head .project-title {
    grid-column: 1 / 2;
  }

  .about-1a { display: none; }
  .about-1b { display: block; }

  /* ABOUT auf mobile genauso wie die 3-Spalten-Projekte einrücken */
  .project.about-2col {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-inline: auto;
  }

  .about-head .project-media {
    margin-top: 0;
  }

  .project-title.colorPatrol.i18n.lang-de {
    font-size: 1.25rem;
  }

  .home-layer-1{
    font-size: 1.9rem;
    line-height: 1.3;
    margin: 0 0 0.6rem 0;
    text-align: left;
    hyphens: auto;
  }

  .home-layer-2{
    font-size: 1.45rem;
    line-height: 1.35;
    margin: 0 0 0.6rem 0;
    text-align: left;
    hyphens: auto;
  }

  .home-layer-3{
    font-size: 1.2rem;
    line-height: 1.4;
    margin: 0;
    text-align: left;
    hyphens: auto;
  }

  .project.project-wide.home-hero{
    padding-left: 3px;
    padding-right: 3px;
  }

  .project.project-3-col {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-inline: auto;
  }

  .project-head.project-head-3-col {
    grid-template-columns: 1fr;
  }

  .project-head.project-head-3-col .project-title {
    grid-column: 1 / 2;
  }

  .project-media {
    margin-top: 0.75rem;
  }

  .project-title{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }

  .project-title .project-label{
    display: block;
  }
}


/* Wenn ein Layoutwechsel passiert (durch wrap/order), wirkt es weniger hart,
   weil Browser die neuen Positionen minimal glättet. */


/* =====================================================
   HEADER: diagonales dashed Pattern (gekachelt)
   ===================================================== */


.header {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'>\
  <g stroke='red' stroke-opacity='0.5' stroke-width='0.5' \
     stroke-dasharray='6 6' stroke-linecap='square'>\
    <line x1='-45' y1='0' x2='60' y2='105' />\
    <line x1='-30' y1='0' x2='60' y2='90'  />\
    <line x1='-15' y1='0' x2='60' y2='75'  />\
    <line x1='0'   y1='0' x2='60' y2='60'  />\
    <line x1='15'  y1='0' x2='60' y2='45'  />\
    <line x1='30'  y1='0' x2='60' y2='30'  />\
    <line x1='45'  y1='0' x2='60' y2='15'  />\
  </g>\
</svg>");
  background-repeat: repeat;
  background-size: 60px 60px;
}