/* =====================================================================
   auto-seite.css · Seitengeruest aller Seiten unter /automatisierung/
   Besitzer: Builder 1 (Branch claude/auto-hub). Bitte nicht aendern,
   sondern Wuensche ueber den Geschaeftsfuehrer melden.

   Voraussetzung: /assets/stil.css (Farben, Schriften, .mass, .taste)
   wird VOR dieser Datei geladen. Hier stehen nur Bausteine, die es in
   stil.css nicht gibt.

   BAUSTEINE (Klassen)
   .auto-held            Seitenkopf einer Automationsseite (dunkel).
     .auto-held-raster   zwei Spalten ab 62rem: Text links, Bild rechts
     .auto-held-text     linke Spalte
     .auto-held-buehne   rechte Spalte (SVG oder Demo)
     .auto-wo            Brotkrumen-Zeile (Start > Automatisierung > ...)
     .auto-marke         kleine Zeile ueber dem h1 («Automation 03»)
     .auto-problem       Problem-Satz in Kundensprache, als Zitat
   .auto-teil            Abschnitt, dunkel (Grund --nacht).
   .auto-teil--hell      Abschnitt, hell (Grund --papier, Schrift --tinte).
     .auto-kopfzeile     Strich + h2 + Fuehrungssatz (wie .kopfzeile)
     .auto-strich        der Akzentstrich (zieht sich mit auto-seite.js auf)
     .auto-still         ruhiger Text, Farbe passend zum Grund
   .prozess              SVG-Prozessgrafik (siehe Muster unten).
   .auto-schritte        nummerierte Schrittliste (ol) unter einer Grafik
   .auto-zwei            zwei Spalten ab 52rem («Was wir bauen / was Sie tun»)
   .bestellen            Preis und Bestellknopf. Faerbt sich SELBST ein
                         (heller Kasten), funktioniert also auf hellem und
                         dunklem Grund. Trotzdem bevorzugt in .auto-teil--hell.
   .auto-faq             Fragen (details/summary). Faerbt sich selbst ein,
                         gehoert aber in .auto-teil--hell (CLAUDE.md 7a).
   .auto-hinweis         schmaler Hinweiskasten («Beispiel, frei erfunden»)

   MUSTER Prozessgrafik (inline, damit auto-seite.js zeichnen kann):
     <svg class="prozess" viewBox="0 0 640 120" role="img" aria-labelledby="p-t">
       <title id="p-t">Ablauf: Anfrage, Vorlage, Freigabe, PDF</title>
       <path class="prozess-bahn"  d="M40 60 H600"/>
       <path class="prozess-linie" data-zeichnen d="M40 60 H600"/>
       <g class="prozess-station" data-station>
         <circle cx="40" cy="60" r="18"/><text x="40" y="104">Anfrage</text>
       </g>
       <g class="prozess-station prozess-station--frei" data-station>...</g>
     </svg>
   --frei markiert den Schritt, an dem der Mensch freigibt (Doppelring).
   Ohne JavaScript ist die Grafik vollstaendig gezeichnet.

   BESTELLEN (Vertrag, AUTOMATION-TEAM-PROMPTS.md):
     <div class="bestellen">
       <p class="bestellen-titel">Was es kostet</p>
       <div class="bestellen-preise">
         <p class="bestellen-preis"><b>CHF 490</b><span>Einrichtung, einmalig</span></p>
         <p class="bestellen-preis"><b>CHF 149</b><span>im Monat, monatlich kuendbar</span></p>
       </div>
       <a class="taste" href="/kontakt.html?paket=auto-KEY"
          data-bestell="AUTO_KEY">Jetzt bestellen</a>  (Link aus assets/bestellen/links.js)
       <p class="bestellen-fuss">Endpreise ohne Mehrwertsteuer. ...</p>
     </div>

   Bewegung steht in auto-seite.js. Diese Datei versteckt NICHTS: jede
   Regel, die etwas unsichtbar macht, haengt an html[data-auto="an"],
   und das setzt erst das Skript.
   ===================================================================== */

