/* Inhalt der Startseite free-systems.eu (FreeWebspace-Teaser). Rahmen, Kopf, Fuss und Farben stehen in rahmen.css.
   Schriftgroessen nach der Vorlage vom 21.10.2026 (an demo/page angeglichen): Hero-h1 clamp(2.1rem,4.8vw,3.2rem),
   h2 clamp(1.3rem,2.4vw,1.55rem), Lead clamp(1.05rem,1.9vw,1.15rem). */
.lead{font-size:clamp(1.05rem,1.9vw,1.15rem);line-height:1.5;color:var(--muted);max-width:38rem}
.pill{display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;color:var(--accent);border:1px solid var(--line);background:var(--surface);padding:.35rem .9rem;border-radius:999px}
.pill i{width:.55rem;height:.55rem;border-radius:50%;background:var(--hot);display:block}
.hero{padding-block:var(--s4) var(--s5);position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:center}
.hero h1{margin:var(--s2) 0 var(--s3);font-size:clamp(2.1rem,4.8vw,3.2rem);line-height:1.1}
.hero h1 em{font-style:normal;color:var(--accent)}
.stage{position:relative;justify-self:center;width:min(60vw,15rem);aspect-ratio:1}
.stage .mark{width:100%;height:100%}
.stage .mark img{width:100%;height:100%}
.addr{display:flex;align-items:center;gap:.75rem;margin:var(--s3) 0 0;padding:.8rem 1rem;max-width:34rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:clamp(.95rem,3.9vw,1.15rem);overflow:hidden}
.addr svg{flex:none;width:1.1rem;height:1.1rem;color:var(--accent)}
.addr b{color:var(--accent);font-weight:700}
.addr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.addr .caret{display:inline-block;width:2px;height:1.1em;background:var(--hot);vertical-align:-.2em;margin-left:2px}
.cta{margin-top:var(--s3)}
section{padding-block:var(--s5)}
.sec-head{max-width:40rem;margin-bottom:var(--s4)}
.sec-head p{color:var(--muted);margin-top:var(--s2)}
.features{list-style:none;margin:0;padding:0;display:grid;gap:0 var(--s5)}
.features li{padding:1.1rem 0;border-top:1px solid var(--line);display:grid;grid-template-columns:2.2rem 1fr;gap:0 .8rem}
.features li::before{content:attr(data-n);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.features h3{margin-bottom:.2rem}
.features p{margin:0;color:var(--muted)}
.who{display:grid;gap:var(--s3)}
.who>div{border-left:3px solid var(--hot);padding-left:var(--s2)}
.who p{color:var(--muted);margin:.3rem 0 0}
.band{background:var(--surface);border-block:1px solid var(--line)}
.band .wrap{display:grid;gap:var(--s3)}
.faq{max-width:46rem}
.faq details{border-top:1px solid var(--line);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1rem 2rem 1rem 0;font-weight:700;position:relative;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:.8rem;font-size:1.4rem;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);padding-bottom:var(--s2);margin:0}
.stay{padding-block:var(--s5) var(--s6)}
.stay .box{border:1px solid var(--line);background:var(--surface);border-radius:var(--rk);padding:clamp(1.5rem,5vw,3rem);max-width:46rem}
.stay h2{margin-bottom:var(--s2)}
.sec-head.flush{margin:0}
section.nopad{padding-top:0}
@media (min-width:700px){
  .features{grid-template-columns:1fr 1fr}
  .who{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:56rem){
  .hero .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .stage{width:100%;max-width:16rem;justify-self:end}
  .band .wrap{grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
  .band .who{grid-template-columns:1fr}
}
/* Bewegung: Puls und Cursor laufen, solange die Seite Bewegung zeigt (siehe Bewegungs-Regeln in rahmen.css). */
.pill i{animation:pulse 2.4s ease-in-out infinite}
.caret{animation:blink 1.2s steps(1) infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
@keyframes blink{50%{opacity:0}}