/* inner.css — Panzer IT: gemeinsames Layout für Innenseiten (ab Task 7)
   Setzt auf den Tokens/Utilities aus base.css/components.css auf
   (keine Neudefinition von Variablen). Wird von JEDER Innenseite geladen,
   die keine full-bleed-Startseite ist. */

/* ==========================================================================
   Skip-Link (Accessibility) — dupliziert aus home.css, da Innenseiten
   home.css nicht laden, das Header-Markup (mit Skip-Link) aber überall
   identisch eingebettet wird.
   ========================================================================== */
.skip-link{
  position:fixed; top:-3rem; left:var(--sp-2); z-index:300;
  background:var(--c-copper); color:#14110c; padding:.7em 1.2em;
  border-radius:8px; font-family:var(--font-display); font-weight:600;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:var(--sp-2); }

/* ==========================================================================
   Seiten-Hero — kompakt (kein full-bleed Bild). Der fixierte, transparente
   Header liegt darüber, daher reserviert padding-top genug Raum, damit
   Eyebrow/H1 nicht darunter verschwinden. Eigener dunkler Panel-Hintergrund
   plus dezenter Kupfer-Verlauf sorgt zusätzlich für Lesbarkeit ohne Bild.
   ========================================================================== */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--c-panel);
  border-bottom:1px solid var(--c-line);
  padding-block:clamp(9rem, 7rem + 8vw, 11.5rem) var(--sp-6);
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 12% 15%, rgba(184,115,51,.22), transparent 55%),
    radial-gradient(circle at 88% 85%, rgba(217,165,102,.12), transparent 50%);
}
.page-hero__inner{ position:relative; z-index:1; max-width:46rem; }
.page-hero__lead{
  color:var(--c-muted); margin-top:var(--sp-2); max-width:42ch;
  font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem);
}
.page-hero h1{ margin-top:var(--sp-2); }
.page-hero__deco{
  position:absolute; top:50%; right:4%; transform:translateY(-50%);
  z-index:0; opacity:.5; pointer-events:none;
}

@media (max-width:640px){
  .page-hero{ padding-block:clamp(7.5rem, 6rem + 6vw, 9rem) var(--sp-5); }
  .page-hero__deco{ width:120px; height:120px; opacity:.3; right:-1.5rem; }
}

/* ==========================================================================
   Prose — Fließtext-Breite für lesbare Absätze auf Innenseiten
   ========================================================================== */
.prose{ color:var(--c-muted); max-width:62ch; margin-top:var(--sp-2); }
.prose + .feature-list{ margin-top:var(--sp-3); }

/* ==========================================================================
   Feature-Liste — Häkchen-Liste (reines CSS, kein Icon-Font)
   ========================================================================== */
.feature-list{
  list-style:none; display:flex; flex-direction:column; gap:.65em;
  margin-top:var(--sp-3); max-width:56ch;
}
.feature-list li{ position:relative; padding-left:1.8em; color:var(--c-text); }
.feature-list li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:.6em; height:.34em;
  border-left:2px solid var(--c-copper); border-bottom:2px solid var(--c-copper);
  transform:rotate(-45deg);
}

/* ==========================================================================
   Leistungs-Abschnitte — Text/Feature-Liste + rotierendes Deko-SVG
   ========================================================================== */
.service + .service{ border-top:1px solid var(--c-line); }
.service__grid{
  display:grid; grid-template-columns:1.3fr 1fr; gap:var(--sp-6); align-items:center;
}
.service__deco{
  display:flex; align-items:center; justify-content:center; order:2;
}
.service__deco svg{ width:clamp(150px,16vw,220px); height:clamp(150px,16vw,220px); }
.service--reverse .service__content{ order:2; }
.service--reverse .service__deco{ order:1; }
.service__cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-4);
}
.service__actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-2);
}
.service__more{
  color:var(--c-copper); font-family:var(--font-display); font-weight:600;
  font-size:.92rem; transition:color .25s var(--ease);
}
.service__more:hover, .service__more:focus-visible{ color:var(--c-brass); }

@media (max-width:860px){
  .service__grid{ grid-template-columns:1fr; }
  .service__deco{ order:-1; }
  .service--reverse .service__deco{ order:-1; }
  .service--reverse .service__content{ order:2; }
  .service__deco svg{ width:130px; height:130px; }
}

/* ==========================================================================
   CTA-Panel — dunkles Panel, kupferner Akzent (wie Startseite, hier für
   Innenseiten dupliziert, da diese home.css nicht laden)
   ========================================================================== */
.cta-panel{
  position:relative; overflow:hidden; margin-top:var(--sp-7);
  background:var(--c-panel);
  border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line);
}
.cta-panel::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(184,115,51,.22), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(217,165,102,.14), transparent 50%);
}
.cta-panel__inner{
  position:relative; z-index:1; text-align:center;
  padding-block:var(--sp-7); max-width:44rem; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-3);
}
.cta-panel__inner p{ color:var(--c-muted); max-width:48ch; }