/* Skriptify – Grundfarben & Layout */
:root {
  --bg: #FFFFFF;
  --bg-soft: #FAFAFA;
  --text: #222222;
  --muted: #6b7280;
  --accent: #0096A7;
  --accent-hover: #007986;
  --cta: #F3722C;
  --cta-hover: #d45e20;
  --border: #E5E5E5;
}

.skr { color: var(--text); background: var(--bg); }
.skr .wrap { max-width: 72rem; margin-inline: auto; padding: 3rem 1rem; }
.skr .readable { max-width: 68ch; }
.skr p { line-height: 1.65; margin: .5em 0 .9em; }
.skr a { color: var(--accent); text-decoration: none; }
.skr a:hover { color: var(--accent-hover); }

.skr .btn {
  display: inline-block; padding: .8rem 1.2rem; border-radius: 999px;
  font-weight: 600; border: none; color: #fff; background: var(--cta);
}
.skr .btn:hover { background: var(--cta-hover); }

.skr .cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width:980px) {
  .skr .cards { grid-template-columns: 1fr 1fr; }
}
.skr .card {
  padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
}

.skr hr {
  border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0;
}

.skr.hero { position: relative; background: var(--bg); }
@media (min-width:980px) {
  .skr.hero::after {
    content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none;
    background: url("https://skriptify.de/wp-content/uploads/2025/08/wave_petrol_1600px.png") center/1200px auto no-repeat;
    transform: translateY(8%);
  }
}