/* Einstieg (/) – Wahl der Ansicht: „Persönlich“ groß, die technische und die handgemachte Alternative kleiner daneben.
   Baut auf basis.css und a.css auf (die braucht die nächste Seite ohnehin). */
.seite-einstieg { --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, monospace; background: var(--kalk); }
.einstieg { width: min(100% - 2rem, 76rem); min-height: 100svh; margin-inline: auto; padding-block: clamp(1.5rem, 4vw, 2.75rem) 2rem; display: grid; align-content: center; gap: clamp(1.5rem, 3vw, 2.25rem); }
.einstieg-kopf { display: grid; justify-items: center; gap: .6rem; text-align: center; }
.einstieg-kopf .brand { color: var(--ink); }
.einstieg h1 { margin-top: .4rem; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.035em; font-weight: 780; }
.einstieg-lead { max-width: 38rem; color: var(--muted); font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); }

.ansichten { display: grid; gap: 1rem; }
.ansichten li { display: flex; }
/* Tablet: die zwei Alternativen nebeneinander unter der großen Karte */
@media (min-width: 36rem) and (max-width: 61.99rem) { .ansichten { grid-template-columns: 1fr 1fr; } .ansicht-gross { grid-column: 1 / -1; } }
/* Desktop: große Karte links über zwei Zeilen, die Alternativen rechts übereinander */
@media (min-width: 62rem) { .ansichten { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; min-height: min(62vh, 36rem); } .ansicht-gross { grid-row: span 2; } }
.ansicht { position: relative; isolation: isolate; display: flex; flex-direction: column; width: 100%; overflow: hidden; border-radius: 10px; color: #fff; text-decoration: none; }
.ansicht:focus-visible { outline-offset: 5px; border-radius: 10px; }
.ansicht-text { margin-top: auto; display: grid; gap: .4rem; padding: clamp(1.25rem, 3vw, 2rem); }
.ansicht-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.ansicht-titel { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 780; line-height: 1; letter-spacing: -.035em; color: var(--abend-hell); }
.ansicht-sub { max-width: 30rem; font-size: 1rem; color: rgba(255, 255, 255, .92); }
.ansicht-go { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; min-height: 3rem; margin-top: .6rem; padding: .7rem 1.25rem; border: 2px solid transparent; border-radius: var(--radius-btn); font-weight: 700; }
.ansicht-go svg { width: 1rem; height: 1rem; }

/* die Webseite: groß, mit Foto der Taugl */
.ansicht-web { min-height: 21rem; background: var(--tanne-2); box-shadow: 7px 7px 0 var(--kalk-3); }
.ansicht-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 70%; }
.ansicht-web::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 24, 20, .9) 0%, rgba(12, 24, 20, .5) 48%, rgba(12, 24, 20, .08) 82%); }
.ansicht-web .ansicht-go { background: var(--abend); color: #1B1A16; }
.ansicht-web:hover .ansicht-go { background: var(--abend-hell); }

/* die technische Alternative: dunkel, mit kleiner Konsole */
.ansicht-tech { background: #0B1714; border: 1px solid rgba(116, 211, 204, .32); color: #E6F2EF; }
.ansicht-tech .ansicht-text { gap: .3rem; padding: 1.1rem 1.25rem 1.3rem; }
.ansicht-tech .ansicht-kicker { font: 600 .8125rem/1.3 var(--mono); letter-spacing: 0; text-transform: none; color: var(--tuerkis-hell); }
.ansicht-tech .ansicht-titel { font-size: clamp(1.4rem, 2.4vw, 1.75rem); color: #fff; }
.ansicht-tech .ansicht-sub { font-size: .9375rem; color: #B9D6D1; }
.ansicht-tech .ansicht-go { min-height: 2.75rem; padding: .5rem 1rem; border-color: var(--tuerkis-hell); color: var(--tuerkis-hell); font-size: .9375rem; }
.ansicht-tech:hover .ansicht-go { background: var(--tuerkis-hell); color: #0B1714; }
.tech-fenster { display: grid; gap: .45rem; margin: 1rem 1rem 0; padding-bottom: .9rem; overflow: hidden; border: 1px solid rgba(116, 211, 204, .22); border-radius: 8px; background: #10201C; font: 500 .8125rem/1.45 var(--mono); }
.tech-leiste { display: flex; align-items: center; gap: .35rem; padding: .5rem .7rem; border-bottom: 1px solid rgba(116, 211, 204, .18); color: #9FBDB7; font-size: .75rem; }
.tech-leiste i { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .55; }
.tech-leiste span { margin-left: .4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tech-zeile { padding-inline: .8rem; }
.tech-frage { justify-self: end; color: var(--abend-hell); }
.tech-antwort { color: #fff; }
.tech-werte { color: var(--tuerkis-hell); }
.tech-werte b { color: #fff; font-weight: 700; }
/* am Handy: die technische Alternative kompakt unter der Webseite */
@media (max-width: 47.99rem) {
  .ansicht-web { min-height: 19rem; }
  .tech-fenster { margin: .75rem .75rem 0; padding-bottom: .65rem; gap: .3rem; font-size: .75rem; }
  .tech-antwort { display: none; }
  .ansicht-tech .ansicht-text { padding: .9rem 1rem 1.1rem; }
  .ansicht-tech .ansicht-sub { font-size: .875rem; }
}

.einstieg-fuss { display: grid; justify-items: center; gap: .3rem; text-align: center; font-size: .9375rem; color: var(--muted); }
.einstieg-fuss a { color: var(--tuerkis); font-weight: 650; }
.einstieg-fuss .legal { font-size: .8125rem; }
.einstieg-fuss .legal a { color: var(--muted); font-weight: 500; }

/* die handgemachte Alternative: weiß, Farbkarten und Zeichnung wie im Stil der Ansicht */
.ansicht-hand { background: #fff; border: 1px solid #E7E3DB; color: #1C1B19; }
.ansicht-hand .ansicht-text { gap: .3rem; padding: 1.1rem 1.25rem 1.3rem; }
.ansicht-hand .ansicht-kicker { font-weight: 800; font-size: .75rem; letter-spacing: .06em; color: #55524C; }
.ansicht-hand .ansicht-titel { font: italic 400 clamp(1.5rem, 2.6vw, 1.9rem)/1.05 Georgia, "Times New Roman", serif; letter-spacing: 0; color: #1C1B19; }
.ansicht-hand .ansicht-sub { font-size: .9375rem; color: #55524C; }
.ansicht-hand .ansicht-go { min-height: 0; margin-top: .5rem; padding: 0 0 3px; border: 0; border-bottom: 2px solid currentColor; border-radius: 0; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; font-weight: 800; color: #1C1B19; }
.ansicht-hand:hover .ansicht-go { color: #B4533F; }
.hand-bild { display: flex; align-items: flex-end; gap: .4rem; margin: 1rem 1rem 0; }
.hand-bild i { width: 1.15rem; height: 1.6rem; background: var(--c); }
.hand-bild i:nth-child(even) { height: 2.2rem; }
.hand-bild svg { width: 5.5rem; height: auto; margin-left: auto; }
@media (max-width: 47.99rem) { .hand-bild { margin: .75rem .75rem 0; } .ansicht-hand .ansicht-text { padding: .9rem 1rem 1.1rem; } .ansicht-hand .ansicht-sub { font-size: .875rem; } }