/* =========================================================
   Stefan Wegerhoff – wegerhoff.info
   Drei Farbwelten: Detektiv (Messing), Security (Grün),
   Pädagogik (Magenta). Jede Welt setzt nur --akzent neu –
   alle Bausteine ziehen ihre Farbe daraus.
   ========================================================= */

/* 1 Tokens ------------------------------------------------ */
:root {
  /* Farbwelten */
  --messing:      #E0A93B;
  --messing-tief: #A9741B;
  --gruen:        #1B9347;
  --gruen-tief:   #12703A;
  --magenta:      #C2186F;
  --magenta-tief: #8E1052;

  /* Grundton: dunkel wie die Schilder */
  --nacht:      #131619;
  --nacht-2:    #1C2024;
  --nacht-3:    #262B30;
  --hell:       #FFFFFF;
  --papier:     #F4F5F6;
  --text:       #2F3336;
  --text-leise: #636463;
  --rand:       #C4C9CD;
  --rand-dunkel:#3A4046;
  --auf-nacht:  #D9DDE1;

  --akzent:      var(--messing);   /* Standard, je Welt überschrieben */
  --akzent-tief: var(--messing-tief);

  --breite: 1180px;
  --schrift: Calibri, Carlito, Candara, "Segoe UI", system-ui, sans-serif;
}

.welt-detektiv  { --akzent: var(--messing); --akzent-tief: var(--messing-tief); }
.welt-security  { --akzent: var(--gruen);   --akzent-tief: var(--gruen-tief); }
.welt-paedagogik{ --akzent: var(--magenta); --akzent-tief: var(--magenta-tief); }

/* 2 Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--schrift); font-size: 18px; line-height: 1.6;
  color: var(--text); background: var(--hell); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent-tief); }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 700; line-height: 1.08; }
h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); letter-spacing: -.025em; text-transform: uppercase; }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.02em; text-transform: uppercase; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1em; }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--nacht); color:#fff; padding:.6rem 1rem; z-index:100; }
.skip-link:focus { left:0; }

/* 3 Layout ------------------------------------------------ */
.wrap { width: min(100% - 2.5rem, var(--breite)); margin-inline: auto; }
.section { padding: clamp(2.25rem, 5vw, 4rem) 0; }
.hell    { background: var(--hell); color: var(--text); }
.papier  { background: var(--papier); color: var(--text); }
.nacht   { background: var(--nacht); color: var(--auf-nacht); }
.nacht h1, .nacht h2, .nacht h3 { color: #fff; }
.hell h2, .papier h2 { color: var(--nacht); }

/* Abschnittskopf: Zahnrad-Signet, Balken, Zeile */
.kopf { display: grid; gap: .7rem; margin-bottom: 2rem; max-width: 46rem; }
.kopf h1, .kopf h2 { margin: 0; }
.kopf-zeile { display: flex; align-items: center; gap: .9rem; }
.signet { width: 46px; height: 46px; flex: 0 0 46px; color: var(--akzent); }
.signet svg { width: 100%; height: 100%; display: block; }
.kicker {
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--akzent); font-weight: 700; margin: 0;
}
.kopf p { color: var(--text-leise); font-size: 1.08rem; margin: 0; }
.nacht .kopf p { color: var(--auf-nacht); }
.balken { width: 72px; height: 5px; background: var(--akzent); }

/* 4 Bausteine --------------------------------------------- */
.btn {
  display: inline-block; padding: .9rem 1.7rem; border: 2px solid var(--akzent);
  font-weight: 700; text-decoration: none; letter-spacing: .04em;
  text-transform: uppercase; font-size: .88rem;
  transition: background .15s, color .15s;
}
.btn-voll { background: var(--akzent); color: var(--nacht); }
.btn-voll:hover { background: transparent; color: var(--akzent); }
.btn-leer { color: var(--akzent); background: transparent; }
.btn-leer:hover { background: var(--akzent); color: var(--nacht); }
.hell .btn-voll, .papier .btn-voll { color: #fff; }
.hell .btn-voll:hover, .papier .btn-voll:hover { color: var(--akzent-tief); }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.3rem; }

