/* MemoDoAll - eine Datei, keine externen Requests, keine Webfonts.
   Systemschriften statt Google Fonts: das ist zugleich die Umsetzung des
   harten Checklistenpunkts "Google Fonts lokal einbinden" - hier wird
   ueberhaupt keine Schrift geladen.

   Alle Flaechenwirkungen sind CSS-Verlaeufe, keine Bilder. Damit bleibt die
   Content-Security-Policy bei img-src 'self' und braucht kein data: -
   eine Lockerung weniger. */

:root {
  /* Basis */
  --bg:        #ffffff;
  --bg-soft:   #f4f7f8;
  --bg-tief:   #0d2b3a;          /* dunkle Baender im hellen Modus */
  --bg-card:   #ffffff;
  --text:      #10222d;
  --text-soft: #506575;
  --text-inv:  #eaf2f6;
  --line:      #dde5ea;
  --line-kraeftig: #c3d1da;

  /* Primaer: Blau. Steht fuer den IT-Teil. */
  --blau:      #12617f;
  --blau-dk:   #0c4459;
  --blau-hell: #e7f1f6;

  /* Akzent: Kupfer. Steht fuer den handwerklichen Teil und bricht das
     Blau auf - eine rein blaue Seite wirkt schnell eintoenig.
     Der Ton ist bewusst dunkler als das naheliegende #b4690c: die
     Kicker-Zeile ist fett, aber nur rund 12 Pixel gross und gilt damit
     nicht als "grosse Schrift". #b4690c kam auf Weiss nur auf 4,23:1 und
     haette AA verfehlt. Dieser Wert liegt bei 5,36:1 auf Weiss und
     4,98:1 auf --bg-soft. */
  --kupfer:    #9e5a09;
  --kupfer-dk: #824a07;
  --kupfer-hell: #fcf3e6;

  --schatten:    0 1px 2px rgba(16,34,45,.06), 0 4px 14px rgba(16,34,45,.05);
  --schatten-lg: 0 2px 6px rgba(16,34,45,.08), 0 14px 34px rgba(16,34,45,.10);

  --radius:    12px;
  --radius-sm: 8px;
  --wrap:      70rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0d151a;
    --bg-soft:   #121d24;
    --bg-tief:   #08161e;
    --bg-card:   #16232c;
    --text:      #e7eef3;
    --text-soft: #9db0bd;
    --text-inv:  #e7eef3;
    --line:      #24343e;
    --line-kraeftig: #33474f;

    --blau:      #5cb2d6;
    --blau-dk:   #8acbe6;
    --blau-hell: #0f2f3f;

    --kupfer:    #eda849;
    --kupfer-dk: #f5c17c;
    --kupfer-hell: #2a2013;

    --schatten:    0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.28);
    --schatten-lg: 0 2px 6px rgba(0,0,0,.36), 0 14px 34px rgba(0,0,0,.42);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;

  /* Fuss nach unten druecken. Kurze Seiten - Kontakt, Danke, 404, 500 -
     endeten sonst mitten im Bild, mit einer weissen Flaeche unter dem
     Fussbereich. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
.site-foot { flex-shrink: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

/* .eng begrenzt die LESEBREITE, nicht den Kasten.
   Vorher stand hier schlicht ".eng { max-width: 48rem }". Weil .wrap
   zentriert ist, wurde damit der ganze Kasten schmaler und blieb mittig -
   der linke Textrand sprang also von Abschnitt zu Abschnitt um rund 11rem
   nach innen und wieder zurueck. Nebeneinander gestellt sah das aus, als
   waeren die Abschnitte unterschiedlich ausgerichtet.
   Jetzt bleibt der Kasten auf voller Breite und nur die Textelemente darin
   werden begrenzt. Damit fluchtet jeder Abschnitt links mit Kopf- und
   Fusszeile - lange Fliesstexte bleiben trotzdem lesbar kurz. */
