/* ==========================================================================
   Studio Loriot — Coming Soon
   Gemeinsames Stylesheet für alle Seiten
   ========================================================================== */

/* --------------------------------------------------------------------------
   SCHRIFT

   Aktiv ist derzeit TeX Gyre Heros, eine freie, metrisch zu Helvetica
   kompatible Schrift.

   UMSTELLUNG AUF HELVETICA:
   1. Die gelieferten Dateien als WOFF2 unter fonts/ ablegen:
        fonts/helvetica-regular.woff2
        fonts/helvetica-medium.woff2   (optional)
        fonts/helvetica-bold.woff2
   2. Den Block "HEROS" auskommentieren.
   3. Den Block "HELVETICA" einkommentieren.

   Mehr ist nicht nötig — der Rest des Stylesheets spricht die Schrift über
   den neutralen Namen "Websans" an, nicht über den Produktnamen.
   -------------------------------------------------------------------------- */

/* ---- HEROS (aktiv) ---- */
@font-face{
  font-family:"Websans";
  src:url("fonts/heros-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Websans";
  src:url("fonts/heros-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---- HELVETICA (inaktiv — nach Lieferung einkommentieren) ----
@font-face{
  font-family:"Websans";
  src:url("fonts/helvetica-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Websans";
  src:url("fonts/helvetica-medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Websans";
  src:url("fonts/helvetica-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
---------------------------------------------------------------- */

:root{
  --ink:#000000;
  --paper:#F6F5F1;   /* Off-White. Alternativen: #FAF9F5 heller, #F2F1EB waermer */
  --line:#000000;
  --strich:2px;      /* Staerke der Trennlinien oben und unten */
  --grau:#5A5A55;
  --rand:clamp(24px, 5.5vw, 80px);
  --sans:"Websans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  display:flex;flex-direction:column;
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ---------- Kopf ---------- */
.kopf{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:6px 24px;
  padding:13px var(--rand);
  position:relative;
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;
}
/* Trennlinie auf Satzspiegelbreite, nicht bis zum Fensterrand */
.kopf::after{
  content:"";position:absolute;bottom:0;
  left:var(--rand);right:var(--rand);height:var(--strich);background:var(--line);
}
.kopf__nav{display:flex;flex-wrap:wrap;gap:6px 24px}

/* Wortmarke statt gesetztem Namen — nur auf der Startseite */
.wortmarke{display:block;line-height:0;border-bottom:0!important}
.wortmarke img{display:block;height:20px;width:auto}
@media (max-width:620px){ .wortmarke img{height:16px} }
.kopf a{text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s}
.kopf a:hover,.kopf a:focus-visible{border-bottom-color:var(--ink)}
.kopf a[aria-current="page"]{border-bottom-color:var(--ink)}

/* ---------- Burgermenue ---------- */
.burger{
  display:none;
  background:none;border:0;padding:8px 0 8px 16px;margin-left:auto;
  cursor:pointer;line-height:0;
}
.burger span{
  display:block;width:24px;height:var(--strich);background:var(--ink);
  transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s;
}
.burger span + span{margin-top:6px}
.burger:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

@media (max-width:620px){
  .kopf{font-size:13px;gap:0}
  .burger{display:block}

  /* Erst wenn JavaScript uebernommen hat, wird eingeklappt.
     Ohne JavaScript bleibt die Navigation stehen und bricht um. */
  body[data-menu] .kopf__nav{
    flex-basis:100%;
    flex-direction:column;
    gap:0;
    overflow:hidden;
    max-height:0;
    transition:max-height .3s cubic-bezier(.22,.61,.36,1);
  }
  body[data-menu="auf"] .kopf__nav{max-height:180px}
  body[data-menu] .kopf__nav a{padding:11px 0;border-bottom:0}
  body[data-menu] .kopf__nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
  body[data-menu] .kopf__nav a:first-child{padding-top:16px}
  body[data-menu] .kopf__nav a:last-child{padding-bottom:6px}

  /* Balken werden zum Kreuz */
  body[data-menu="auf"] .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  body[data-menu="auf"] .burger span:nth-child(2){opacity:0}
  body[data-menu="auf"] .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
}

@media (prefers-reduced-motion:reduce){
  .burger span, body[data-menu] .kopf__nav{transition:none}
}

/* ---------- Startseite: Bühne ---------- */
.buehne{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(30px,5vh,46px);
  /* unten mehr Luft als oben: verschiebt die Gruppe auf die optische Mitte */
  padding:clamp(20px,3vh,40px) var(--rand) calc(clamp(20px,3vh,40px) + 44px);
  text-align:center;
}
.kreis{
  width:clamp(240px,52vh,540px);
  max-width:100%;          /* sonst laeuft der Kreis auf schmalen Schirmen aus dem Bild */
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  flex:none;
  background:#000;
}
.kreis video{width:100%;height:100%;object-fit:cover;display:block}

.buehne h1{
  font-weight:400;
  font-size:clamp(15px,1.5vw,20px);
  line-height:1.3;
  letter-spacing:0;
  /* linksbuendig an der linken Kreiskante: Text und Bild bilden einen Block */
  text-align:left;
  width:clamp(240px,52vh,540px);
  max-width:100%;
}
@media (max-width:560px){
  .buehne h1 br{display:none}
}

/* ---------- Inhaltsseiten ---------- */
.inhalt{
  flex:1;
  width:100%;max-width:920px;   /* breiter, damit Ueberschriften nicht dreizeilig brechen */
  padding:clamp(48px,8vh,96px) var(--rand) clamp(64px,10vh,120px);
}
.inhalt h1{
  font-size:clamp(27px,3.3vw,44px);
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
  margin-bottom:clamp(32px,5vh,56px);
}
.inhalt h2{
  font-size:14px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;
  margin:44px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line);
}
.inhalt h2:first-of-type{margin-top:0}
.inhalt p{font-size:17px;line-height:1.6;max-width:62ch;margin-bottom:14px}
.inhalt p.gross{font-size:clamp(19px,2vw,23px);line-height:1.5;letter-spacing:-.01em;margin-bottom:26px}
.inhalt ul{margin:0 0 14px 20px;font-size:17px;line-height:1.6;max-width:62ch}
.inhalt li{margin-bottom:6px}
.inhalt a{text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
.inhalt a:hover,.inhalt a:focus-visible{border-bottom-color:var(--ink)}
.inhalt .klein{font-size:13px;line-height:1.6;color:var(--grau);max-width:62ch}
.adresse{font-style:normal;font-size:17px;line-height:1.75;margin-bottom:14px}

/* ---------- Fuß ---------- */
.fuss{
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
  padding:22px var(--rand);
  position:relative;
}
.fuss::before{
  content:"";position:absolute;top:0;
  left:var(--rand);right:var(--rand);height:var(--strich);background:var(--line);
}
.meta{font-size:12px;letter-spacing:.05em;text-transform:uppercase;line-height:1.65}

/* ---------- CTA mit dem Arm ----------
   Derzeit auf keiner Seite im Einsatz. Bleibt stehen, weil der Arm auf der
   Hauptseite wieder gebraucht wird — dort das <a class="cta"> aus einer
   frueheren Fassung der index.html uebernehmen.                       */
.cta{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:10px;
  text-decoration:none;margin-top:20px;
}
.cta__arm{width:92px;display:block;transition:transform .38s cubic-bezier(.22,.61,.36,1)}
.cta__label{
  font-size:14px;letter-spacing:.04em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid var(--line);transition:border-color .2s;
}
.cta:hover .cta__arm,.cta:focus-visible .cta__arm{transform:translateX(10px)}
.cta:hover .cta__label,.cta:focus-visible .cta__label{border-bottom-color:var(--ink)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:8px}

.sig{flex:none;align-self:flex-end}
.sig img{display:block;height:clamp(30px,3.2vw,48px);width:auto}

@media (max-width:640px){
  .fuss{flex-direction:column;align-items:flex-start;gap:24px}
  .sig{align-self:flex-end}
}

@media (prefers-reduced-motion:reduce){
  .kreis video{display:none}
  .kreis{background:#000 url("media/steinlaus-poster.jpg") center/cover no-repeat}
  .cta__arm{transition:none}
}