:root {
  /* Farbklima "Watt". Alle Werte stammen aus dem vorhandenen Material:
     Der Seitengrund ist die blaugraue linke Kante des Luettstadt-Banners,
     die Knallfarbe ist das Rot der Backbordtonne im Emsfahrwasser.
     Die Karten sind weiss, damit die drei fertigen Banner in Papierboegen
     liegen und den farbigen Grund nie beruehren.
     Genau eine Signalfarbe, und die gehoert der Sieben. */
  --bg: #dce4e1;
  --card: #ffffff;
  --paper: #f2f1ed;
  --white: #ffffff;
  --ink: #0e1613;
  --muted: #46534f;
  --line: #b7c5bf;
  --line-soft: #e3e9e6;
  --dark: #10201c;
  --accent: #1f3b33;
  /* Ein Rot fuer alles: CMYK 10/100/100/30 in RGB umgerechnet.
     Traegt die Sieben, den Fuss, die Werkzeugleiste, Fokusringe und die
     Textmarkierung. Auf dem Grund erreicht es 6,45:1, weisse Schrift
     darauf 8,35:1 - beides deutlich ueber der Anforderung.
     Hinweis: Die Umrechnung ist die einfache Formel ohne Farbprofil. Im
     Druck mit ISO Coated faellt der Ton etwas anders aus. */
  --knall: #a10000;
  --wrap: 1160px;

  /* Barrierefreiheits-Panel und Werkzeugleiste tragen dasselbe Rot */
  --a11y-akzent: #a10000;
  --a11y-akzent-hover: #7a0000;
  --a11y-auf-akzent: #ffffff;
  --a11y-panel-grund: #ffffff;
  --a11y-panel-text: #0e1613;
  --a11y-panel-linie: #d7ded9;
  --a11y-radius: 0;

  /* Werkzeugleiste: rechts unten, weil der Kopfbereich frei bleiben soll */
  --wz-abstand: 24px;
  --wz-abstand-mobil: 12px;
  --wz-unten: 22px;
  --wz-unten-mobil: 16px;
  --wz-groesse: 38px;
  --wz-groesse-mobil: 36px;
  --wz-grund: #10201c;
  --wz-auf-grund: #ffffff;
  /* Platz, den die Leiste rechts belegt: Abstand + Knopf + Luft.
     Die Wortmarke rechnet ihn heraus, damit sie nicht darunter laeuft. */
  --wz-platz: 88px;
}

::selection { color: var(--white); background: var(--knall); }

/* Mail- und Webadressen werden nie getrennt. Passt eine Adresse nicht mehr
   in die Restzeile, rueckt sie als Ganzes in die naechste. Deshalb hier
   kein overflow-wrap: anywhere und kein word-break. */
a[href^="mailto:"],
a[href^="tel:"],
.project-url,
.vorhang-fuss a {
  white-space: nowrap;
}

@font-face {
  font-family: "Code Pro";
  src: url("code-pro.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  /* Traegt die Textvergroesserung aus dem Barrierefreiheits-Panel.
     Deshalb sind alle Schriftgroessen der Seite in rem gesetzt. */
  font-size: calc(100% * var(--user-font-scale, 1));
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--dark);
  text-decoration: none;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.wrap {
  width: min(calc(100% - 48px), var(--wrap));
  margin-inline: auto;
}
.anchor { scroll-margin-top: 24px; }

/* Hero: volle Fensterhöhe, Wortmarke auf Containerbreite.
   Der Teiler in font-size ist an der Zeichenbreite von "Groninger 7"
   in Code Pro gemessen, damit die Zeile jede Fensterbreite füllt. */
/* Die Wortmarke sitzt exakt in der Mitte des Fensters. Der Scroll-Pfeil
   haengt absolut am Fuss und verschiebt sie deshalb nicht. */
.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100svh;
  overflow: clip;
  border-bottom: 1px solid var(--line);
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 500; }

.wortmarke {
  width: min(calc(100% - 48px), var(--wrap));
  margin: 0 auto;
  font-family: "Code Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(min(100vw - 48px - var(--wz-platz), var(--wrap)) / 6.6);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: .92;
  white-space: nowrap;
}
.sieben { color: var(--knall); }

/* Nur fuer Screenreader und Suchmaschinen, optisch nicht vorhanden */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(28px, 6svh, 64px);
  padding: 10px 20px;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  transform: translateX(-50%);
  transition: color .2s ease;
}
.hero-scroll svg { animation: hero-scroll-hin 2.8s ease-in-out infinite; }
.hero-scroll:hover { color: var(--knall); }
.hero-scroll:focus-visible {
  outline: 2px solid var(--knall);
  outline-offset: 2px;
}
@keyframes hero-scroll-hin {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(9px); }
}

.section { padding: 92px 0 108px; }

/* Intro: der eine erklärende Absatz zwischen Wortmarke und Verzeichnis */
.intro { padding: 96px 0 8px; }
.intro-lead {
  max-width: 30ch;
  margin: 0 0 20px;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.06;
  text-wrap: balance;
}
.intro-text {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.62;
  text-wrap: pretty;
}