.wrap.eng > h1,
.wrap.eng > h2,
.wrap.eng > h3,
.wrap.eng > p,
.wrap.eng > ul,
.wrap.eng > ol,
.wrap.eng > dl,
.wrap.eng > .note,
.wrap.eng > .meldung,
.wrap.eng > form { max-width: 48rem; }
/* .lead behaelt seine eigene, etwas knappere Breite - sonst wuerde die
   Regel oben sie ueberschreiben und Vorspanntexte saehen von Seite zu
   Seite unterschiedlich aus. */
.wrap.eng > p.lead { max-width: 44rem; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--blau); color: #fff;
  padding: .7rem 1.1rem; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ==========================================================================
   Kopf
   ========================================================================== */

.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 1.75rem; padding-top: .85rem; padding-bottom: .85rem;
}

.brand {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 700; font-size: 1.22rem; letter-spacing: -.015em;
  color: var(--text); text-decoration: none; margin-right: auto;
}
.brand img { width: 34px; height: 34px; display: block; border-radius: 8px; }
/* Die Wortmarke MUSS in einem eigenen Element stehen.
   Reine Textknoten werden in einem Flex-Container zu eigenstaendigen
   Flex-Elementen - "Memo", "Do" und "All" waren damit drei Kaesten, zwischen
   die der gap von .6rem gesetzt wurde. Im Kopf stand dann "Memo Do All". */
.brand .wortmarke { white-space: nowrap; }
.brand .akzent { color: var(--kupfer); }

/* --------------------------------------------------------------------------
   Klappmenue - auf JEDER Breite, nicht nur auf dem Telefon
   --------------------------------------------------------------------------
   Die Menuepunkte stehen nicht mehr offen in der Kopfzeile. Damit bleibt sie
   ueberall einreihig; vorher brauchte sie mit Schriftzug und vier Punkten
   521 Pixel und brach auf jedem Telefon um.

   Umgesetzt ueber ein verstecktes Kontrollkaestchen statt ueber JavaScript.
   Grund: die Seite laeuft mit script-src auf 'none', und in der
   Datenschutzerklaerung steht ausdruecklich, dass sie ohne JavaScript
   auskommt. Ein Menue ist kein Grund, diese Zusage aufzuweichen.
   Das Kaestchen bleibt fokussierbar (nicht display:none), damit sich das
   Menue auch per Tastatur oeffnen laesst. */

.site-head .wrap { position: relative; }

.menue-schalter {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; margin: 0;
}

.menue-knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .85rem; border: 1px solid var(--line-kraeftig);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: .95rem; font-weight: 600; color: var(--text);
  background: var(--bg); user-select: none;
}
.menue-knopf:hover { border-color: var(--blau); color: var(--blau); }

/* Drei Balken aus einem Element plus zwei Pseudoelementen. */
.menue-knopf .balken,
.menue-knopf .balken::before,
.menue-knopf .balken::after {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--blau);
}
.menue-knopf .balken { position: relative; }
.menue-knopf .balken::before,
.menue-knopf .balken::after { content: ""; position: absolute; left: 0; }
.menue-knopf .balken::before { top: -6px; }
.menue-knopf .balken::after  { top:  6px; }

/* Tastaturfokus liegt auf dem unsichtbaren Kaestchen - gezeigt wird er am
   Knopf daneben. */
.menue-schalter:focus-visible + .menue-knopf {
  outline: 2px solid var(--blau); outline-offset: 2px;
}

/* Die Klappliste haengt als Feld unter der Kopfzeile, statt den Inhalt
   nach unten zu schieben. */
.site-head nav {
  display: none;
  position: absolute; top: calc(100% + .5rem); right: 1.5rem;
  min-width: 13rem; z-index: 60;
  flex-direction: column; gap: 0;
  padding: .4rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--schatten-lg);
}
.menue-schalter:checked ~ nav { display: flex; }

.site-head nav a {
  color: var(--text); text-decoration: none; font-size: 1rem;
  font-weight: 500; padding: .62rem .8rem; border-radius: var(--radius-sm);
}
.site-head nav a:hover { background: var(--blau-hell); color: var(--blau); }
.site-head nav a[aria-current="page"] {
  background: var(--blau-hell); font-weight: 650;
  box-shadow: inset 3px 0 0 var(--kupfer);
}

