/* =====================================================================
   /websites/: Leistungs-Unterseite im Look der Startseite.
   Baut auf start.css auf; hier nur, was es dort nicht gibt. Klassen mit ws-Praefix.
   Seitenakzent: --seite (Farbe der Websites-Leistungskarte, #EA580C), Grundakzent bleibt Violett.
   #EA580C reicht auf Weiss nicht fuer kleinen Text, deshalb Text in --seite-text (#C2410C, 5,2:1).
   Bilder: echte Screenshots eigener Seiten unter assets/images/seiten/websites/.
   ===================================================================== */

.seite-leistung { --seite-text: #C2410C; }

/* ---------- Hero: links Text, rechts Browser und Handy mit echten Screenshots ---------- */
.ws-hero { text-align: left; }
.ws-hero-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.ws-hero h1 { font-size: clamp(40px, 4.4vw, 62px); max-width: none; margin: 0 0 22px; }
.ws-hero .lead { margin: 0; max-width: 30em; }
.ws-hero .hero-knoepfe { justify-content: flex-start; }
.ws-hero .kicker { color: var(--seite-text); }
.ws-hero .unterstrichen svg { color: var(--seite); }
.ws-krumen { display: flex; gap: 8px; margin-bottom: 18px; font-size: 14px; color: var(--ink-3); }
.ws-krumen a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }

