/* Programmatic-SEO Seiten, baut auf den Tokens aus styles.css auf. */

/* Der weisse, dunkelblau beschriftete Header aus styles.css gilt hier
   unverändert, .site-header--solid ist nur ein historischer Marker,
   keine eigene Farbgebung mehr nötig. */

.crumbs{padding:var(--space-3) var(--space-4);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.crumbs li+li::before{content:"/";opacity:.4;margin-right:8px;}
.crumbs a{border-bottom:1px solid var(--line);}
.crumbs [aria-current]{opacity:.55;}

.page-head{padding:var(--space-4) 0 var(--space-6);}
.page-head h1{
  font-family:var(--font-display);font-weight:350;
  font-size:clamp(38px,6.4vw,76px);line-height:1.02;letter-spacing:-.02em;
  margin:var(--space-2) 0 var(--space-3);
}
.page-head h1 em{font-style:italic;color:var(--accent);}
.lede{max-width:62ch;font-size:clamp(16px,1.7vw,20px);line-height:1.6;opacity:.82;}
/* Mehrere Absaetze hintereinander (Leistung x Ort, Hubs): ohne Abstand lasen
   sich drei Absaetze wie eine Textwand, weil *{margin:0} global gilt. */
.lede + .lede{margin-top:1em;}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);}

.band{padding:var(--space-6) 0;border-top:1px solid var(--line);}
.band-tint{background:var(--alt);}
.band-dark{background:var(--ink);color:var(--cream);border-top:none;}
.band h2{
  font-family:var(--font-display);font-weight:350;
  font-size:clamp(26px,3.4vw,40px);line-height:1.1;letter-spacing:-.015em;
  margin-bottom:var(--space-3);
}
.band-dark .big-statement{
  font-family:var(--font-display);font-style:italic;font-weight:350;
  font-size:clamp(24px,3.6vw,44px);line-height:1.25;max-width:20ch;
}
.muted{opacity:.6;font-size:14px;margin-bottom:var(--space-3);}

.two-col{display:grid;grid-template-columns:1.4fr .9fr;gap:var(--space-5);align-items:start;}
.tick-list{list-style:none;display:grid;gap:14px;max-width:56ch;}
.tick-list li{padding-left:26px;position:relative;line-height:1.55;}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:12px;height:1px;background:var(--accent);
}

.fact-card{border:1px solid var(--line);padding:var(--space-3);background:var(--cream);}
.fact-card h2{font-size:16px;font-family:var(--font-body);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--space-2);}
.fact-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-2);font-size:14px;}
.fact-card dt{opacity:.55;white-space:nowrap;}
.fact-card dd{font-weight:500;}

.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);}
.steps li{counter-increment:s;border-top:1px solid var(--line);padding-top:var(--space-2);}
.steps li::before{content:"0" counter(s);font-size:12px;letter-spacing:.16em;color:var(--accent);}
.steps h3{font-family:var(--font-display);font-weight:500;font-size:22px;margin:6px 0 8px;}
.steps p{opacity:.75;line-height:1.55;}

.faq details{border-top:1px solid var(--line);padding:var(--space-2) 0;}
.faq summary{cursor:pointer;font-weight:500;font-size:17px;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:44px;}
.faq summary::-webkit-details-marker{display:none;}
/* Das Zeichen tauscht nicht hart von + auf -, es dreht sich mit dem
   Öffnen: der senkrechte Strich fällt zusammen, während sich das Kreuz
   um 90 Grad legt. --faq-progress schreibt die Spring in script.js Bild
   für Bild; ohne JavaScript setzt die [open]-Regel darunter den Endwert. */
.faq summary::after{
  content:"";
  flex:0 0 auto;
  width:13px;height:13px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/100% 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px calc(100% - 100% * var(--faq-progress,0)) no-repeat;
  transform:rotate(calc(var(--faq-progress,0) * 90deg));
}
.faq details[open]{--faq-progress:1;}
/* Die Hülle, deren Höhe die Spring führt. */
.faq-panel{overflow:hidden;}
.faq p{margin-top:12px;max-width:66ch;opacity:.8;line-height:1.6;}

.link-matrix{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);}
.link-list{list-style:none;display:grid;gap:10px;}
.link-list.cols{grid-template-columns:repeat(2,1fr);}
.link-list a{border-bottom:1px solid var(--line);padding-bottom:3px;}
.link-list a:hover{color:var(--accent);border-color:var(--accent);}
/* .more-link steht in styles.css: die Startseite laedt diese Datei nicht. */

.ort-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.ort-grid a{
  display:block;padding:var(--space-2) var(--space-3);background:var(--cream);height:100%;
  transition:background .2s var(--ease), var(--press);
}
.ort-grid a:hover{background:var(--ink);color:var(--cream);}
.ort-grid a:active{transform:scale(.985);}
.ort-grid strong{display:block;font-family:var(--font-display);font-size:20px;font-weight:500;}
.ort-grid span{font-size:12px;opacity:.55;}
.ort-grid.big a{padding:var(--space-3);}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.svc-card{
  display:block;padding:var(--space-3);background:var(--cream);
  transition:background .2s var(--ease), var(--press);
}
.svc-card:hover{background:rgba(29,78,216,.06);}
.svc-card:active{transform:scale(.99);}
.svc-card h2,.svc-card h3{font-family:var(--font-display);font-weight:500;font-size:22px;margin-bottom:10px;}
.svc-card p{opacity:.72;line-height:1.55;font-size:15px;}

.cta-band{background:var(--ink);color:var(--cream);padding:var(--space-6) 0;text-align:center;}
.cta-band h2{font-family:var(--font-display);font-weight:350;font-size:clamp(26px,3.6vw,42px);margin-bottom:var(--space-2);}
.cta-band p{color:var(--cream);opacity:1;font-size:16px;}
.cta-band-actions{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-3);flex-wrap:wrap;}
.cta-band .btn{border-color:var(--line-dark);color:var(--cream);}
.cta-band .btn-solid{background:var(--accent);border-color:var(--accent);color:var(--cream);}

@media (max-width:900px){
  .two-col,.link-matrix{grid-template-columns:1fr;gap:var(--space-4);}
  .steps{grid-template-columns:1fr;gap:var(--space-3);}
  .link-list.cols{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  .ort-grid a,.svc-card{transition:background .2s ease;}
  .ort-grid a:active,.svc-card:active{transform:none;}
  /* Kein Drehen, nur der Endzustand: - wenn offen, + wenn zu. */
  .faq summary::after{transform:none;}
}

@media (prefers-contrast:more){
  .muted,.fact-card dt,.steps p,.svc-card p{opacity:1;}
}

/* --- Mobile-Feinschliff (2026-09-22) ---------------------------------- */

@media (max-width:600px){
  /* .crumbs hat .container überschrieben und behielt 40px Seitenrand,
     während der Inhalt darunter auf 24px stand. Die Brotkrumen standen
     dadurch eingerückt zur eigenen Überschrift. */
  .crumbs{padding:var(--space-2) var(--space-3);}

  /* Wie section in styles.css: 96px oben und unten sind am Handy zu viel. */
  .band,.cta-band{padding:var(--space-5) 0;}
  .page-head{padding:var(--space-3) 0 var(--space-5);}

  /* Lange Werte in der Faktenkarte (PEC, MwSt.-Nummer, Adresse) brauchen
     einen Umbruchpunkt, sonst schieben sie die Karte über den Rand. */
  .fact-card dd{overflow-wrap:anywhere;}
  .fact-card{padding:var(--space-2);}
}

@media (pointer:coarse){
  .link-list a{display:inline-block;min-height:28px;}
}