:root {
  --auto-kante: var(--nacht-linie);
  --auto-flaeche: var(--nacht-2);
  --auto-kurve: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Abschnitte ------------------------------------------------ */

.auto-teil {
  position: relative;
  /* Auftritte von der Seite duerfen nie waagrecht ueberstehen. clip statt
     hidden: position: sticky im Abschnitt funktioniert weiter. */
  overflow-x: clip;
  padding-block: var(--luft);
  background: var(--nacht);
  color: var(--auf-nacht);
}
.auto-teil + .auto-teil:not(.auto-teil--hell) { border-top: 1px solid var(--nacht-linie); }
.auto-teil--hell {
  background: var(--papier);
  color: var(--tinte);
  --auto-kante: var(--papier-linie);
  --auto-flaeche: #FFFFFF;
}
.auto-teil--hell h2,
.auto-teil--hell h3 { color: var(--tinte); }
.auto-teil--hell a:not(.taste) { color: var(--akzent-text); }
.auto-teil--hell a:not(.taste):hover { color: var(--akzent-tief); }
.auto-teil--hell :where(a, button, summary, input, [tabindex]):focus-visible { outline-color: var(--akzent-text); }

.auto-still { color: var(--auf-nacht-still); }
.auto-teil--hell .auto-still { color: var(--auf-papier-still); }

.auto-kopfzeile { max-width: 46rem; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.auto-strich {
  display: block;
  width: 3.5rem;
  height: 3px;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
  margin-bottom: 1.5rem;
  transform-origin: left center;
}
.auto-kopfzeile h2 { font-size: clamp(2.1rem, 1.3rem + 3.1vw, 3.4rem); margin-bottom: 1rem; }
.auto-kopfzeile p { font-size: 1.06rem; max-width: 40rem; }
.auto-kopfzeile p + p { margin-top: .8rem; }

/* ---------- Seitenkopf ------------------------------------------------ */

.auto-held {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  background: var(--nacht);
  color: var(--auf-nacht);
}
.auto-held::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* feste obere Kante statt Prozent: wächst die Bühne beim Laden, verschob sich sonst die
     ganze Fläche (CLS 0,15 gemessen) */
  inset: -12rem -20% auto -20%;
  height: 170%;
  background:
    radial-gradient(46% 55% at 80% 18%, rgba(41, 89, 196, .34) 0%, rgba(41, 89, 196, 0) 70%),
    radial-gradient(30% 36% at 96% 2%, rgba(108, 231, 250, .16) 0%, rgba(108, 231, 250, 0) 70%);
  pointer-events: none;
}
.auto-held-raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) {
  .auto-held-raster { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}
.auto-held-text { min-width: 0; }
.auto-held-buehne { min-width: 0; position: relative; }
.auto-held h1 {
  font-size: clamp(2.45rem, 1.4rem + 4.3vw, 4.5rem);
  max-width: 15ch;
}
.auto-held h1 em { font-style: italic; color: var(--cyan); }
.auto-held .auto-fuehrung {
  margin-top: 1.4rem;
  max-width: 34em;
  font-size: clamp(1.04rem, 1rem + .35vw, 1.2rem);
  color: var(--auf-nacht-still);
}
.auto-held .tun { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }

.auto-wo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  margin: 0 0 1.2rem;
  font-size: .85rem;
  color: var(--auf-nacht-still);
}
.auto-wo a { color: var(--auf-nacht-still); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
.auto-wo a:hover { color: var(--cyan); }

.auto-marke {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan);
}
.auto-marke::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
}
.auto-teil--hell .auto-marke { color: var(--akzent-text); }

.auto-problem {
  margin: 1.4rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--koenig);
  font-family: var(--anzeige);
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  line-height: 1.3;
  color: var(--auf-nacht);
  max-width: 32em;
}
.auto-teil--hell .auto-problem { color: var(--tinte); }

/* ---------- Prozessgrafik --------------------------------------------- */

