@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../googlefonts/roboto-v49-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../googlefonts/roboto-v49-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../googlefonts/roboto-v49-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../googlefonts/roboto-v49-latin-700.woff2') format('woff2');
}

/* Optional italic variants */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: url('../googlefonts/roboto-v49-latin-300italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../googlefonts/roboto-v49-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: url('../googlefonts/roboto-v49-latin-500italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../googlefonts/roboto-v49-latin-700italic.woff2') format('woff2');
}

/* Design tokens */
:root {
  /* Surfaces */
  --surface-bg: #FFFDFB;
  --surface-header: #ffffff;
  --surface-header2: #07091F;
  --surface-panel: #efeff0;
  --surface-highlight: #d2d8e6;
  --surface-tag: #eeeeee;
  --surface-points: #dbdde3;
  --surface-footer: #07091F;

  /* Borders */
  --border-default: #2a2a2a;
  --border-tag: #3a3a3a;
  --border-muted: #555;
  --border-accent-light: rgba(255,255,255,0.2);

  /* Text */
  --text-content-title: #E8E8E8;
  --text-primary: #444444;
  --text-secondary: #686868;
  --text-tertiary: #adadad;
  --text-soft: #757575;
  --title-highlight: #B40C20;

  /* xref */
  --xref-link-highlight: #B40C20;
  --xref-text-primary: #B40C20;

  /* Interaction */
  --link-accent: #3a86ff;
  --link-highlight: #B40C20;


  /* Effects */
  --overlay-dark-35: rgba(0,0,0,0.35);
  --shadow-1: 0 1px 0 rgba(0,0,0,0.25);

    /* Header colors */
  --header-bg: var(--surface-header);
  --header-border: var(--border-default);

  /* Inline code colors */
  --inlinecode-bg: #ededed;
  --inlinecode-text: #000000;
  --inlinecode-border: #000000;


  /* footer */
  --text-footer: #dddddd;
}


.hljs{
  background-color: #1F1F1F !important;
}


/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--surface-bg);
  color: var(--text-primary);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fixed header */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 120px;

  display: flex;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
}
.site-header .inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}




/* Brand logo */
/* Header shell (keep or merge with your existing header styles) */
.site-header {
  position: fixed;            /* optional: remove if you don't want fixed */
  top: 0; left: 0; right: 0;
  height: 100px;               /* match the rest of your layout */
  background: var(--header-bg);

  z-index: 1000;
  display: flex;
  align-items: center;
}

/* Centering container with max width */
.site-header .brand-bar {
  /* grid is the most robust for this three-part layout */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  /* this gap creates the “hole” around center (100px on each side => 200px total) */
  column-gap: 100px;
  width: 100%;
  max-width: 900px;           /* align with your page width */
  margin: 0 auto;
  padding: 0 16px;            /* page padding */
  height: 100%;
  overflow: hidden;           /* ensures no accidental overflow on tiny screens */
}


.site-header3 .brand-bar{
  /* grid is the most robust for this three-part layout */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  /* this gap creates the “hole” around center (100px on each side => 200px total) */
  column-gap: 100px;
  width: 100%;
  max-width: 900px;           /* align with your page width */
  margin: 0 auto;
  padding: 0 16px;            /* page padding */
  height: 100%;
  overflow: hidden;           /* ensures no accidental overflow on tiny screens */
}





.site-header3 {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 80px;
  background-color: var(--surface-header2);
  display: flex;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
}
.site-header3 .inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}



/* Left and right areas hold the line images and clip them cleanly */
.brand-line-left-area,
.brand-line-right-area {
  display: flex;
  align-items: center;
  overflow: hidden;           /* clip the line neatly at the inner edge */
}

/* Make the left line “grow” from the left edge toward center */
.brand-line-left-area { justify-content: flex-end; }

/* Make the right line “grow” from the right edge toward center */
.brand-line-right-area { justify-content: flex-start; }

/* The line itself: stretch to fill its area, keep it thin */
.brand-line {
  display: block;
  width: 100%;
  height: 2px;                /* visual thickness of the line */
  object-fit: cover;          /* stretch without letterboxing */
}

/* The centered logo */
.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;             /* removes extra inline gaps */
}
.brand-logo img {
  height: 36px;               /* set the visual size of the logo */
  width: auto;
  display: block;
}

.header2-bar {
  width: 100%;
  height: 60px;
  background-color: var(--surface-header2);
}



/* Responsive: progressively reduce the hole around the center so the lines stay visible */
@media (max-width: 1024px) {
  .site-header .brand-bar { column-gap: 140px; }
  .site-header3 .brand-bar { column-gap: 140px; }
}
@media (max-width: 820px) {
  .site-header .brand-bar { column-gap: 96px; }
  .site-header3 .brand-bar { column-gap: 96px; }
  .brand-logo img { height: 32px; }
}
@media (max-width: 640px) {
    .site-header .brand-bar { column-gap: 0px; }
    .site-header3 .brand-bar { column-gap: 0px; }
    .brand-logo img { height: 28px; }
}
@media (max-width: 420px) {
  .site-header .brand-bar { column-gap: 0px; }
  .site-header3 .brand-bar { column-gap: 0px; }
  .brand-logo img { height: 24px; }

}