/* 5 Kopf und Fuß ------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--nacht); border-bottom: 1px solid var(--rand-dunkel); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; }
.logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; }
.logo img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--messing); }
.logo-name { font-weight: 700; letter-spacing: .02em; display: block; line-height: 1.1; }
.logo-claim { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--messing); }

.site-nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; color: #fff; font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.site-nav a:hover { color: var(--messing); }
.nav-extern { color: var(--messing) !important; }
.nav-extern::after { content: " \2197"; font-weight: 400; }
.nav-extern:hover { color: #fff !important; }
.nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-toggle { display: block; width: 46px; height: 42px; background: none; border: 1px solid var(--rand-dunkel); cursor: pointer; }
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after {
    display: block; width: 22px; height: 2px; background: #fff; margin-inline: auto; content: ""; position: relative;
  }
  .nav-toggle-bar::before { top: -7px; position: absolute; }
  .nav-toggle-bar::after  { top:  7px; position: absolute; }
  .site-nav { display: none; width: 100%; }
  .site-nav.offen { display: block; }
  .header-inner { flex-wrap: wrap; }
  .site-nav ul { flex-direction: column; gap: 0; padding: .5rem 0 1rem; }
  .site-nav li { border-top: 1px solid var(--rand-dunkel); }
  .site-nav a { display: block; padding: .85rem 0; }
}

.site-footer { background: #0D0F11; color: #8C949B; padding: 3.5rem 0; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--messing); }
.footer-brand { font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.4rem; list-style: none; margin: 0 0 1rem; padding: 0; font-size: .9rem; }
.footer-copy { font-size: .85rem; margin: 0; }

/* 6 Hero -------------------------------------------------- */
.hero { background: var(--nacht); color: #fff; padding: 1.2rem 0 0; overflow: hidden; }
.hero-inner { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.5fr .5fr; gap: 2rem; align-items: center; } }
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--messing); }
.hero-lead { font-size: 1.05rem; color: var(--auf-nacht); max-width: 46ch; margin-bottom: 0; }
.hero-bild { position: relative; align-self: end; }
.hero-bild img { width: 100%; max-width: 270px; margin-inline: auto; }
.hero-bild::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(transparent, var(--nacht)); pointer-events: none;
}
/* Claim-Leiste unter dem Hero, wie das Warnband auf den Schildern */
.claimband {
  background: var(--messing); color: var(--nacht);
  display: flex; flex-wrap: wrap; gap: 2.2rem; justify-content: center;
  padding: .5rem 1.2rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; margin: 0;
}