.prozess {
  --prozess-bahn: #22365A;
  --prozess-linie: var(--cyan);
  --prozess-punkt: var(--nacht-3);
  --prozess-rand: var(--koenig);
  --prozess-text: var(--auf-nacht);
  --prozess-text-still: var(--auf-nacht-still);
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--schrift);
}
.auto-teil--hell .prozess,
.prozess--hell {
  --prozess-bahn: var(--papier-linie);
  --prozess-linie: var(--koenig);
  --prozess-punkt: #FFFFFF;
  --prozess-rand: var(--koenig);
  --prozess-text: var(--tinte);
  --prozess-text-still: var(--auf-papier-still);
}
.prozess .prozess-bahn {
  fill: none;
  stroke: var(--prozess-bahn);
  stroke-width: 3;
  stroke-linecap: round;
}
.prozess .prozess-linie,
.prozess [data-zeichnen] {
  fill: none;
  stroke: var(--prozess-linie);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prozess .prozess-station circle {
  fill: var(--prozess-punkt);
  stroke: var(--prozess-rand);
  stroke-width: 2.5;
}
.prozess .prozess-station--frei circle { stroke: var(--prozess-linie); stroke-width: 3; }
.prozess .prozess-station--frei .prozess-ring { fill: none; stroke: var(--prozess-linie); stroke-width: 1.5; }
.prozess .prozess-station .prozess-zeichen {
  fill: none;
  stroke: var(--prozess-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prozess text {
  fill: var(--prozess-text);
  font-size: 15px;
  font-weight: 500;
  text-anchor: middle;
}
.prozess text.prozess-klein { fill: var(--prozess-text-still); font-size: 13px; font-weight: 400; }
.prozess text.prozess-nr { font-weight: 600; font-size: 16px; dominant-baseline: central; }

/* ---------- Schritte -------------------------------------------------- */

.auto-schritte {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--auto-kante);
  border: 1px solid var(--auto-kante);
  counter-reset: auto-schritt;
}
.auto-schritte > li {
  counter-increment: auto-schritt;
  background: var(--auto-flaeche);
  padding: clamp(1.15rem, 2vw, 1.6rem);
  display: grid;
  gap: .4rem;
}
.auto-schritte > li::before {
  content: counter(auto-schritt, decimal-leading-zero);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--cyan);
}
.auto-teil--hell .auto-schritte > li::before { color: var(--akzent-text); }
.auto-schritte h3 { font-size: 1.3rem; }
.auto-schritte p { color: var(--auf-nacht-still); font-size: .97rem; }
.auto-teil--hell .auto-schritte p { color: var(--auf-papier-still); }
@media (min-width: 46rem) { .auto-schritte--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) {
  .auto-schritte--3 { grid-template-columns: repeat(3, 1fr); }
  .auto-schritte--4 { grid-template-columns: repeat(4, 1fr); }
  .auto-schritte--5 { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 46rem) and (max-width: 57.99rem) {
  .auto-schritte--4 { grid-template-columns: repeat(2, 1fr); }
}

.auto-zwei { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 52rem) { .auto-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.auto-zwei h3 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-bottom: .9rem; }
.auto-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.auto-liste li { position: relative; padding-left: 1.6rem; }
.auto-liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .85rem;
  height: 2px;
  background: linear-gradient(90deg, var(--koenig), var(--cyan));
}

/* ---------- Bestellen ------------------------------------------------- */

.bestellen {
  background: var(--papier);
  color: var(--tinte);
  border: 1px solid var(--papier-linie);
  border-radius: 4px;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.1rem;
  max-width: 44rem;
  box-shadow: 0 30px 60px -40px rgba(7, 13, 26, .45);
}
.bestellen .bestellen-titel {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--akzent-text);
}
.bestellen-preise { display: grid; gap: 1rem; }
@media (min-width: 30rem) { .bestellen-preise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bestellen .bestellen-preis { margin: 0; display: grid; gap: .25rem; }
.bestellen .bestellen-preis b {
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 2.7rem);
  line-height: 1;
  color: var(--tinte);
}
.bestellen .bestellen-preis span { color: var(--auf-papier-still); font-size: .95rem; }
.bestellen .taste { justify-self: start; }
.bestellen .bestellen-fuss { margin: 0; color: var(--auf-papier-still); font-size: .9rem; }
.bestellen a:not(.taste) { color: var(--akzent-text); }
.bestellen :where(a, button):focus-visible { outline-color: var(--akzent-text); }

/* ---------- Fragen ---------------------------------------------------- */

.auto-faq {
  color: var(--tinte);
  background: var(--papier);
  border-top: 1px solid var(--papier-linie);
}
.auto-faq details { border-bottom: 1px solid var(--papier-linie); }
.auto-faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 1.15rem 3rem 1.15rem 0;
  font-family: var(--anzeige);
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem);
  line-height: 1.25;
  color: var(--tinte);
}
.auto-faq summary::-webkit-details-marker { display: none; }
.auto-faq summary .auto-faq-nr {
  flex: none;
  font-family: var(--schrift);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--akzent-text);
  min-width: 2rem;
}
/* Plus und Minus aus zwei Strichen, kein Zeichen im Text. */
.auto-faq summary::before,
.auto-faq summary::after {
  content: "";
  position: absolute;
  right: .5rem;
  top: 50%;
  width: 1rem;
  height: 2px;
  background: var(--akzent-text);
  transition: transform .3s var(--auto-kurve);
}
.auto-faq summary::after { transform: rotate(90deg); }
.auto-faq details[open] summary::after { transform: rotate(0deg); }
.auto-faq summary:focus-visible { outline: 3px solid var(--akzent-text); outline-offset: 2px; }
.auto-faq .auto-faq-antwort { padding: 0 0 1.4rem 3rem; max-width: 52rem; color: var(--auf-papier-still); }
.auto-faq .auto-faq-antwort p + p { margin-top: .7rem; }
.auto-faq .auto-faq-antwort a { color: var(--akzent-text); }
@media (max-width: 30rem) { .auto-faq .auto-faq-antwort { padding-left: 0; } }

/* ---------- Hinweis --------------------------------------------------- */

.auto-hinweis {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .8rem;
  border: 1px solid var(--taste-linie);
  border-radius: 2px;
  font-size: .85rem;
  color: var(--auf-nacht);
}
.auto-hinweis::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cyan); flex: none; }
.auto-teil--hell .auto-hinweis { border-color: var(--papier-linie); color: var(--tinte); }
.auto-teil--hell .auto-hinweis::before { background: var(--akzent-text); }

/* Nur fuer Vorleser. */
.auto-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Bewegung: nur mit Skript ---------------------------------- */

/* Der Strich startet mit Skript eingezogen, sonst steht er voll da. */
html[data-auto="an"] .auto-strich { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .auto-faq summary::before,
  .auto-faq summary::after { transition: none; }
}

@media print {
  .auto-held { padding-block: 1rem; }
  [data-auftritt], [data-auftritt] > * { opacity: 1 !important; visibility: visible !important; transform: none !important; clip-path: none !important; }
}