/* ---------------------------------------------------------------------------
   Schriften. Selbst gehostet - kein Google, kein fremder Server, damit die
   Seite ohne Einwilligungsbanner auskommt.

   Atkinson Hyperlegible wurde am Braille Institute fuer Menschen mit
   eingeschraenktem Sehen entworfen: Zeichen, die sich sonst aehneln (I l 1,
   O 0, a o), sind bewusst verschieden geformt. Diese Seite lesen Menschen
   zwischen fuenfzig und siebzig, oft abends, oft am Telefon. Und es ist
   dieselbe Schrift wie in den Buechern.
   SIL Open Font License - siehe schriften/LICENSE-atkinson.txt
   --------------------------------------------------------------------------- */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;
  font-display:swap;src:url("schriften/atkinson-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;
  font-display:swap;src:url("schriften/atkinson-700.woff2") format("woff2")}

:root{
  /* Die Farben der Buchumschlaege - aber anders verteilt. Das satte Creme
     traegt hier nicht mehr die ganze Flaeche, sondern nur die eingelassenen
     Kaesten; gelesen wird auf hellerem Papier. */
  --papier:#FCF8F0;
  --sand:#F1E6CC;
  --tinte:#1C2A20;
  --tann:#1E3D2B;
  --moos:#4A7357;
  --ocker:#B86A12;
  --linie:#E0D6BE;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Charter,Georgia,serif;
  --sans:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --mass:33rem;          /* Satzbreite: rund 68 Zeichen */
  --breit:36rem;
  /* Nur fuer Bildstrecken und das Kartenraster. Fliesstext bleibt schmal -
     eine 54rem breite Textzeile liest niemand gern, ein 54rem breites
     Kartenraster schon. */
  --weit:54rem;
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:clamp(1.06rem,.98rem + .38vw,1.19rem);
  line-height:1.68;
  text-rendering:optimizeLegibility;
}

/* Nur der Tastaturfokus wird sichtbar, nicht jeder Mausklick. */
:focus-visible{outline:3px solid var(--ocker);outline-offset:3px;border-radius:2px}

.springen{position:absolute;left:-9999px;top:0}
.springen:focus{left:.5rem;top:.5rem;z-index:9;background:var(--tann);color:var(--papier);
  padding:.6rem .9rem;border-radius:4px;text-decoration:none}

.bahn{width:100%;max-width:var(--breit);margin:0 auto;padding:0 1.35rem}
.satzbreite{max-width:var(--mass)}

/* --- Kopf: nur die Marke. Oben stehen keine Verkaufsknoepfe. --------------- */
.kopf{border-bottom:1px solid var(--linie);padding:1.15rem 0}
.marke{font-family:var(--serif);font-size:1.02rem;letter-spacing:.06em;color:var(--tann);
  text-decoration:none;display:inline-block}
.marke .punkt{color:var(--ocker);padding:0 .15em}

main{padding:0 0 1rem}

/* --- Titel ---------------------------------------------------------------- */
h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.05rem,1.45rem + 3vw,3.3rem);
  line-height:1.12;
  letter-spacing:-.012em;
  color:var(--tann);
  margin:2.9rem 0 0;
  max-width:var(--mass);
}
.strich{width:3.4rem;height:2px;background:var(--ocker);margin:1.5rem 0 1.6rem}

.anriss{
  font-size:clamp(1.18rem,1.02rem + .7vw,1.42rem);
  line-height:1.52;
  /* War Moosgruen und wirkte dadurch schwaecher als der Fliesstext darunter -
     der Einstieg darf nicht aussehen wie eine Randnotiz. */
  color:var(--tinte);
  max-width:var(--mass);
  margin:0 0 1.9rem;
}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.48rem,1.25rem + 1.1vw,2.02rem);
  line-height:1.22;
  color:var(--tann);
  margin:3.4rem 0 .9rem;
  max-width:var(--mass);
}

