/* Gemeinsame Basis der drei Entwürfe: nur CI (Farben, Verlauf, Schriften), kein Layout. */

:root {
  --tq: #0dc198;
  --tq-light: #59f7aa;
  --tq-ink: #08795f;
  --tq-soft: #e3f8f1;
  --on-tq: #0b231c;
  --ink: #2e2d2d;
  --muted: #5d6366;
  --line: #e1e6e4;
  --bg: #ffffff;
  --alt: #f4f7f6;
  --night: #1e2422;
  --grad: linear-gradient(110deg, #0dc198 0%, #59f7aa 100%);
  --grad-btn: linear-gradient(70deg, #0dc198 0%, #61ce70 100%);
  --r: 6px;
  --head: "Fira Sans", system-ui, sans-serif;
  --body: "Roboto", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--bg); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--head); margin: 0; line-height: 1.15; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--tq); outline-offset: 3px; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: var(--r); font-family: var(--head); font-weight: 500; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform .2s, box-shadow .2s, background-position .3s; border: 0; cursor: pointer; }
.btn-grad { background: var(--grad-btn); background-size: 140% 100%; color: var(--on-tq); }
.btn-grad:hover { background-position: 100% 0; transform: translateY(-1px); }
.btn-white { background: #fff; color: var(--on-tq); }
.btn-white:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.btn-line { border: 1.5px solid currentColor; background: transparent; }
.btn-dark { background: var(--night); color: #fff; }
.ico { width: 20px; height: 20px; flex: none; }

/* Umschalter zwischen den Entwürfen (gehört nicht zum Design) */
.switcher { position: sticky; top: 0; z-index: 100; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 16px; background: #fff3c4; border-bottom: 1px solid #e8d27a; font: 500 14px/1.2 var(--body); }
.switcher strong { margin-right: 6px; font-size: 12px; letter-spacing: .08em; }
.switcher a { padding: 7px 12px; border-radius: 6px; text-decoration: none; }
.switcher a[aria-current] { background: var(--ink); color: #fff; }
.switcher span { margin-left: auto; color: #6b5b16; font-size: 13px; }
@media (max-width: 640px) { .switcher span { display: none; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* v2: Umschalter-Links zeigen auf 1/2/3.html (im HTML gesetzt). Bilder liegen in ../img/ */

/* v3: gemeinsame Bewegungs-Bausteine */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }
.line { display: block; overflow: hidden; padding-bottom: .08em; }
.line > span { display: block; transform: translateY(105%); animation: lineUp 1.1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.15s + var(--d, 0) * .12s); }
@keyframes lineUp { to { transform: none; } }
.fade { opacity: 0; animation: fadeUp 1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(.5s + var(--d, 0) * .12s); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rv, .fade { opacity: 1 !important; transform: none !important; } .line > span { transform: none !important; } }