/* Startseite-Skizze: Ergänzungen zu reise.css (aus der Webdesign-Scroll-Reise übernommen).
   Drei Türen im Ziel und der Nachlese-Text unter der Geschichte. */
.marke b { -webkit-text-fill-color: initial; background: none; color: var(--tinte); font-weight: 800; }
.marke span { font-size: 17px; }

.akt--ziel { min-height: 150vh; align-items: flex-start; }
.ziel { width: min(620px, 100%); }
.ziel__titel span { display: inline; }
.tueren { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tuer {
  display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline;
  padding: 20px 22px; border-radius: 16px; text-decoration: none;
  background: var(--flaeche); border: 1px solid var(--linie);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.2), border-color .3s, box-shadow .3s;
}
.tuer:hover, .tuer:focus-visible { transform: translateX(8px); border-color: var(--akzent); box-shadow: 0 16px 40px hsl(var(--h) 100% 50% / .22); outline: none; }
.tuer__nr { grid-row: span 2; font: 600 13px var(--mono); color: var(--akzent); }
.tuer b { font: 700 26px/1.1 var(--kopf); letter-spacing: -.02em; }
.tuer small { color: var(--leise); font-size: 15px; margin-top: 4px; }
.tuer--kern { border-color: var(--akzent); }
.ziel__weiter { margin: 22px 0 0; }

.nachlesen { position: relative; z-index: 3; background: var(--grund); border-top: 1px solid var(--linie); }
.nachlesen__innen { width: min(1120px, 100% - 32px); margin: 0 auto; padding: 90px 0 120px; }
.augenbraue { margin: 0 0 12px; font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }
.nachlesen h2 { margin: 0 0 36px; font: 700 clamp(34px, 4.6vw, 60px)/1 var(--kopf); letter-spacing: -.03em; }
.spalten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.spalten h3 { margin: 0 0 8px; font: 700 21px var(--kopf); }
.spalten p { margin: 0; color: var(--leise); line-height: 1.6; }
.nachlesen__links { margin: 48px 0 0; font: 500 13px var(--mono); color: var(--leise); }
.nachlesen__links a { text-decoration: none; }
.nachlesen__links a:hover { color: var(--tinte); }
/* Kopf-Link „Webdesign“ (31.10.2026): wie der Link „Datenreife“ auf webdesign.flowberatung.de */
.kopf__link {
  font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; text-decoration: none;
  padding: 11px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--flaeche);
  backdrop-filter: blur(8px); color: var(--tinte); white-space: nowrap;
}
.kopf__link:hover { border-color: var(--akzent); color: var(--akzent); }

@media (max-width: 760px) {
  .spalten { grid-template-columns: 1fr; }
  .akt--ziel { align-items: center; }
  .tuer b { font-size: 22px; }
}
@media (max-width: 600px) {
  .kopf__link { padding: 9px 10px; font-size: 10px; letter-spacing: .04em; }
  .marke span { display: none; } /* wie auf webdesign.flowberatung.de: am Handy nur das Zeichen, sonst ragt der Kopf aus dem Bild */
}