h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.22rem,1.12rem + .45vw,1.4rem);
  line-height:1.3;
  color:var(--tann);
  margin:2.8rem 0 .7rem;
  max-width:var(--mass);
}
h3:first-of-type{margin-top:2.4rem}

p{margin:0 0 1.15rem;max-width:var(--mass)}
.fussnote{margin-top:1.7rem;font-size:.97rem;color:var(--moos)}
strong{font-weight:700;color:var(--tann)}
a{color:var(--moos);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ocker)}

/* --- Der Leitsatz: das Einzige, was auf dieser Seite laut sein darf -------- */
.leitsatz{
  font-family:var(--serif);
  font-size:clamp(1.3rem,1.08rem + .95vw,1.72rem);
  line-height:1.38;
  color:var(--tann);
  border-left:3px solid var(--ocker);
  padding:.15rem 0 .15rem 1.25rem;
  margin:2.2rem 0 3rem;
  max-width:var(--mass);
}

/* --- Die Leiter ----------------------------------------------------------
   Vier Stufen, die nacheinander weniger verlangen. Die Einrueckung waechst
   mit jeder Stufe - die Frage wird enger, und das Layout sagt dasselbe.
   Die senkrechte Linie ist die Holme der Leiter und laeuft durch, auch durch
   die Pause hindurch.
   -------------------------------------------------------------------------- */
.leiter{margin:0 0 1rem;max-width:var(--breit)}

.stufe{
  border-left:1px solid var(--linie);
  padding:.1rem 0 1.9rem 1.5rem;
  position:relative;
}
/* Der Versatz muss GROSS sein. Mit .75rem (zwoelf Pixel) standen vier fast
   parallele Linien nebeneinander - das liest das Auge als schiefe Ausrichtung,
   nicht als Treppe. Erst ab etwa 2rem je Stufe wird der Absatz absichtsvoll. */
.stufe--2{margin-left:1.5rem}
.stufe--3{margin-left:3rem}
.stufe--4{margin-left:4.5rem}

.stufe .zahl{
  display:block;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ocker);
  margin-bottom:.3rem;
}
.stufe .was{
  display:block;
  font-family:var(--serif);
  font-size:1.24rem;
  line-height:1.3;
  color:var(--tann);
  margin-bottom:.7rem;
}
.stufe .satz{
  font-family:var(--serif);
  font-size:clamp(1.12rem,1rem + .55vw,1.34rem);
  line-height:1.46;
  font-style:italic;
  color:var(--tinte);
  margin:0;
  max-width:30rem;
}
.stufe .weiter{
  font-size:.97rem;
  color:var(--moos);
  margin:.85rem 0 0;
}

/* --- Die Pause -----------------------------------------------------------
   Hier steht mit Absicht nichts. Der wichtigste Rat auf dieser Seite ist
   "fuenf Sekunden warten - laenger, als man denkt", und ein Satz darueber
   waere nur eine Behauptung. Diese Seite laesst warten.
   -------------------------------------------------------------------------- */