/* Auf sehr schmalen Schirmen ueber die volle Breite. */
@media (max-width: 30rem) {
  .site-head nav { left: 1.5rem; right: 1.5rem; }
}

/* Auf schmalen Schirmen etwas kompakter. Die Kopfzeile bleibt dank
   Klappmenue in jedem Fall einreihig. */
@media (max-width: 46rem) {
  .site-head .wrap { padding-top: .55rem; padding-bottom: .55rem; }
  .brand { font-size: 1.1rem; gap: .5rem; }
  .brand img { width: 28px; height: 28px; }
  .menue-knopf { padding: .45rem .7rem; font-size: .92rem; }
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */

section { padding: 3.75rem 0; }
.soft   { background: var(--bg-soft); border-block: 1px solid var(--line); }

/* Dunkles Band - bricht die Seite auf, damit sie nicht als eine einzige
   helle Flaeche durchlaeuft. */
.tief {
  background:
    radial-gradient(60rem 26rem at 82% -10%, rgba(226,149,47,.20), transparent 60%),
    linear-gradient(150deg, #124a63 0%, var(--bg-tief) 70%);
  color: var(--text-inv);
  border: 0;
}
.tief h2 { color: #fff; }
.tief p  { color: #c9dbe4; }
.tief .lead { color: #d6e5ec; }
.tief a:not(.btn) { color: #ffd79a; }

/* ==========================================================================
   Typografie
   ========================================================================== */

h1 {
  font-size: clamp(2.05rem, 5.2vw, 3rem); line-height: 1.14;
  letter-spacing: -.028em; margin: 0 0 1rem; font-weight: 700;
}
h2 {
  font-size: clamp(1.45rem, 3.3vw, 1.95rem); line-height: 1.24;
  letter-spacing: -.02em; margin: 0 0 1.1rem; font-weight: 700;
}
h3 { font-size: 1.1rem; margin: 0 0 .5rem; font-weight: 650; letter-spacing: -.01em; }
p  { margin: 0 0 1.05rem; }

.kicker {
  display: inline-block; font-size: .77rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--kupfer); margin-bottom: .85rem;
}
.tief .kicker { color: #f2bd77; }

.lead { font-size: 1.14rem; color: var(--text-soft); max-width: 44rem; line-height: 1.62; }
.muted { color: var(--text-soft); }
.small { font-size: .9rem; }

a { color: var(--blau); text-underline-offset: .18em; }
a:hover { color: var(--blau-dk); }

/* Akzentlinie unter Abschnittsueberschriften */
.mit-linie { position: relative; padding-bottom: .9rem; }
.mit-linie::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 2.75rem; height: 3px; border-radius: 2px;
  background: var(--kupfer);
}

/* ==========================================================================
   Startbereich
   ========================================================================== */

.hero {
  background:
    radial-gradient(48rem 30rem at 88% -20%, var(--kupfer-hell), transparent 62%),
    linear-gradient(170deg, var(--blau-hell) 0%, var(--bg) 58%);
  padding: 4.75rem 0 4.25rem;
  border-bottom: 1px solid var(--line);
}
/* 28ch statt enger: der lange Titel der Startseite bricht damit auf zwei
   ausgewogene Zeilen, die kurzen Titel der Unterseiten bleiben einzeilig.
   Bei 20ch hing bei "Wer hinter MemoDoAll steckt" ein einzelnes Wort in
   der zweiten Zeile. */
.hero h1 { max-width: 28ch; }
.hero .lead { font-size: 1.2rem; }

/* ==========================================================================
   Karten
   ========================================================================== */

.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }

/* Vier Karten ergaeben bei drei Spalten eine Reihe zu dritt und eine
   einzelne Waise darunter. Ab der Breite, ab der ueberhaupt mehrere Spalten
   passen, deshalb feste zwei Spalten - das gibt ein sauberes 2x2. */
@media (min-width: 60rem) {
  .cards.paare { grid-template-columns: repeat(2, 1fr); }
}

.card {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--schatten);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--blau), var(--kupfer));
  opacity: 0; transition: opacity .18s ease;
}
.card:hover { box-shadow: var(--schatten-lg); transform: translateY(-2px); border-color: var(--line-kraeftig); }
.card:hover::before { opacity: 1; }
.card h3 { color: var(--blau); }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card ul { margin: 0; padding-left: 1.15rem; }
.card li { margin-bottom: .35rem; }
.card li::marker { color: var(--kupfer); }

.tief .card {
  background: rgba(255,255,255,.055);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}
.tief .card h3 { color: #ffd79a; }
.tief .card p  { color: #c9dbe4; }

@media (prefers-reduced-motion: reduce) {
  .card, .card::before { transition: none; }
  .card:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Schaltflaechen
   ========================================================================== */

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.75rem; }
.btn {
  display: inline-block; padding: .78rem 1.5rem; border-radius: var(--radius-sm);
  background: var(--blau); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 1rem; font-family: inherit;
  border: 1px solid var(--blau); cursor: pointer;
  box-shadow: var(--schatten);
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { background: var(--blau-dk); border-color: var(--blau-dk); color: #fff; transform: translateY(-1px); }
.btn-kupfer { background: var(--kupfer); border-color: var(--kupfer); }
.btn-kupfer:hover { background: var(--kupfer-dk); border-color: var(--kupfer-dk); }
.btn-ghost {
  background: transparent; color: var(--blau); box-shadow: none;
  border-color: var(--line-kraeftig);
}
.btn-ghost:hover { background: var(--blau-hell); color: var(--blau-dk); border-color: var(--blau); }
.tief .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.tief .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; border-color: #fff; }

/* Im Dunkelmodus sind --blau und --kupfer HELLE Toene. Weisser Text darauf
   kam auf 2,39:1 bzw. 2,04:1 - weit unter den geforderten 4,5:1 und auf dem
   Telefon kaum zu lesen. Dunkler Text auf der hellen Flaeche dreht das um:
   7,69:1 und 9,0:1. Gemessen, nicht geschaetzt. */
@media (prefers-color-scheme: dark) {
  .btn { color: #08161e; }
  .btn:hover { color: #08161e; }
  .btn-ghost, .btn-ghost:hover { color: var(--blau); background: transparent; }
  .btn-ghost:hover { background: var(--blau-hell); }
  .tief .btn-ghost, .tief .btn-ghost:hover { color: #fff; }
}

@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ==========================================================================
   Hinweiskasten
   ========================================================================== */

.note {
  background: var(--kupfer-hell);
  border: 1px solid var(--line);
  border-left: 4px solid var(--kupfer);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem; margin: 1.6rem 0;
}
.note p:last-child { margin-bottom: 0; }
.note strong { color: var(--text); }

/* ==========================================================================
   Definitionslisten
   ========================================================================== */

.dl { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.75rem; margin: 0 0 1.4rem; }
.dl dt { color: var(--text-soft); font-size: .95rem; }
.dl dd { margin: 0; }
@media (max-width: 34rem) {
  .dl { grid-template-columns: 1fr; gap: 0; }
  .dl dt { margin-top: .8rem; font-size: .86rem; font-weight: 600; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

/* Aufklappbare Fragen ueber <details>/<summary>.
   Native Elemente statt JavaScript: das Auf- und Zuklappen macht der Browser
   selbst, es ist per Tastatur bedienbar und Screenreader melden den Zustand
   von sich aus. Damit bleibt script-src auf 'none'. */
.faq { border-top: 1px solid var(--line); max-width: 52rem; }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer; position: relative;
  padding: 1.05rem 2.5rem 1.05rem 0;
  list-style: none;                 /* Standarddreieck weg */
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary h3 { display: inline; margin: 0; font-size: 1.05rem; }
.faq summary:hover h3 { color: var(--blau); }
.faq summary:focus-visible { outline: 2px solid var(--blau); outline-offset: -2px; border-radius: 4px; }

/* Pfeil rechts, dreht sich beim Aufklappen. */
.faq summary::after {
  content: ""; position: absolute; right: .6rem; top: 1.5rem;
  width: .6rem; height: .6rem;
  border-right: 2px solid var(--kupfer);
  border-bottom: 2px solid var(--kupfer);
  transform: rotate(45deg); transform-origin: center;
  transition: transform .18s ease, top .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }

.faq details > p { margin: 0 0 1.2rem; color: var(--text-soft); padding-right: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .faq summary::after { transition: none; }
}

/* ==========================================================================
   Formular
   ========================================================================== */

form.kontakt { max-width: 35rem; }
.feld { margin-bottom: 1.2rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .96rem; }
.feld .hint { display: block; font-weight: 400; color: var(--text-soft); font-size: .86rem; margin: -.1rem 0 .4rem; }
.feld input, .feld textarea, .feld select {
  width: 100%; padding: .68rem .8rem; font: inherit; font-size: 1rem;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--line-kraeftig); border-radius: var(--radius-sm);
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau);
}
.feld textarea { min-height: 9.5rem; resize: vertical; }
.feld-fehler input, .feld-fehler textarea, .feld-fehler select { border-color: #b4231f; }
.fehlertext { color: #b4231f; font-size: .88rem; margin-top: .35rem; }
.pflicht { color: #b4231f; }
@media (prefers-color-scheme: dark) {
  .fehlertext, .pflicht { color: #ff9d99; }
  .feld-fehler input, .feld-fehler textarea, .feld-fehler select { border-color: #ff9d99; }
}

/* Honeypot: fuer Menschen unsichtbar, fuer simple Bots ein ausfuellbares Feld.
   Bewusst kein reCAPTCHA - das waere ein Drittanbieter-Request und damit
   genau der Datenschutzfehler, den die Pre-Launch-Checkliste anmahnt. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  border-radius: var(--radius-sm); padding: 1.05rem 1.3rem; margin-bottom: 1.6rem;
  border: 1px solid var(--line); border-left: 4px solid var(--kupfer);
  background: var(--kupfer-hell);
}
.meldung.ok { border-left-color: var(--blau); background: var(--blau-hell); }
.meldung p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Fuss
   ========================================================================== */

.site-foot {
  border-top: 1px solid var(--line); background: var(--bg-soft);
  padding: 2.75rem 0 2rem; font-size: .94rem;
}
.site-foot .cols { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-foot h3 {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-soft); margin-bottom: .65rem; font-weight: 700;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .15rem; }
/* Tippziel-Mindestgroesse (WCAG 2.2, 2.5.8: 24x24 CSS-Pixel).
   Als reine Inline-Links waren die Fusszeilen-Eintraege nur 20 Pixel hoch -
   gemessen, nicht geschaetzt. Mit inline-block und Polsterung sind es 26.
   Die Ausnahme fuer Links mitten im Fliesstext greift hier nicht: das ist
   eine Linkliste, kein Satz. */
.site-foot li a { display: inline-block; padding: .2rem 0; }
.site-foot a { color: var(--text); text-decoration: none; }
.site-foot a:hover { color: var(--blau); text-decoration: underline; }
.site-foot .unten {
  margin-top: 2rem; padding-top: 1.35rem; border-top: 1px solid var(--line);
  color: var(--text-soft); font-size: .87rem;
}

/* ==========================================================================
   Fehlerseiten
   ========================================================================== */

.zentriert { text-align: center; padding: 5.5rem 0; }
.zentriert .lead { margin-left: auto; margin-right: auto; }
.zentriert .code {
  font-size: 4.5rem; font-weight: 800; line-height: 1; margin: 0 0 .6rem;
  letter-spacing: -.04em;
  background: linear-gradient(120deg, var(--blau), var(--kupfer));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zentriert .btn-row { justify-content: center; }

/* Abstand nach einem Kartenblock, bevor wieder Fliesstext kommt. */
.abstand-oben { margin-top: 3rem; }