/* Page shell */

.content-title{
  background-color: var(--surface-header2);
  height: 70px;
  text-align: center;
  margin-bottom: 20px;
}

.content-title h1.title{
  color: var(--text-content-title);
  font-size: clamp(1.5rem, 5vw, 1.5rem);
  letter-spacing: 1.5px;
}

.page { padding-top: 94px; }
.container {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 0 16px 48px;
}

/* Typography */
h1.title {
  font-size: clamp(2rem, 5vw, 2.15rem);
  line-height: 1.15;
  margin: 6px 0;
  letter-spacing: 0.2px;
  color: var(--title-highlight);
}
h2.subtitle {
  font-size: clamp(1.1rem, 3.5vw, 1.35rem);
  font-weight: 500;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.meta-date {
  font-weight: 300;
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
hr {
  border: none;
  border-top: 1px solid var(--border-default);
  margin: 16px 0 20px;
}

/* Floating side content */
.secondary_content1,
.secondary_content2 {
  float: right;
  width: 400px;
  margin-left: 60px;
}
.secondary_content1 { margin: 6px 0 16px 60px; }
.secondary_content2 { margin: 16px 0 20px 60px; }


.secondary_content2 h4{
    padding-left: 1em;
    font-weight: 400;
}


.secondary_content1 .card,
.secondary_content2 .card {
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--shadow-1);
}
.secondary_content1 img.teaser-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Points / fun facts */
.points-box { margin-top: 12px; }
.funfacts-box h3 {
  font-size: 1rem;
  margin: 0 0 8px;
  color: var(--text-secondary);
  font-weight: 600;
}
.points-box ul { margin: 0; padding: 0; list-style: disc inside; }
.points-box li {
  padding: 6px 8px;
  background: var(--surface-points);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  margin-bottom: 6px;
  font-weight: 300;
}
.funfacts-box {
  margin-top: 12px;
  background: var(--surface-highlight);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 12px;
}

/* Content blocks */
.teaser {
  font-size: 1.05rem;
  color: var(--text-soft);
  margin-bottom: 16px;
}
.blocks { margin-bottom: 60px; }
.block { margin: 0 0 18px; padding: 12px 0 0; }
.block h3 { font-size: 1.6rem; margin: 0 0 6px; }
.block p { margin: 0; font-size: 1.2rem; text-align: left; }

.clear { clear: both; }

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}
.tag {
  padding: 6px 10px;
  border-radius: 9999px;
  background: var(--surface-tag);
  border: 1px solid var(--border-tag);
  font-size: 0.85rem;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1;
  pointer-events: none;
}

/* Footer */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: var(--text-footer);
}
a.footertext {
  color: inherit;
  text-decoration: none;
  font-size: 0.95rem;
}
a.footertext:hover { text-decoration: underline; }

/* End panel */
.end-panel { width: 100%; background: var(--surface-footer); }
.end-panel .panel-inner {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 16px 32px;
}
.end-panel .tags { margin: 8px 0; }

/* xref box */
.xref-wrap {
  border: 1px solid var(--border-muted);
  border-radius: 16px;
  padding: 8px;
  margin: 20px 0;
  background: transparent;
}
.xref-box {
  border-radius: 12px;
  background: url('../images/xref_tech_bg.webp') center/cover no-repeat;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 140px;
  padding: 10px 10px 10px 30px;
}
.xref-col.icons { display: flex; gap: 8px; }
.xref-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  /* background: var(--overlay-dark-35); */
  text-decoration: none;
}
.xref-icon i { font-size: 50px; color: var(--xref-text-primary); }
.xref-col.text { display: flex; flex-direction: column; padding-left: 20px; }
.xref-col.text a { text-decoration: none; }
.xref-col.text a:hover { text-decoration: underline; }
.xref-title {
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.25;
  color: var(--xref-link-highlight);
}
.xref-subtitle {
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--xref-text-primary);
  opacity: 0.9;
}
.xref-col.avatar img {
  height: 140px;
  width: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--border-accent-light);
  display: block;
}

/* Responsive */
@media (max-width: 940px) {

  .xref-box {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
    padding: 10px 30px;
  }
  .xref-col.avatar {
    order: 1;
    display: flex;
    justify-content: center;
    padding-top: 30px;
  }
  .xref-col.avatar img { width: 200px; height: auto; }
  .xref-col.text { order: 2; }
  .xref-col.icons { order: 3; justify-content: center; padding-bottom: 30px; }

  .secondary_content1,
  .secondary_content2 {
    float: none;
    width: 100%;
    margin: 12px 0;
  }

  .site-header .inner { padding: 0 12px; }
  .container { padding: 0 12px 40px; }
}