/* Einblenden beim Scrollen. Greift nur, wenn das Skript die Klasse gesetzt hat,
   sonst blieben die Inhalte ohne JavaScript unsichtbar. Nach oben scrollen
   blendet nichts wieder aus, das erledigt das Skript. */
.blendet-ein :is(.intro .wrap, .directory-row) {
  opacity: 0;
  transform: translateY(14px);
}
.blendet-ein :is(.intro .wrap, .directory-row).ist-da {
  opacity: 1;
  transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}

.directory { display: grid; gap: 40px; }
.directory-row {
  display: grid;
  grid-template-columns: 190px minmax(260px, 1fr) minmax(230px, .68fr);
  gap: 34px;
  align-items: start;
  padding: 34px 28px 38px;
  border: 1px solid var(--line);
  background: var(--card);
}
.directory-label {
  margin: 0;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.directory-content h3 {
  margin-bottom: 12px;
  font-size: clamp(1.5625rem, 1.2rem + 1.25vw, 2.375rem);
  letter-spacing: -.035em;
  line-height: 1.08;
}
.directory-content > p {
  max-width: 580px;
  margin-bottom: 0;
  color: var(--muted);
}
.directory-row-group { grid-template-columns: 190px 1fr; }

.site-footer {
  margin-top: 96px;
  padding: 26px 0;
  color: #fff;
  background: var(--knall);
  font-size: 0.8125rem;
}
.footer-row {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}
.footer-row p { margin: 0; }
.footer-links { display: flex; gap: 22px; }
.footer-links button {
  padding: 0;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Weiss ist schon der hellste Wert, der Hoverzustand arbeitet deshalb
   ueber die Strichstaerke. */
.footer-links button:hover { text-decoration-thickness: 2px; }
/* Im Fuss waere ein roter Fokusring auf rotem Grund unsichtbar */
.footer-links button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.hinweis button:focus-visible {
  outline: 2px solid var(--knall);
  outline-offset: 3px;
}

/* Hinweis statt Cookie-Banner: die Seite setzt keine Cookies,
   es gibt also nichts einzuwilligen. Der Streifen informiert nur. */
.hinweis {
  position: fixed;
  z-index: 90;
  left: 24px;
  bottom: 22px;
  width: min(calc(100% - 48px), 420px);
  padding: 20px 22px 18px;
  color: var(--white);
  background: var(--dark);
  border-left: 3px solid var(--knall);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
}
.hinweis[hidden] { display: none; }
.hinweis.sichtbar { opacity: 1; transform: translateY(0); }
.hinweis p {
  margin: 0 0 16px;
  color: #c5d1cc;
  font-size: 0.875rem;
  line-height: 1.5;
}
.hinweis strong { color: var(--white); font-weight: 600; }
.hinweis-aktionen {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}
.hinweis-link {
  padding: 0;
  color: #93a19c;
  background: none;
  border: 0;
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hinweis-link:hover { color: var(--white); }
.hinweis-ok {
  padding: 9px 18px;
  color: var(--ink);
  background: var(--white);
  border: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.hinweis-ok:hover { color: var(--white); background: var(--knall); }

.legal-dialog {
  width: min(calc(100% - 32px), 650px);
  max-height: min(82svh, 760px);
  padding: 0;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--dark);
}
/* Kopf bleibt stehen, nur der Inhalt scrollt */
.legal-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialog-head { flex: none; }
.legal-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--line-soft);
}
.dialog-head h2 { font-size: 1.75rem; }
.dialog-head button {
  padding: 0;
  color: var(--ink);
  background: none;
  border: 0;
  font-size: 1.875rem;
  line-height: 1;
  cursor: pointer;
}
.dialog-content {
  flex: 1;
  min-height: 0;
  padding: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 0.9375rem;
}
.dialog-content h3 {
  margin: 26px 0 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
}
.dialog-content h3:first-child { margin-top: 0; }

/* Banner: fertig gestaltete Fläche am Fuß einer Verzeichniszeile.
   Das Bild trägt Titel und Adresse selbst, der Fuß nur Kontext und Affordance. */
.banner {
  display: block;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
  color: inherit;
  text-decoration: none;
}
.banner img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  transition: border-color .2s ease;
}
.banner:hover img { border-color: var(--line); }
.banner:focus-visible img {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.banner-fuss {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.banner-fuss b {
  flex: none;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 400;
  transition: transform .18s ease;
}
.banner:hover .banner-fuss span,
.banner:focus-visible .banner-fuss span {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.banner:hover .banner-fuss b,
.banner:focus-visible .banner-fuss b { transform: translate(3px, -3px); }

@media (max-width: 900px) {
      .directory-row { grid-template-columns: 150px 1fr; }
    .directory-row-group { grid-template-columns: 150px 1fr; }
  .directory { gap: 32px; }
}

@media (max-width: 680px) {
  .wrap { width: min(calc(100% - 32px), var(--wrap)); }
  .hero-scroll { bottom: clamp(20px, 4svh, 40px); }
  .wortmarke {
    width: min(calc(100% - 32px), var(--wrap));
    font-size: calc(min(100vw - 32px, var(--wrap)) / 6.78);
  }
  .section { padding: 68px 0 78px; }
  .intro { padding: 64px 0 4px; }
  .intro-text { font-size: 1rem; }
  .directory { gap: 26px; }
        .directory-row,
  .directory-row-group { grid-template-columns: 1fr; gap: 14px; padding: 26px 20px 30px; }
    .directory-label { margin: 0; color: var(--accent); }
  .banner { margin-top: 26px; padding-top: 26px; }
  .banner-fuss { flex-direction: row; gap: 12px; font-size: 0.75rem; }
      /* Der Fuss bleibt einzeilig, damit das Rot ein schmaler Streifen bleibt
     und keine hohe Flaeche. Dafuer wird die Schrift kleiner. */
  .site-footer { padding: 16px 0; font-size: 0.625rem; letter-spacing: .01em; }
  .footer-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    /* Platz fuer die Werkzeugleiste, die rechts darueber liegt */
    padding-right: 46px;
  }
  .footer-row p, .footer-links button { white-space: nowrap; }
  .footer-links { gap: 12px; }
  /* Der Barrierefreiheits-Knopf steht auf dem Smartphone direkt daneben in
     der Werkzeugleiste. Im Fuss waere er doppelt und sprengt die Zeile. */
  .footer-links button[data-a11y-open] { display: none; }
    /* Auf kleinen Schirmen als Fussleiste statt schwebendem Kasten.
     Der Scroll-Pfeil weicht nach oben aus, solange sie steht. */
  .hinweis {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 18px 16px 16px;
    border-left: 0;
    border-top: 3px solid var(--knall);
  }
  body:has(.hinweis:not([hidden])) .hero-scroll { bottom: 152px; }
  /* Die Werkzeugleiste weicht ueber die Fussleiste aus, solange sie steht */
  body:has(.hinweis:not([hidden])) .wz--unten { bottom: 152px; }
}

/* Der Hochkontrast-Modus soll den roten Fuss nicht stehen lassen */
html[data-a11y-contrast="bw"] .site-footer { color: #fff; background: #000; }
html[data-a11y-contrast="bw"] .footer-links button { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation: none !important;
  }
}

/* Einheitliche, sichtbar ausgeschriebene Webadressen */
.directory-row,
.directory-row-group {
  grid-template-columns: 190px minmax(0, 1fr);
}
.directory-content > p,
.project-entry > p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
}
.project-url {
  display: inline-flex;
  gap: 9px;
  align-items: baseline;
  margin-top: 16px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.project-url b {
  color: var(--accent);
  font-size: 1.0625rem;
  font-weight: 400;
  text-decoration: none;
  transition: transform .18s ease;
}
.project-url:hover b,
.project-url:focus-visible b {
  transform: translate(3px, -3px);
}
.project-entry {
  padding: 30px 0 30px;
}
.project-entry + .project-entry {
  padding-top: 30px;
  border-top: 1px solid var(--line-soft);
}
.project-entry:last-child {
  padding-bottom: 0;
}
.directory-content > .project-entry:first-of-type {
  padding-top: 30px;
}
.project-entry h3 {
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .directory-row,
  .directory-row-group {
    grid-template-columns: 150px minmax(0, 1fr);
  }
}

@media (max-width: 680px) {
  .directory-row,
  .directory-row-group {
    grid-template-columns: 1fr;
  }
}


/* ============================================================================
   Vorhang bis zur Freischaltung am 7. September
   Nach dem Termin kann dieser ganze Block entfernt werden, ebenso das
   Markup in index.html und der Abschnitt in script.js.
   ============================================================================ */
.vorhang {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}
.vorhang[hidden] { display: none; }
/* Werkzeugleiste und Hinweisstreifen ruhen, solange der Vorhang steht */
.vor-start :is(.wz, .hinweis) { display: none; }
.vor-start body { overflow: hidden; }

.vorhang-inhalt {
  width: min(100% - 16px, var(--wrap));
  text-align: left;
}
.vorhang-marke {
  margin: 0 0 28px;
  font-family: "Code Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(min(100vw - 64px, var(--wrap)) / 6.6);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: .92;
  white-space: nowrap;
}
.vorhang-text {
  max-width: 46ch;
  margin: 0 0 40px;
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.vorhang-uhr {
  display: flex;
  gap: clamp(20px, 4vw, 44px);
  margin-bottom: 44px;
}
.vorhang-uhr span { display: grid; gap: 4px; }
.vorhang-uhr b {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--knall);
}
.vorhang-uhr small {
  font-size: 0.75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.vorhang-fuss {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.8125rem;
}
.vorhang-fuss a { text-underline-offset: 4px; }

@media (max-width: 680px) {
  .vorhang { place-items: center start; padding: 20px 16px; }
  .vorhang-marke {
    margin-bottom: 22px;
    font-size: calc(min(100vw - 32px, var(--wrap)) / 6.78);
  }
  .vorhang-text { margin-bottom: 30px; font-size: 1rem; }
  .vorhang-uhr { gap: 18px; margin-bottom: 32px; }
}