/*
 * Startseite des Instituts fuer Gute Laune
 * Gestaltungssystem "Weisse Wand, bunte Menschen" (siehe DESIGN.md).
 *
 * Gehoert zu:  template-startseite.php  und  parts/startseite.php
 * Erzeugt aus: Startseite-Neu/startseite-weisse-wand.html
 *
 * Die Schriften liegen daneben in fonts/ und werden von hier geladen.
 * Es wird nichts von einer fremden Adresse geholt - das muss so bleiben.
 */
/* ---------- Schriften ----------
     Liegen selbst auf dem Server. Kein Abruf bei Google, also nichts,
     wofuer eine Einwilligung noetig waere. Lizenz: SIL Open Font License 1.1,
     siehe schriften/LIZENZ.txt. */
  @font-face {
    font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(fonts/karla-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url(fonts/karla-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap;
    src: url(fonts/karla-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap;
    src: url(fonts/karla-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: 'Faustina'; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url(fonts/faustina-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: 'Faustina'; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url(fonts/faustina-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  :root {
    --blau:        #202a8c;
    --blau-tief:   #171f6b;
    --pink:        #e0479b;
    --weiss:       #ffffff;
    --tinte:       #201e1d;
    --tinte-leise: #6b6257;
    --linie:       rgba(32, 42, 140, 0.18);

    --font: 'Karla', 'Helvetica Neue', Arial, sans-serif;
    /* Titelschrift: traegt alle grossen blauen Ueberschriften. Karla bleibt Lesetext. */
    --font-titel: 'Faustina', Georgia, serif;

    --size-hero: clamp(2.25rem, 1.35rem + 3.5vw, 3.75rem);
    --size-h1:   clamp(1.75rem, 1.35rem + 2.6vw, 2.75rem);
    --size-h2:   clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem);
    --size-lead: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
    --size-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
    --size-small: 0.9375rem;
    --size-caption: 0.875rem;

    --breite: 1120px;
    --rand: 24px;
  }

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

  html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--blau) var(--weiss); }

  body {
    margin: 0;
    background: var(--weiss);
    color: var(--tinte);
    font-family: var(--font);
    font-size: var(--size-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    caret-color: var(--pink);
  }

  ::selection { background: var(--blau); color: var(--weiss); }

  img { display: block; max-width: 100%; height: auto; border-radius: 0; }

  a { color: var(--blau); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; transition: color .15s ease; }
  a:hover { color: var(--pink); }
  a:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

  .huelle { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

  /* ---------- Kopf ---------- */
  .kopf {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 12px 32px;
    padding-block: 24px 0;
  }
  /* Wortmarke ist das runde Logo. Einzige Rundung der Seite: sie ist im Zeichen selbst,
     nicht im Rahmen - die Ecken-Regel bleibt unberuehrt. */
  .marke { display: block; line-height: 0; text-decoration: none; }
  .marke img { width: 78px; height: auto; transition: opacity .15s ease; }
  .marke:hover img { opacity: 0.72; }
  .marke:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
  .navi { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--size-small); }
  .navi a { text-decoration: none; }

  /* ---------- Aushang ----------
     Der Platz fuer kurzfristige Nachrichten: "Kuchenkonzert heute",
     "Kreativer Montag faellt aus". Steht vor allem anderen, damit man ihn
     nicht uebersehen kann.

     Kein farbiger Kasten - das waere gegen die Regel, dass Farbe nur in den
     Bildern vorkommt. Stattdessen eine pinke Linie und ein pinkes Woertchen
     darueber. Das reicht, weil sonst nirgends auf der Seite Pink vorkommt.

     Ist nichts eingetragen, erscheint hier gar nichts - kein leerer Kasten,
     kein Abstand. */
  .aushang { margin-top: 28px; padding-top: 18px; border-top: 2px solid var(--pink); }
  .aushang-marke {
    display: block; margin: 0 0 6px;
    font-family: var(--font); font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--pink);
  }
  /* Was der Editor liefert, faengt hier ein. Die Ueberschrift bekommt die
     Titelschrift, damit sie zur Seite gehoert und nicht wie ein Fremdkoerper
     aussieht. */
  .aushang h1, .aushang h2, .aushang h3, .aushang h4 {
    font-family: var(--font-titel);
    font-size: var(--size-h2); font-weight: 600; line-height: 1.16;
    letter-spacing: -0.005em; color: var(--blau);
    margin: 0 0 8px; max-width: 26ch; text-wrap: balance;
  }
  .aushang p { margin: 0 0 10px; max-width: 54ch; }
  .aushang > *:last-child { margin-bottom: 0; }
  .aushang figure { margin: 14px 0 0; }
  .aushang figcaption { font-size: var(--size-caption); line-height: 1.45; color: var(--tinte-leise); margin-top: 8px; max-width: 50ch; }
  /* Ein Bild im Aushang darf die Hauptueberschrift nicht erdruecken. */
  .aushang img { width: auto; max-width: min(100%, 520px); height: auto; }
  .aushang ul, .aushang ol { margin: 0 0 10px; padding-left: 1.2em; max-width: 54ch; }
  .aushang-ende { margin-top: 18px; border-top: 1px solid var(--linie); }

  /* ---------- Anschlag ---------- */
  .anschlag { padding-top: 44px; }
  .anschlag h1 {
    font-family: var(--font-titel);
    font-size: var(--size-hero);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.005em;
    color: var(--blau);
    max-width: 17ch;
    margin: 0;
    text-wrap: balance;
  }
  .einleitung { margin-top: 72px; }
  .einleitung h2.anschlag-zweit {
    font-family: var(--font-titel);
    font-size: var(--size-hero);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.005em;
    color: var(--blau);
    max-width: 17ch;
    margin: 0 0 20px;
    text-wrap: balance;
  }
  .vorspann { font-size: var(--size-lead); line-height: 1.55; max-width: 54ch; margin: 0; text-wrap: pretty; }

  /* ---------- Bildtafel ---------- */
  figure { margin: 0; }
  .tafel { margin-top: 36px; }
  .tafel img { width: 100%; }
  /* Die erste Tafel wird auf Bandformat beschnitten, damit Termin und Knopf
     auf einem gewöhnlichen Laptop noch in Reichweite bleiben. */
  /* Das Montags-Foto ist in der Datei selbst beschnitten (879x615), nicht per CSS.
     Deshalb hier kein object-fit und keine Hoehenbegrenzung mehr. */
  .tafel--anschlag img { width: 100%; height: auto; }
  /* Das Gemaelde wird nie beschnitten - es ist ein Werk, kein Illustrationsfoto. */
  .tafel--gemaelde { margin-top: 44px; }
  .tafel--gemaelde img { width: 100%; height: auto; }
  .tafel figcaption { font-size: var(--size-caption); line-height: 1.45; color: var(--tinte-leise); max-width: 50ch; margin-top: 10px; }

  /* ---------- Knopf ---------- */
  .knopf {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0.75em 1.6em;
    background: var(--blau); color: var(--weiss);
    font-family: var(--font); font-weight: 700; font-size: 1.0625rem; line-height: 1.3;
    border: none; border-radius: 0; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease;
  }
  .knopf:hover { background: var(--blau-tief); color: var(--weiss); }
  .knopf:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

  /* Die Montags-Tafel ist anklickbar und fuehrt zum Kreativen Montag. */
  .tafel-link { display: block; line-height: 0; transition: opacity .15s ease; }
  .tafel-link:hover { opacity: .9; }
  .tafel-link:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

  /* ---------- Hängung ---------- */
  .haengung { margin-top: 104px; }
  .haengung > h2 {
    font-family: var(--font-titel);
    font-size: var(--size-h1); font-weight: 600; line-height: 1.14; letter-spacing: -0.005em;
    color: var(--blau); margin: 0 0 8px; max-width: 24ch;
  }
  .haengung > .hinweis { color: var(--tinte-leise); margin: 0 0 36px; max-width: 60ch; }
  /* Forschungs-Block: gleiche Gestalt wie die Haengung, aber ohne Liste. */
  .forschung > .hinweis { margin-bottom: 0; }
  .tafel--denkzettel { margin-top: 36px; }
  .tafel--revolution { margin-top: 36px; }
  .tafel--revolution img { width: 100%; max-width: 836px; height: auto; }
  .tafel--denkzettel img { width: 100%; height: auto; }

  /* Arbeitsfelder: pro Zeile ein Feld. Links die Aussage, rechts der Beleg.
     Keine Kaesten - getrennt durch Haarlinien wie die Haengung. */
  .felder-liste { list-style: none; margin: 0 0 28px; padding: 0; }
  .feld {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 20px 44px; align-items: start;
    padding-top: 30px; padding-bottom: 30px;
    border-top: 1px solid var(--linie);
  }
  .felder-liste .feld:last-child { border-bottom: 1px solid var(--linie); }
  .feld-text h3 {
    font-family: var(--font-titel);
    font-size: var(--size-h2); font-weight: 600; line-height: 1.16; letter-spacing: -0.005em;
    color: var(--blau); margin: 0 0 10px; max-width: 22ch; text-wrap: balance;
  }
  .feld-text p { margin: 0; color: var(--tinte-leise); max-width: 46ch; }

  /* Die einzige fremde Stimme auf der Seite. Kein Kasten, kein Balken -
     sie hebt sich durch Kursive und Farbe ab. */
  .stimme { margin: 18px 0 0; padding: 0; max-width: 40ch; }
  .stimme p { font-style: italic; color: var(--tinte); margin: 0; }
  .stimme footer { margin-top: 4px; font-size: var(--size-small); color: var(--tinte-leise); }
  .feld-bilder { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .feld-bilder--zwei { grid-template-columns: 1fr 1fr; }
  .feld-bilder a { display: block; line-height: 0; }
  .feld-bilder img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity .15s ease; }
  .feld-bilder a:hover img { opacity: .88; }
  /* Die Methoden-Tafel ist ein Querformat und wird nicht beschnitten. */
  .feld-bilder img[width="1200"] { aspect-ratio: auto; }

  @media (max-width: 760px) {
    .feld { grid-template-columns: 1fr; gap: 14px; padding-top: 26px; padding-bottom: 26px; }
    .feld-bilder { order: -1; }
  }

  .liste { list-style: none; margin: 0; padding: 0; }
  .zeile {
    position: relative;
    display: grid; grid-template-columns: minmax(11rem, 22%) 1fr;
    gap: 4px 40px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .zeile::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
    background: var(--linie);
    transform: scaleX(0); transform-origin: left center;
    animation: haengen .55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  .liste .zeile:nth-child(1)::before { animation-delay: .05s; }
  .liste .zeile:nth-child(2)::before { animation-delay: .11s; }
  .liste .zeile:nth-child(3)::before { animation-delay: .17s; }
  .liste .zeile:nth-child(4)::before { animation-delay: .23s; }
  .liste .zeile:nth-child(5)::before { animation-delay: .29s; }
  .liste .zeile:nth-child(6)::before { animation-delay: .35s; }
  .liste .zeile:nth-child(7)::before { animation-delay: .41s; }
  .liste .zeile:nth-child(8)::before { animation-delay: .47s; }
  .liste .zeile:nth-child(9)::before { animation-delay: .53s; }
  .liste .zeile:last-child { border-bottom: 1px solid var(--linie); }

  @keyframes haengen { to { transform: scaleX(1); } }

  .alles { margin: 0; color: var(--tinte-leise); max-width: 62ch; }
  .alles a { font-weight: 700; }

  .zeile-name { font-weight: 700; margin: 0; }
  .zeile-name a { text-decoration: none; }
  .zeile-text { margin: 0; color: var(--tinte); max-width: 60ch; }
  .zeile-dazu { color: var(--tinte-leise); }

  /* ---------- Glaubenssatz ---------- */
  .satz { margin-top: 104px; }
  .satz p {
    font-family: var(--font-titel);
    font-size: var(--size-h2); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em;
    color: var(--blau); max-width: 26ch; margin: 0 0 20px;
    text-wrap: balance;
  }
  .satz .dazu { font-family: var(--font); font-size: var(--size-body); font-weight: 400; color: var(--tinte); max-width: 54ch; letter-spacing: 0; }

  /* ---------- Schluss ---------- */
  .schluss { margin-top: 104px; padding-top: 40px; border-top: 1px solid var(--linie); }
  .schluss h2 { font-family: var(--font-titel); font-size: var(--size-h1); font-weight: 600; line-height: 1.14; letter-spacing: -0.005em; color: var(--blau); margin: 0 0 12px; max-width: 24ch; }
  .schluss p { max-width: 54ch; margin: 0 0 24px; }

  /* ---------- Fuß ---------- */
  .schluss { margin-top: 104px; padding-top: 40px; border-top: 1px solid var(--linie); }
  .schluss h2 { font-family: var(--font-titel); font-size: var(--size-h1); font-weight: 600; line-height: 1.14; letter-spacing: -0.005em; color: var(--blau); margin: 0 0 12px; max-width: 24ch; }
  .schluss p { max-width: 54ch; margin: 0 0 24px; }
  .schluss .daneben { margin: 32px 0 0; color: var(--tinte-leise); font-size: var(--size-small); max-width: 60ch; }

  /* Formular: keine Kaesten, keine Rundungen. Die Felder sind Linien,
     auf denen man schreibt - wie auf Papier. */
  .formular { margin-top: 28px; max-width: 54ch; }
  .formular label { display: block; font-size: var(--size-small); font-weight: 700; color: var(--blau); margin-bottom: 6px; }
  .formular textarea,
  .formular input[type="text"],
  .formular input[type="email"] {
    display: block; width: 100%;
    font-family: var(--font); font-size: var(--size-body); line-height: 1.5; color: var(--tinte);
    background: var(--weiss);
    border: 1px solid var(--linie); border-radius: 0;
    padding: 10px 12px;
    transition: border-color .15s ease;
  }
  .formular textarea { resize: vertical; min-height: 8em; }
  .formular textarea::placeholder,
  .formular input::placeholder { color: var(--tinte-leise); opacity: .7; }
  .formular textarea:focus,
  .formular input:focus { outline: none; border-color: var(--blau); }
  .formular textarea:focus-visible,
  .formular input:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

  .formular .beispiel { font-size: var(--size-caption); line-height: 1.5; color: var(--tinte-leise); margin: 8px 0 0; }

  /* Solange kein Formular eingerichtet ist, steht der Beispielsatz allein
     unter der Frage - nicht unter einem Eingabefeld. Dann traegt er mehr
     Gewicht und darf etwas groesser sein. */
  .beispiel--allein { font-size: var(--size-body); line-height: 1.6; color: var(--tinte-leise); max-width: 54ch; margin: 0 0 24px; }

  .formular .felder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }

  .zustimmung { display: flex; gap: 10px; align-items: start; margin-top: 24px; font-weight: 400; color: var(--tinte-leise); font-size: var(--size-small); }
  .zustimmung input { margin-top: .25em; accent-color: var(--blau); flex-shrink: 0; }
  .zustimmung span { font-weight: 400; }

  .formular .knopf { margin-top: 24px; }

  @media (max-width: 560px) {
    .formular .felder { grid-template-columns: 1fr; gap: 16px; }
  }

  .fuss { margin-top: 88px; padding-block: 28px 56px; border-top: 1px solid var(--linie); }
  .fuss-inhalt {
    display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between;
    font-size: var(--size-small); color: var(--tinte-leise);
  }
  .fuss-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
  .fuss a { text-decoration: none; }

  @media (max-width: 900px) {
    .kacheln { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 640px) {
    .zeile { grid-template-columns: 1fr; gap: 2px; }
    .anschlag { padding-block: 48px 0; }
    .haengung, .satz, .schluss { margin-top: 72px; }
    .kacheln { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; margin-bottom: 56px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .zeile::before { transform: scaleX(1); }
  }