.ws-buehne { position: relative; padding: 44px 0 26px; }
.ws-browser { position: relative; margin: 0; padding: 0 6px 6px; border: 1px solid var(--line-mid); border-radius: 16px; background: var(--paper); box-shadow: 0 50px 90px -60px rgba(75, 24, 184, .45); }
.ws-browser-leiste { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 6px; }
.ws-punkte { display: flex; gap: 6px; flex: none; }
.ws-punkte i { display: block; width: 9px; height: 9px; border-radius: 50%; background: #E3DCEF; }
.ws-adresse { flex: 0 1 240px; margin: 0 auto; padding: 4px 12px; border-radius: 999px; background: var(--tint-weak); border: 1px solid var(--line); font: 600 12px/1.2 Manrope, sans-serif; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-browser img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; background: var(--tint-weak); }
.ws-buehne .ws-browser { width: 88%; }
.ws-handy { position: absolute; right: 0; bottom: 0; z-index: 1; width: 27%; margin: 0; padding: 5px; border-radius: 26px; background: #17102B; box-shadow: 0 30px 60px -28px rgba(23, 16, 43, .6); }
.ws-handy::before { content: ""; position: absolute; top: 11px; left: 50%; z-index: 1; width: 28%; height: 7px; border-radius: 99px; background: #17102B; transform: translateX(-50%); }
.ws-handy img { width: 100%; aspect-ratio: 9 / 19.5; object-fit: cover; object-position: top; border-radius: 21px; background: var(--paper); }
.ws-notiz { left: 6px; top: 0; transform: rotate(-4deg); color: var(--seite-text); }
.ws-notiz svg { left: calc(100% + 4px); top: 6px; width: 48px; height: 42px; }

/* ---------- Problem: Notizzettel mit Karo ---------- */
.ws-problem { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 56px; }
.ws-zettel { position: relative; isolation: isolate; overflow: hidden; list-style: none; display: grid; gap: 20px; padding: clamp(24px, 3.4vw, 40px); border-radius: var(--r-big); background: var(--paper); border: 1px solid var(--line-mid); box-shadow: 0 30px 60px -48px rgba(23, 16, 43, .35); }
.ws-zettel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, #ECE7F4 1px, transparent 1px), linear-gradient(to bottom, #ECE7F4 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 80% at 100% 0%, #000 30%, transparent 80%);
}
.ws-zettel li { display: flex; gap: 14px; align-items: flex-start; }
.ws-zettel p { font: 500 clamp(17px, 1.6vw, 19px)/1.45 var(--head); letter-spacing: -.01em; color: var(--ink); }
.ws-kreuz { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--seite) 50%, #fff); background: color-mix(in srgb, var(--seite) 8%, #fff); color: var(--seite-text); }
.ws-kreuz .ic { width: 15px; height: 15px; }

/* ---------- Verstaerken ---------- */
.ws-folgen { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.ws-folge-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 12px; background: color-mix(in srgb, var(--seite) 12%, #fff); color: var(--seite-text); }
.ws-folge-ic .ic { width: 22px; height: 22px; }
.ws-folge h3 { font-size: 22px; margin-bottom: 8px; }
.ws-folge p { font-size: 16px; max-width: 30em; }

/* ---------- Loesung: Bento aus Leistungskarten (Aufbau aus start.css) ---------- */
.ws-randnotiz { color: var(--seite-text); }
.ws-bento { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ws-karte--breit h3 { font-size: clamp(24px, 2.4vw, 30px); }
.ws-karte--breit p { font-size: 16px; max-width: 36em; }
.ws-punkte-liste li { color: var(--seite-text); }
.ws-banner { display: flex; gap: 8px; margin-top: 12px; }
.ws-banner span { flex: 1; padding: 10px; border-radius: var(--r-btn); background: var(--paper); border: 1px solid var(--line-mid); font: 600 13px/1 Manrope, sans-serif; color: var(--ink); text-align: center; }
.ws-pflege-person { display: inline-flex; align-items: center; gap: 12px; margin-top: 12px; }
.ws-pflege-person img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--line-mid); }
.ws-pflege-person span { font: 600 25px/1 Caveat, cursive; color: var(--accent); transform: rotate(-4deg); }

/* ---------- Ablauf: Schritte aus start.css in der Seitenfarbe ---------- */
.ws-schritte .schritt-nr { color: var(--seite-text); background: color-mix(in srgb, var(--seite) 10%, #fff); border-color: color-mix(in srgb, var(--seite) 45%, #fff); }
.ws-schritte .schritt-notiz { color: var(--seite-text); }

/* ---------- Beispiele: nur eigene Seiten ---------- */
.ws-beispiele { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.ws-beispiel { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; padding: clamp(20px, 2.6vw, 32px); border-radius: var(--r-big); background: var(--paper); border: 1px solid var(--line-mid); }
.ws-beispiel h3 { font-size: clamp(24px, 2.4vw, 30px); margin-bottom: 8px; }
.ws-beispiel p:not(.ws-art) { font-size: 16px; max-width: 32em; margin-bottom: 18px; }
.ws-beispiel .ws-browser { box-shadow: 0 30px 60px -48px rgba(75, 24, 184, .5); }
.ws-art { font: 600 13px/1.3 Manrope, sans-serif; color: var(--seite-text); margin-bottom: 8px; }
.ws-link { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 Manrope, sans-serif; color: var(--accent-deep); }
.ws-link .ic { width: 16px; height: 16px; }
.ws-beispiel-bild { position: relative; padding-bottom: 22px; }
.ws-beispiel-bild .ws-browser { width: 86%; }
.ws-handy--klein { width: 25%; border-radius: 22px; padding: 4px; }
.ws-handy--klein img { border-radius: 18px; }
.ws-beispiel--hier {
  justify-content: flex-start; padding-top: 64px;
  background:
    radial-gradient(ellipse 90% 80% at 100% 0%, color-mix(in srgb, var(--seite) 22%, transparent) 0, transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--seite) 8%, #fff) 0%, #fff 75%);
}
.ws-beispiel--hier { gap: 0; }
.ws-beispiel--hier > .ws-browser { margin-bottom: 24px; }
.ws-beispiel--hier .ws-art { margin-top: auto; }
.ws-hier-notiz { position: absolute; top: 26px; right: 26px; font: 600 26px/1 Caveat, cursive; color: var(--seite-text); transform: rotate(-5deg); }

/* ---------- Angebot ---------- */
.ws-angebot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: clamp(26px, 4vw, 48px); border-radius: var(--r-big); border: 2px solid var(--accent); background: radial-gradient(ellipse 60% 90% at 100% 0%, color-mix(in srgb, var(--seite) 12%, transparent) 0, transparent 70%), var(--paper); }
.ws-angebot-kopf h2 { margin-bottom: 14px; font-size: clamp(32px, 3.6vw, 44px); }
.ws-angebot-kopf p { font-size: 17px; max-width: 24em; margin-bottom: 24px; }
.ws-angebot-gruppe h3 { font-size: 20px; margin-bottom: 16px; }
.ws-liste { list-style: none; display: grid; gap: 12px; }
.ws-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink); }
.ws-haken { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--seite) 14%, #fff); color: var(--seite-text); }
.ws-haken svg { width: 15px; height: 15px; }

/* Schluss-CTA: laengere Ueberschrift als auf der Startseite, daher etwas kleiner */
.seite-leistung .kontakt h2 { font-size: clamp(34px, 4.4vw, 52px); }

/* ---------- Ab Tablet ---------- */
@media (min-width: 760px) {
  .ws-folgen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 7 Karten in zwei Spalten: die erste breit, dann drei volle Reihen */
  .ws-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-karte--breit:first-child { grid-column: 1 / -1; }
  .ws-beispiele { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ws-beispiel--gross { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; }
  .ws-beispiel:nth-child(2) { grid-column: span 7; }
  .ws-beispiel--hier { grid-column: span 5; }
  .ws-angebot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-angebot-kopf { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .ws-hero-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; }
  .ws-problem { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  /* 7 Karten in drei Spalten: breit + eine, drei, eine + breit, keine Luecke */
  .ws-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-karte--breit { grid-column: span 2; }
  .ws-karte--breit:first-child { grid-column: span 2; }
  .ws-angebot { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 4fr); gap: 48px; align-items: start; }
  .ws-angebot-kopf { grid-column: auto; }
}

/* ---------- Handy ---------- */
@media (max-width: 759px) {
  .ws-buehne { padding-top: 38px; }
  .ws-notiz { font-size: 21px; }
  .ws-notiz svg { display: none; }
  .ws-handy { width: 32%; border-radius: 20px; padding: 4px; }
  .ws-handy img { border-radius: 16px; }
  .ws-handy::before { top: 9px; height: 5px; }
  .ws-beispiel-bild .ws-browser { width: 90%; }
  .ws-handy--klein { width: 30%; }
  .ws-browser-leiste { height: 28px; gap: 8px; }
  .ws-punkte i { width: 7px; height: 7px; }
  .ws-adresse { font-size: 11px; padding: 3px 10px; }
  .ws-beispiel--hier { min-height: 0; padding-top: 64px; }
}