.pause{
  /* GEPUNKTET, nicht durchgezogen: Die Pause ist keine Stufe. Mit derselben
     Linie und derselben Einrueckung wie Stufe zwei sah sie aus wie eine. */
  border-left:1px dotted var(--linie);
  margin-left:1rem;
  padding:0 0 2.6rem 1.5rem;
  min-height:11.5rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.pause .zaehlt{
  font-family:var(--serif);
  font-size:clamp(1.24rem,1.05rem + .8vw,1.6rem);
  color:var(--tann);
  margin:0 0 .2rem;
}
.pause .dazu{font-size:.97rem;color:var(--moos);margin:0}

/* --- Eingelassene Kaesten ------------------------------------------------- */
.merk{
  background:var(--tann);
  color:#EFE6CF;
  padding:1.45rem 1.5rem;
  border-radius:3px;
  margin:2.6rem 0;
  max-width:var(--mass);
}
.merk p{margin:0;max-width:none}
.merk strong{color:#fff}

.notiz{
  background:var(--sand);
  padding:1.25rem 1.4rem;
  border-radius:3px;
  margin:2.2rem 0;
  max-width:var(--mass);
}
.notiz p{margin:0;max-width:none}

/* --- Die zehn Saetze ------------------------------------------------------
   Kein Rang, keine Reihenfolge - deshalb keine Nummern, sondern nur Linien.
   -------------------------------------------------------------------------- */
.saetze{list-style:none;padding:0;margin:1.4rem 0 0;max-width:var(--mass)}
.saetze li{
  font-family:var(--serif);
  font-size:clamp(1.1rem,.98rem + .5vw,1.28rem);
  line-height:1.42;
  color:var(--tann);
  padding:.82rem 0;
  border-top:1px solid var(--linie);
}
.saetze li:last-child{border-bottom:1px solid var(--linie)}
.saetze em{
  display:block;
  font-family:var(--sans);
  font-style:normal;
  font-size:.9rem;
  color:var(--moos);
  margin-top:.2rem;
}

/* --- Die Buecher: ein Angebot, kein Schaufenster -------------------------- */
.angebot{margin:4.2rem 0 0;padding-top:2.4rem;border-top:2px solid var(--linie)}
.angebot h2{margin-top:0}

.baende{list-style:none;padding:0;margin:1.8rem 0 0;max-width:var(--breit)}
.baende li{padding:1.5rem 0;border-top:1px solid var(--linie)}
.baende li:first-child{border-top:0;padding-top:.4rem}
.baende .titel{
  font-family:var(--serif);
  font-size:1.22rem;
  line-height:1.28;
  color:var(--tann);
  display:block;
}
.baende .pruefung{
  display:inline-block;font-family:var(--sans);font-size:.7rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ocker);
  border:1px solid var(--ocker);border-radius:2px;padding:.05rem .4rem;
  margin-left:.5rem;vertical-align:.16em;
}
.baende .was{display:block;font-size:.99rem;color:var(--moos);margin:.4rem 0 0;max-width:var(--mass)}

/* Der Knopf fuehrt ueber eine eigene Adresse (zu/...), damit der Klick im
   Server-Log steht. Kein Cookie, kein Zaehlpixel, kein fremder Dienst. */
.zu{
  display:inline-block;
  margin-top:.9rem;
  min-height:2.9rem;
  background:var(--tann);
  color:#F6EFDD;
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:700;
  text-decoration:none;
  padding:.72rem 1.25rem;
  border-radius:3px;
}
.zu:hover{background:var(--moos);color:#fff}
.zu .preis{font-weight:400;opacity:.82}

/* --- Fuss ----------------------------------------------------------------- */
.hinweis{
  font-size:.94rem;line-height:1.6;color:var(--moos);
  border-top:1px solid var(--linie);padding-top:1.4rem;margin-top:3.2rem;
  max-width:var(--mass);
}
.fuss{
  background:var(--tann);color:#D9CFB5;margin-top:3.4rem;padding:1.7rem 0;
  font-size:.93rem;
}
.fuss .bahn{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fuss a{color:#EFE6CF}

/* --- Klein ---------------------------------------------------------------- */
@media(max-width:34rem){
  body{line-height:1.62}
  .stufe--2,.pause{margin-left:.4rem}
  .stufe--3{margin-left:.8rem}
  .stufe--4{margin-left:1.2rem}
  .stufe{padding-left:1.1rem}
  .pause{padding-left:1.1rem;min-height:8.5rem}
}

/* Diese Seite bewegt sich nicht. Wer sie liest, hat meist einen langen Tag
   hinter sich; Animation waere hier Laerm. Die Regel steht trotzdem da,
   falls spaeter etwas dazukommt. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------------------
   Impressum und Datenschutz. Gleiche Schrift, gleiche Farben, gleiche
   Satzbreite wie die Startseite - wer dorthin klickt, soll nicht das Gefuehl
   haben, die Seite gewechselt zu haben.
   --------------------------------------------------------------------------- */
.kopf nav{float:right;font-size:.93rem}
.kopf nav a{margin-left:1.1rem;color:var(--moos);text-decoration:none;border-bottom:1px solid var(--linie)}
.kopf nav a:hover{color:var(--ocker);border-bottom-color:var(--ocker)}

.recht h1{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.5rem);margin-top:2.4rem}
.recht h2{font-size:clamp(1.2rem,1.1rem + .5vw,1.38rem);margin:2.5rem 0 .6rem}
.recht li{max-width:var(--mass);margin-bottom:.35rem}
.recht ul{padding-left:1.3rem}

/* Offene Punkte, die vor dem Hochladen erledigt sein muessen. Bewusst
   auffaellig - dieser Kasten soll stoeren, bis er geloescht ist. */
.platz{
  background:#FFF3DA;border:1px solid var(--ocker);border-radius:3px;
  padding:1rem 1.15rem;margin:1.3rem 0;font-size:.97rem;line-height:1.55;
  max-width:var(--mass);
}
.platz b{display:block;color:var(--ocker);text-transform:uppercase;
  letter-spacing:.09em;font-size:.76rem;margin-bottom:.35rem}

.gut{
  background:var(--sand);border-radius:3px;padding:1rem 1.15rem;margin:1.3rem 0;
  font-size:.99rem;max-width:var(--mass);
}
.gut b{display:block;color:var(--tann);margin-bottom:.3rem}


/* --- Leiter auf schmalen Schirmen ----------------------------------------
   6rem Versatz kosten auf einem Telefon ein Sechstel der Breite. Dort reicht
   die Haelfte: der Treppeneindruck bleibt, die Textspalte auch. */
@media (max-width:34rem){
  .stufe--2{margin-left:1rem}
  .stufe--3{margin-left:2rem}
  .stufe--4{margin-left:3rem}
  .pause{margin-left:.5rem}
  .stufe{padding-left:1.1rem}
  .pause{padding-left:1.1rem}
}


/* ===========================================================================
   STARTSEITE
   Die Seite war vorher ein einzelner langer Artikel. Sie ist jetzt der
   Eingang zu mehreren - deshalb hier Bild, Raster und Karten, die es im
   Artikel-Stylesheet nicht gab.
   =========================================================================== */

.bahn--weit{max-width:var(--weit)}

/* --- Das Kopfbild ---------------------------------------------------------
   Die uebereinanderliegenden Haende. Das Bild liegt als <img> darin und
   nicht als CSS-Hintergrund: So laedt es der Browser als groesstes Element
   der Seite frueh und mit Vorrang, und blinde Leser bekommen eine
   Beschreibung. Der Verlauf darueber ist noetig - ohne ihn steht die weisse
   Schrift auf einer hellen Handflaeche.
   -------------------------------------------------------------------------- */
.schau{position:relative;background:var(--tann);isolation:isolate}
.schau>img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 42%;z-index:-2;
}
.schau::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(175deg,
    rgba(24,38,28,.30) 0%,
    rgba(24,38,28,.58) 42%,
    rgba(24,38,28,.88) 100%);
}
.schau .bahn{padding-top:clamp(4.5rem,10vw,8.5rem);padding-bottom:clamp(2.2rem,4vw,3.4rem)}

.schau h1{
  color:#FBF6EA;
  margin:0;
  max-width:22ch;
  text-shadow:0 1px 24px rgba(0,0,0,.32);
}
.schau .strich{background:var(--ocker);margin:1.3rem 0 1.35rem}
.schau .anriss{
  color:#E7DCC6;
  margin:0;
  max-width:38ch;
  text-shadow:0 1px 18px rgba(0,0,0,.3);
}

/* --- Das Kartenraster -----------------------------------------------------
   auto-fit statt fester Spaltenzahl: bei sechs Karten ergibt das auf dem
   Telefon eine Spalte, auf dem Tablet zwei, am Schreibtisch drei - ohne
   eigene Umbruchpunkte.
   -------------------------------------------------------------------------- */
.themen{margin:3.2rem 0 0}
.themen>h2{margin-top:0}
.themen>p{max-width:var(--mass)}

.karten{
  list-style:none;padding:0;margin:2.1rem 0 0;
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));
}
.karte{
  background:#fff;
  border:1px solid var(--linie);
  border-radius:4px;
  overflow:hidden;
}
.karte>a{
  display:flex;flex-direction:column;height:100%;
  text-decoration:none;color:inherit;
}
.karte img{
  width:100%;display:block;
  aspect-ratio:900/672;object-fit:cover;
  background:var(--sand);
}
.karte .text{padding:1.05rem 1.15rem 1.3rem;display:flex;flex-direction:column;flex:1}
.karte h3{
  font-size:1.24rem;margin:0 0 .45rem;color:var(--tann);
  max-width:none;line-height:1.24;
}
.karte p{font-size:.98rem;line-height:1.5;color:var(--tinte);margin:0;max-width:none}
.karte .mehr{
  display:block;margin-top:.95rem;
  font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ocker);
}
/* Die ganze Karte ist anklickbar, aber der Rahmen darf nicht wandern -
   deshalb Farbe statt Groesse. */