/* 7 Regal (Buchkacheln) ----------------------------------- */
.regal { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .regal { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .regal-5 { grid-template-columns: repeat(5, 1fr); } }
.buch { text-decoration: none; color: inherit; display: block; }
.buch img { box-shadow: 0 14px 34px rgba(0,0,0,.4); transition: transform .18s ease; }
.hell .buch img, .papier .buch img { box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.buch:hover img { transform: translateY(-6px); }
.buch-nr { margin: .9rem 0 .15rem; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--messing); font-weight: 700; }
.buch-titel { margin: 0; font-weight: 700; font-size: .98rem; line-height: 1.25; }
.nacht .buch-titel { color: #fff; }

/* 7b Regal als Kulisse ------------------------------------
   Die Mockups sind Ausschnitte aus EINEM Regalbild. Stossen sie
   ohne Abstand aneinander, laeuft das Brett durch und die Reihe
   wirkt wie ein einziges Foto. Deshalb hier kein gap, und die
   Beschriftung liegt unter dem Bild statt daneben.
   Die Reihenfolge der Ausschnitte wiederholt sich alle vier Titel --
   darum passt jede Zeilenlaenge von 1, 2 oder 4 Kacheln. */
.regal-kulisse {
  display: grid; gap: 0; margin-top: 2.4rem;
  grid-auto-flow: column; grid-auto-columns: 85%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.regal-kulisse::-webkit-scrollbar { display: none; }
.regal-kulisse > .buch { scroll-snap-align: start; }
@media (min-width: 480px) { .regal-kulisse { grid-auto-columns: 50%; } }
@media (min-width: 700px) { .regal-kulisse { grid-auto-columns: 25%; } }

/* Karussell-Pfeile */
.karussell { position: relative; }
.karussell-pfeil {
  position: absolute; top: calc(2.4rem + 38%); transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border: 0; cursor: pointer;
  background: var(--akzent); color: var(--nacht);
  font-size: 1.6rem; line-height: 48px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: opacity .15s, transform .15s;
}
.karussell-pfeil:hover { transform: translateY(-50%) scale(1.08); }
.karussell-pfeil[disabled] { opacity: 0; pointer-events: none; }
.karussell-zurueck { left: -12px; }
.karussell-weiter  { right: -12px; }
.karussell-pfeil[hidden] { display: none; }
.regal-kulisse .buch { display: flex; flex-direction: column; }
.regal-kulisse .buch img {
  width: 100%; height: auto; display: block; box-shadow: none;
  transition: filter .18s ease, transform .18s ease; }
.regal-kulisse .buch:hover img { transform: none; filter: brightness(1.12); }
.regal-kulisse .buch:focus-visible img { filter: brightness(1.12); outline: 2px solid var(--akzent); outline-offset: -2px; }
.regal-kulisse .buch-nr { margin: .8rem 0 .15rem; }
.regal-kulisse .beschriftung { padding: 0 .9rem 1.4rem; }
/* Auf schmalen Schirmen wird die Kachel sonst sehr hoch und das
   Buch winzig -- deshalb dort der obere Regalrand beschnitten. */
@media (max-width: 619px) {
  .regal-kulisse .buch img { aspect-ratio: 16 / 11; object-fit: cover; object-position: 50% 78%; }
}

/* Der Abschnittshintergrund nimmt die Farbe der Regal-Oberkante auf.
   Ein durchgehendes Foto hinter dem Text waere zu unruhig -- die
   Ueberschriften wuerden darin untergehen. Werte aus den Szenen gemessen. */
.welt-detektiv.kulisse   { background: #2a1610; }  /* dunkle Bibliothek */
.welt-security.kulisse   { background: #4e5139; }  /* gruenes Buero     */
.welt-paedagogik.kulisse { background: #6f4e2a; }  /* warmes Wohnzimmer */
.kulisse .kopf p, .kulisse .buch-titel { color: #f3efe6; }
.kulisse h2 { color: #fff; }
.kulisse .buch-nr { color: #e0c07a; }

/* 8 Ablaufstrecke (die Schilder) -------------------------- */
.ablauf { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-top: 2.8rem; }
@media (min-width: 780px) { .ablauf { grid-template-columns: repeat(3, 1fr); } }
.ablauf img { width: 100%; border: 1px solid var(--rand-dunkel); }

/* 9 Zweispalter ------------------------------------------- */
.zwei { display: grid; gap: clamp(1.8rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .zwei { grid-template-columns: 1fr 1fr; } }
.portrait { width: 100%; max-width: 400px; aspect-ratio: 1 / 1; object-fit: cover;
  object-position: 50% 18%; border-radius: 50%; justify-self: center;
  border: 6px solid var(--messing); outline: 1px solid var(--rand); outline-offset: 8px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22); }
.platzhalter {
  background: var(--papier); border: 2px dashed var(--rand); min-height: 260px;
  display: grid; place-items: center; color: var(--text-leise); text-align: center; padding: 1rem;
}
.offen { color: var(--text-leise); font-style: italic; }

/* 10 Textseiten ------------------------------------------- */
.text-page { max-width: 46rem; }
.text-page h1 { font-size: clamp(2rem, 5vw, 3rem); color: var(--nacht); }
.text-page h2 { margin-top: 2.2rem; font-size: 1.1rem; text-transform: none; letter-spacing: 0; color: var(--nacht); }
.text-page ul { padding-left: 1.2rem; margin: 0 0 1em; }
.text-page li { margin-bottom: .35rem; }
.lead { font-size: 1.08rem; color: var(--text-leise); }
.tbd { background: #fff3cd; border-bottom: 1px dashed #b38600; padding: 0 .2em; color: #6b4e00; }

/* 11 Videoseite ------------------------------------------- */
.videoreihe { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .videoreihe { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .videoreihe { grid-template-columns: repeat(3, 1fr); } }

.video { margin: 0; }
.video-flaeche {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--nacht-2) center/cover no-repeat;
  border: 1px solid var(--rand-dunkel); cursor: pointer; padding: 0;
  transition: border-color .15s;
}
.video-flaeche:hover { border-color: var(--akzent); }
.video-play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  background: var(--akzent); clip-path: polygon(30% 22%, 30% 78%, 78% 50%);
  transition: transform .15s;
}
.video-flaeche:hover .video-play { transform: scale(1.08); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.video-rubrik { margin: .8rem 0 .1rem; font-size: .7rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--messing); font-weight: 700; }
.video-titel { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.3; color: #fff; }
.video-hinweis { margin-top: 2.5rem; font-size: .88rem; color: var(--auf-nacht); max-width: 60ch; }
.video-hinweis a { color: var(--akzent); }

/* Videos: erstes Video groß über die volle Breite */
.videoreihe-oben { grid-template-columns: 1fr !important; margin-bottom: 2.5rem; }
.video-gross { max-width: 900px; }
.video-gross .video-titel { font-size: 1.35rem; line-height: 1.2; }
.video-gross .video-play { width: 88px; height: 88px; }

/* nav-kompakt: mittlere Fensterbreite, Menü bleibt einzeilig */
@media (min-width: 881px) and (max-width: 1180px) {
  .site-nav ul { gap: 1rem; }
  .site-nav a { font-size: .74rem; letter-spacing: .08em; white-space: nowrap; }
}

/* 12 Verkaufsseiten --------------------------------------- */
.verkauf-kopf { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .verkauf-kopf { grid-template-columns: minmax(240px, 380px) 1fr; } }
.verkauf-cover img { width: 100%; max-width: 380px; margin-inline: auto; box-shadow: 0 22px 50px rgba(0,0,0,.55); }
.verkauf h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: .2em; text-transform: none; letter-spacing: -.01em; }
.verkauf-schluss h2 { text-transform: none; }
.verkauf-unter { font-size: 1.15rem; color: var(--akzent); font-weight: 700; margin: 0 0 1rem; }
.verkauf .balken { margin-bottom: 1.2rem; }
.verkauf-intro { font-size: 1.1rem; max-width: 56ch; }
.preiszeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin: 1.4rem 0 0; }
.preis { font-size: 2rem; font-weight: 700; color: #fff; }
.preis-info { color: var(--auf-nacht); font-size: .9rem; }
.kleingedruckt { font-size: .85rem; color: var(--text-leise); margin-top: 1rem; }
.nacht .kleingedruckt { color: #8C949B; }
.nacht .kleingedruckt a { color: var(--akzent); }
.verkauf-inhalt { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .verkauf-inhalt { grid-template-columns: 1.5fr 1fr; align-items: start; } }
.hakenliste { list-style: none; margin: 0; padding: 0; }
.hakenliste li { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--rand); }
.hakenliste svg { flex: 0 0 22px; width: 22px; height: 22px; color: var(--akzent); margin-top: .15rem; }
.hinweis { font-size: .88rem; color: var(--text-leise); border-left: 3px solid var(--akzent); padding-left: .9rem; margin-top: 1.5rem; }
.autor-kasten { background: #fff; border: 1px solid var(--rand); padding: 1.4rem; display: grid; gap: 1rem; grid-template-columns: 96px 1fr; align-items: start; }
.autor-kasten img { width: 96px; height: 96px; object-fit: cover; object-position: 50% 18%; border-radius: 50%; border: 3px solid var(--akzent); }
.autor-kasten p { margin: 0 0 .5rem; }
.verkauf-schluss { text-align: center; }
.verkauf-schluss .cta-row { justify-content: center; }

/* 13 Geteilte Regalplätze: Tablet -> Digistore, Buch -> Amazon */
.buch-geteilt .bild-rahmen { position: relative; display: block; }
.zone { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 12%; text-decoration: none; }
.zone-ebook { left: 0; }
.zone-druck { right: 0; }
.zone span {
  background: var(--akzent); color: var(--nacht); font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .35rem .6rem; white-space: nowrap;
  opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s;
}
.zone:hover span, .zone:focus-visible span { opacity: 1; transform: none; }
.zone:hover { background: linear-gradient(to top, rgba(0,0,0,.18), transparent 60%); }
.buch-geteilt:hover img { filter: none; }
@media (hover: none) { .zone span { opacity: .92; transform: none; } }

/* 14 Kauf-Links unter jedem Titel */
.zone-voll { left: 0; width: 100%; }
.kauf-links { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: .45rem; }
.kauf-links a { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600;
  color: var(--akzent); text-decoration: none; letter-spacing: .02em; }
.kauf-links a:hover span { text-decoration: underline; }
.kulisse .kauf-links a, .nacht .kauf-links a { color: #F2F2F2; }
.kulisse .kauf-links svg, .nacht .kauf-links svg { color: var(--akzent); }
.kauf-links svg { width: 16px; height: 16px; flex: 0 0 16px; }

.kauf-zusatz { display: block; margin-top: .3rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--messing); font-weight: 700; }



@media (max-width: 480px) { .logo-claim { letter-spacing: .06em; font-size: .6rem; } }

/* 17 Seite Über mich */
.fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.fakten li { border-left: 4px solid var(--messing); padding: .2rem 0 .2rem 1rem; }
.fakten strong { display: block; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; color: #fff; }
.fakten span { display: block; margin-top: .3rem; color: var(--auf-nacht); font-size: .95rem; }
.ueber-text .kopf { margin: 2.6rem 0 1.2rem; }
.ueber-text .kopf:first-child { margin-top: 0; }
.fakten { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ueber-schluss { margin-top: 2rem; font-size: 1.25rem; font-weight: 700; color: var(--nacht); }
.text-leise { color: var(--text-leise); font-size: .9rem; margin-top: 2rem; }

/* 18 Videos kompakter */
.video-gross { max-width: 640px; }
.video-gross .video-titel { font-size: 1.15rem; }
.video-gross .video-play { width: 72px; height: 72px; }
@media (min-width: 700px) { .videoreihe { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1040px) { .videoreihe { grid-template-columns: repeat(4, 1fr); } .videoreihe-oben { grid-template-columns: 1fr !important; } }
.videoreihe .video-play { width: 52px; height: 52px; }

/* 19 Hinweis Veroeffentlichung */
.vo-hinweis { margin: .8rem 0 0; font-size: .92rem; color: var(--auf-nacht); border-left: 3px solid var(--akzent); padding-left: .8rem; max-width: 46rem; }
.vo-hinweis strong { color: #fff; }

/* 20 Blog */
.nacht .text-page h1, .nacht .text-page h2 { color: #fff; }
.nacht .text-page h2 { margin-top: 2rem; font-size: 1.25rem; }
.video-hinweis-gross { font-size: 1.1rem; color: var(--auf-nacht); }
.blog-karte .video-flaeche { aspect-ratio: 16/9; background-size: cover; }

.blog-datum { color: var(--auf-nacht); font-size: .9rem; margin: .2rem 0 1.4rem; }
.shorts-liste { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.shorts-liste li { padding: .45rem 0; border-bottom: 1px solid var(--rand-dunkel); }
.shorts-liste time { color: var(--auf-nacht); font-size: .85rem; margin-right: .6rem; }
.shorts-liste a { color: #fff; text-decoration: none; }
.shorts-liste a:hover { color: var(--akzent); text-decoration: underline; }

/* 21 Einleitung ausklappen */
.intro-mehr { max-width: 46rem; }
.intro-mehr .intro-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; margin: 0; }
.intro-mehr input:checked ~ .intro-text { display: block; -webkit-line-clamp: unset; }
.mehr-link { display: inline-block; margin-top: .5rem; cursor: pointer; font-weight: 700; font-size: .92rem;
  color: var(--akzent); }
.mehr-link::after { content: "… weiterlesen"; }
.intro-mehr input:checked ~ .mehr-link::after { content: "weniger anzeigen"; }
.mehr-link:hover { text-decoration: underline; }