/* Home page */

/* Articles index */
.articles-index a {
  text-decoration: none;
  color: inherit;
}
.articles-index a:hover {
  color: var(--link-highlight);
  text-decoration: underline;
}

/* -------------------------------------------------------
   Featured article – isolated from article-row grid
   ------------------------------------------------------- */
.article-featured {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 24px;
}

/* Image column */
.article-featured .image-link img {
  width: 500px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* Text column */
.article-featured .featured-text {
  flex: 1;
  min-width: 0;
}

.article-featured .featured-title {
  font-size: clamp(2rem, 5vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 6px;
  letter-spacing: 0.2px;
  padding-bottom: 0.4em;
  color: var(--title-highlight);
}

.article-featured .featured-title a {
  color: inherit;
  text-decoration: none;
}

.article-featured .featured-title a:hover {
  text-decoration: underline;
  color: var(--link-highlight);
}

.article-featured .featured-subtitle {
  font-size: clamp(1.1rem, 3.5vw, 1.3rem);
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0;
}

.article-featured .home-meta-date {
  font-weight: 300;
  color: var(--text-tertiary);
  font-size: 0.95rem;
  margin-top: 12px;
}


@media (max-width: 940px) {
  .article-featured {
    flex-direction: column;
    gap: 16px;
  }

  .article-featured .image-link img {
    width: 100%;
  }

  .home-meta-date {
    margin-top: 0px;
  }

}





/* Article list */
/* Article row: desktop layout (image to the right of the whole block) */
.articles-list .article-row {
  display: grid;
  grid-template-columns: 1fr 200px;          /* text | image */
  grid-template-rows: auto auto auto;        /* title | subtitle | date */
  grid-template-areas:
    "title    thumb"
    "subtitle thumb"
    "meta     thumb";
  align-items: start;
  gap: 16px 24px;
  padding: 12px 0;
}

/* Let children of .row-left participate in the parent grid without changing HTML */
.article-row .row-left {
  display: contents;
}

/* Map elements to grid areas */
.article-row .row-title    { grid-area: title;   margin: 0 0 6px; font-size: 1.35rem; color: var(--title-highlight); }
.article-row .row-subtitle { grid-area: subtitle; margin: 0; font-size: 1rem; color: var(--muted);  }
.article-row .home-meta-date { grid-area: meta; font-size: 1rem; color: var(--text-tertiary) }

.article-row .thumb-link {
  grid-area: thumb;
  justify-self: end;
  align-self: center;
  text-decoration: none;
}
.article-row .thumb-link img {
  width: 200px;
  height: auto;        /* ignore the HTML height attribute; CSS wins */
  display: block;
  border-radius: 10px;
}

/* Mobile layout (image only to the right of the subtitle row) */
@media (max-width: 940px) {
  .articles-list .article-row {
    grid-template-columns: 1fr auto;         /* subtitle | image */
    grid-template-rows: auto auto auto;      /* title | (subtitle+image) | date */
    grid-template-areas:
      "title    title"
      "subtitle thumb"
      "meta     meta";
    gap: 12px 16px;
  }
  .article-row .thumb-link img { width: 160px; }

  .article-row .row-subtitle {  font-size: 0.8rem;  }

  .article-row .home-meta-date { font-size: 0.7rem;  }
}


/* imprint */

.imprint-content {
    margin-top: 2rem;
    font-style: normal;
}

.imprint-content address {
    font-style: normal; /* Standardkursiv ausschalten */
    display: block;
    line-height: 1.5;
}

.imprint-content p {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.imprint-content .email-link {
    color: var(--text-primary);
    text-decoration: none;
}

.imprint-content .email-link:hover,
.imprint-content .email-link:focus {
    color: var(--link-highlight);
    text-decoration: underline;
}

/* code block */
pre{
    padding: 10px;
    font-size: 0.7em;
    border-radius: 7px;

    display: block;       /* ensures new line structure */
    width: 100%;          /* prevents half-width overflow */
    max-width: 100%;      /* prevents sticking out */
    box-sizing: border-box;

    overflow-x: auto;     /* enable scroll instead of overflow */
    white-space: pre;     /* do NOT wrap (keeps code readable) */
}

.inlinecode {
    padding-left: 3px;
    padding-right: 3px;
    background: var(--inlinecode-bg);
    color: var(--inlinecode-text);
    border-radius: 4px;
    font-family: "JetBrains Mono Light","JetBrains Mono",
               "Fira Code Light","Fira Code",
               "Source Code Pro Light","Source Code Pro",
               "IBM Plex Mono","Consolas","Courier New",
               monospace;
    font-weight: 300;
    border-color: var(--inlinecode-border);
    border-width: 1px;
    border-style: solid;
}