.karte>a:hover{background:#FFFDF7}
.karte>a:hover h3{color:var(--ocker)}
.karte>a:focus-visible{outline-offset:-3px}

/* --- Die Buecherzeile auf der Startseite ----------------------------------
   Kurz und am Ende. Wer nach "alltag mit demenz" sucht, sucht keinen Shop.
   -------------------------------------------------------------------------- */
.streifen{
  margin:4rem 0 0;padding:2.3rem 0 .5rem;
  border-top:2px solid var(--linie);
}
.streifen h2{margin-top:0}

.reihe{
  list-style:none;padding:0;margin:1.7rem 0 1.5rem;
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
}
.reihe li{
  background:var(--sand);border-radius:3px;padding:1rem 1.05rem;
}
.reihe .titel{
  display:block;font-family:var(--serif);font-size:1.06rem;line-height:1.26;
  color:var(--tann);margin-bottom:.3rem;
}
.reihe .was{display:block;font-size:.9rem;line-height:1.45;color:var(--moos)}

/* --- Zurueck-Zeile auf den Unterseiten ------------------------------------ */
.zurueck{
  display:inline-block;margin:2.2rem 0 -1.4rem;
  font-size:.9rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--moos);text-decoration:none;
}
.zurueck:hover{color:var(--ocker)}
.zurueck::before{content:"\2190";margin-right:.45em}

/* --- Weiterlesen am Fuss eines Artikels ----------------------------------- */
.weiterlesen{
  margin:3.6rem 0 0;padding-top:2rem;border-top:1px solid var(--linie);
}
.weiterlesen h2{margin-top:0;font-size:clamp(1.24rem,1.12rem + .5vw,1.45rem)}
.weiterlesen ul{list-style:none;padding:0;margin:1.1rem 0 0;max-width:var(--mass)}
.weiterlesen li{border-top:1px solid var(--linie);padding:.75rem 0}
.weiterlesen li:last-child{border-bottom:1px solid var(--linie)}
.weiterlesen a{
  font-family:var(--serif);font-size:1.1rem;color:var(--tann);
  text-decoration:none;
}
.weiterlesen a:hover{color:var(--ocker);text-decoration:underline}
.weiterlesen .dazu{display:block;font-size:.92rem;color:var(--moos);margin-top:.15rem}