/* Website auftragsbutler.de: baut auf Tabler und dem Theme aus libs/rahmen auf (Schrift, Farben, Linien) und ergänzt
   nur das Layout einer öffentlichen Seite. Keine Adresse außerhalb dieses Servers (url() nur relativ). */

.web { font-size: 15px; line-height: 1.55; }
.web h1, .web h2, .web h3 { color: var(--text-1); letter-spacing: -0.01em; }
.web p { color: var(--text-2); }

/* --- Kopf ------------------------------------------------------------------------- */
.web-kopf {
  position: sticky; top: 0; z-index: 10;
  background: rgba(240, 238, 234, .92);
  border-bottom: 1px solid var(--linie);
  backdrop-filter: saturate(140%) blur(6px);
}
.web-kopf-innen { display: flex; align-items: center; gap: 24px; height: var(--kopf-hoehe); }
.web-marke { font-weight: 600; font-size: 17px; color: var(--text-1); }
.web-marke:hover { color: var(--text-1); }
.web-nav { display: flex; gap: 20px; margin-left: auto; }
.web-nav a { color: var(--text-2); }
.web-nav a:hover { color: var(--text-1); }

/* --- Held ------------------------------------------------------------------------- */
.web-held { padding: 72px 0 40px; }
.web-oberzeile { font-weight: 500; color: var(--tblr-primary) !important; margin-bottom: 12px; }
.web-held h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; font-weight: 600; max-width: 22ch; margin-bottom: 20px; }
.web-lead { font-size: 18px; max-width: 60ch; margin-bottom: 28px; }
.web-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.web .btn { gap: 6px; }

/* --- Abschnitte ------------------------------------------------------------------- */
.web-abschnitt { padding: 32px 0; }
.web-titel { font-size: 26px; font-weight: 600; margin-bottom: 6px; }
.web-untertitel { margin-bottom: 24px; max-width: 70ch; }
.web .card { border: 1px solid var(--linie); border-radius: var(--tblr-border-radius-lg); background: var(--tblr-bg-surface); }
.web .card-body { padding: 24px; }
.web-symbol {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--tblr-primary-lt); color: var(--tblr-primary);
}
.web-symbol .ti { font-size: 22px; vertical-align: 0; }

.web-beispiel-kopf, .web-app-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.web-beispiel h2 { font-size: 20px; font-weight: 600; margin: 0; }
.web-beispiel p { max-width: 75ch; }

.web-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.web-app h3 { font-size: 18px; font-weight: 600; margin: 0; }
.web-app p:last-child { margin-bottom: 0; }
.web-app { scroll-margin-top: calc(var(--kopf-hoehe) + 16px); }
#apps, #ablauf, #beispiel { scroll-margin-top: var(--kopf-hoehe); }

/* --- Ablauf ----------------------------------------------------------------------- */
.web-ablauf {
  list-style: none; padding: 0; margin: 0 0 20px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; counter-reset: schritt;
}
.web-schritt { position: relative; }
.web-schritt .card-body { padding: 18px; }
.web-schritt-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.web-schritt-kopf h3 { font-size: 16px; font-weight: 600; margin: 0; }
.web-schritt-kopf .ti { color: var(--tblr-primary); font-size: 18px; }
.web-nummer {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--text-1); color: #fff; font-size: 12px; font-weight: 600;
}
.web-in { flex-basis: 100%; font-size: 12.5px; color: var(--text-3); }
.web-schritt p { font-size: 14px; margin: 0; }
/* Pfeil zwischen den Schritten */
.web-schritt:not(:last-child)::after {
  content: "\2192"; position: absolute; right: -11px; top: 22px; z-index: 1;
  color: var(--text-4); font-size: 16px; background: var(--grund); line-height: 1;
}
.web-hinweis { display: flex; gap: 8px; align-items: flex-start; max-width: 80ch; }
.web-hinweis .ti { margin-top: 3px; color: var(--text-3); }

.web-schluss { padding-bottom: 64px; }

/* --- Rechtliches und 404 ---------------------------------------------------------- */
.web-rechtliches { padding: 56px 0 80px; min-height: 55vh; }
.web-rechtliches h1 { font-size: 32px; font-weight: 600; margin-bottom: 20px; }
.web-folgt { display: flex; gap: 10px; align-items: flex-start; max-width: 70ch; }
.web-folgt .ti { font-size: 20px; }

/* --- Fuß -------------------------------------------------------------------------- */
.web-fuss { border-top: 1px solid var(--linie); background: var(--leiste); color: var(--text-3); padding: 20px 0; font-size: 14px; }
.web-fuss-innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.web-fuss nav { display: flex; gap: 20px; }
.web-fuss a { color: var(--text-2); }

/* --- Handy und Tablet ------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .web-ablauf { grid-template-columns: 1fr; }
  .web-schritt:not(:last-child)::after { content: "\2193"; right: auto; left: 28px; top: auto; bottom: -13px; }
}
@media (max-width: 575.98px) {
  .web-nav { display: none; }
  .web-kopf-innen { justify-content: space-between; }
  .web-held { padding: 40px 0 24px; }
  .web-lead { font-size: 16px; }
  .web .card-body { padding: 18px; }
  .web-apps { grid-template-columns: 1fr; }
}