/* GITALIFY Runde 5 (Behzad 09./10.11.2026). Gilt nach runde4-seiten.css.
   1. Startseite: Abschnitt «Zu viele Ideen» (sein Bild 225, sein Text) mit Knopf zum Komplett-Service.
   2. Portfolio/Logos: vier Markenkarten (Präsentation + Logo) mit grosser Ansicht im Dialog.
   3. Services: siebte Leistung «Shopify & WordPress» → Kacheln mittig umbrechen statt einer leeren Lücke. */

/* ---------- 1. Zu viele Ideen ---------- */
/* Eigener, ruhiger Grund: endet oben und unten im selben Eisblau wie die Nachbarn (keine Kante zu «Services») */
.ideen {
  padding-top: clamp(8px, 1.4vw, 22px); padding-bottom: clamp(44px, 5vw, 72px);
  background:
    radial-gradient(45% 45% at 8% 30%, rgba(47, 123, 255, .08), rgba(47, 123, 255, 0) 70%),
    linear-gradient(180deg, var(--eis-1) 0%, #edf3fc 55%, var(--eis-1) 100%);
}
.ideen + .start-services { padding-top: 24px; }
/* eigene Ebene: der blaue Schein unter dem Bild (z-index -1) bleibt über dem Abschnittsgrund */
.ideen__innen { position: relative; z-index: 0; width: var(--r3-breite); margin-inline: auto; }
.ideen__frage { display: grid; grid-template-columns: minmax(0, 53fr) minmax(0, 47fr); gap: clamp(32px, 4.4vw, 68px); align-items: center; }
.ideen__bild {
  position: relative; margin: 0; padding: 10px; border-radius: 32px;
  background: linear-gradient(140deg, #ffffff 0%, #e4ecf8 100%); border: 1.5px solid #fff; box-shadow: var(--r4-glas-rand);
}
.ideen__bild::after {
  content: ""; position: absolute; inset: auto 12% -14px; height: 28px; border-radius: 50%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(47, 123, 255, .45), rgba(47, 123, 255, 0)); filter: blur(6px);
}
.ideen__bild img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; border-radius: 23px; }
.ideen__titel { margin: 0 0 22px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(30px, 3vw, 46px); line-height: 1.12; letter-spacing: -.012em; color: var(--r3-tinte); }
.ideen__titel-eins, .ideen__titel-zwei { display: block; }
/* Verlauf nur zwischen dunklen Blautönen (beide ≥ 4,5:1 auf dem Eisblau) */
.ideen__titel-zwei {
  margin-top: 4px; font-size: .72em; line-height: 1.2; color: #1648c4;
  background: linear-gradient(90deg, #1f5fe0 0%, #0f3aa8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ideen__absatz { margin: 0 0 14px; font-family: var(--font-body); font-size: 18px; line-height: 1.65; color: var(--r3-tinte-2); }
/* Betonte Zeile: Leiste links, ohne Fläche und ohne runde Ecken (sieht nicht wie ein Knopf aus) */
.ideen__betont {
  margin: 24px 0 0; padding: 4px 0 4px 18px; border-left: 4px solid #1f62e8;
  font-family: var(--font-heading); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; color: var(--r3-tinte);
}

.ideen__loesung {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
  gap: clamp(28px, 3.6vw, 56px); align-items: center; margin-top: clamp(48px, 5vw, 76px); padding: clamp(34px, 4vw, 60px);
  border-radius: 34px; color: #fff; background: var(--r4-dunkelglas); border: 1.5px solid rgba(170, 232, 255, .9);
  box-shadow: 0 0 0 1px rgba(56, 212, 255, .35), 0 0 36px rgba(56, 170, 255, .45), 0 30px 60px rgba(8, 30, 90, .25);
}
.ideen__licht {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 80% at 100% 0%, rgba(56, 212, 255, .26), rgba(56, 212, 255, 0) 70%),
    radial-gradient(50% 70% at 0% 100%, rgba(47, 123, 255, .32), rgba(47, 123, 255, 0) 70%);
}
.ideen__loesung-titel { margin: 0 0 18px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; color: #fff; }
.ideen__loesung-text p { margin: 0 0 14px; font-family: var(--font-body); font-size: 17px; line-height: 1.65; color: rgba(228, 239, 255, .93); }
.ideen__loesung-text .ideen__loesung-betont { margin: 22px 0 0; font-size: 18.5px; line-height: 1.5; color: #fff; }
.ideen__loesung-betont strong { color: #fff; }
.ideen__schluss {
  position: relative; padding: clamp(28px, 3vw, 42px) clamp(22px, 2.6vw, 36px); border-radius: 26px; text-align: center;
  background: linear-gradient(160deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 100%);
  border: 1.5px solid rgba(190, 230, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 30px rgba(56, 170, 255, .22);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ideen__schluss-titel { margin: 0 0 10px; font-family: var(--font-heading); font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1.22; color: #fff; }
.ideen__schluss-text { margin: 0 0 16px; font-family: var(--font-body); font-size: 17px; line-height: 1.55; color: rgba(228, 239, 255, .93); }
.ideen__leitsatz { margin: 0 0 26px; font-family: var(--font-heading); font-size: 16px; letter-spacing: .04em; color: #d6e8ff; }
.ideen__knopf { white-space: normal; text-align: center; max-width: 100%; line-height: 1.25; padding-block: 12px; }

@media (width <= 1199px) {
  .ideen__frage { grid-template-columns: minmax(0, 1fr); }
  .ideen__bild { max-width: 820px; }
  .ideen__loesung { grid-template-columns: minmax(0, 1fr); }
}
@media (width <= 809px) {
  .ideen__bild { padding: 7px; border-radius: 24px; }
  .ideen__bild img { border-radius: 18px; }
  .ideen__absatz { font-size: 17px; }
  .ideen__loesung { padding: 30px 20px; border-radius: 26px; }
  .ideen__loesung-text p { font-size: 16.5px; }
  .ideen__schluss { padding: 26px 16px; }
  .ideen__knopf { padding-inline: 20px; }
}

/* ---------- 2. Markenkarten (Portfolio, Logo-Seite) ---------- */
.prf[data-filter="websites"] .prr--marken { display: none; }
.prr--marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Die Karte ist ein <button>: Grundwerte des Knopfs zurücksetzen, sonst wie die Website-Karten */
.prk--marke { width: 100%; padding: 0; font: inherit; text-align: left; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.prk__bild--marke { aspect-ratio: 3 / 2; background: #0b1d4a; }
.prk__bild--marke img { object-position: 50% 50%; }
.prk__logo--marke { width: 112px; height: 84px; padding: 0; overflow: hidden; }
.prk__logo--marke img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.prk--marke .prk__satz { font-style: italic; }
.prk--marke:focus-visible { outline: 3px solid #1f62e8; outline-offset: 3px; }
/* Logo-Seite: Abstand zwischen Marken und Logo-Wand */
.prr--marken + .prr--logos { margin-top: 24px; }

.mk-dialog {
  width: min(1180px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 26px;
  color: var(--r3-tinte); background: #fff; box-shadow: 0 0 0 1px rgba(80, 150, 255, .35), 0 0 40px rgba(56, 160, 255, .35), 0 30px 80px rgba(2, 9, 25, .55);
  overflow: auto; overscroll-behavior: contain;
}
.mk-dialog::backdrop { background: rgba(2, 9, 25, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html:has(.mk-dialog[open]) { overflow: hidden; }
.mk-dialog__innen { display: grid; gap: 16px; padding: 18px 18px 22px; }
.mk-dialog__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mk-dialog__titel { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mk-dialog__name { font-family: var(--font-heading); font-weight: 800; font-size: clamp(20px, 2vw, 26px); }
.mk-dialog__art { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #1d55c9; }
.mk-dialog__zu {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, #2a6ae8, #1544bd); box-shadow: 0 0 14px rgba(56, 160, 255, .55);
}
.mk-dialog__zu:focus-visible { outline: 3px solid #1f62e8; outline-offset: 3px; }
.mk-dialog__praes { display: block; width: 100%; height: auto; border-radius: 16px; }
.mk-dialog__logo { justify-self: center; width: min(420px, 80%); overflow: hidden; border-radius: 16px; border: 1px solid rgba(80, 150, 255, .22); background: #fff; }
.mk-dialog__logo.is-dunkel { background: #0b0b0b; border-color: rgba(120, 190, 255, .4); }
.mk-dialog__logo img { display: block; width: 100%; height: auto; }
/* Breite Fenster: Präsentation und Logo nebeneinander, beides ohne Scrollen sichtbar */
@media (width >= 1000px) {
  .mk-dialog__innen { grid-template-columns: minmax(0, 72fr) minmax(0, 28fr); align-items: center; gap: 20px; padding: 20px 22px 24px; }
  .mk-dialog__kopf { grid-column: 1 / -1; }
  .mk-dialog__logo { width: 100%; }
}

@media (width <= 809px) {
  .prr--marken { grid-template-columns: minmax(0, 1fr); }
  .prk__logo--marke { width: 84px; height: 63px; }
  .mk-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 20px; }
  .mk-dialog__innen { padding: 12px 12px 18px; gap: 12px; }
  .mk-dialog__praes { border-radius: 12px; }
}

/* ---------- 3. Dienst-Kacheln: 7 bzw. 9 Leistungen mittig umbrechen ---------- */
.dk { display: flex; flex-wrap: wrap; justify-content: center; }
.dk > li { flex: 0 1 calc((100% - 2 * 18px) / 3); min-width: 0; }
/* Services-Seite: 9 Karten (6 + Shopify & WordPress + 2 weitere) als 3 × 3 statt 4 + 4 + 1 */
@media (width > 1320px) { .dkarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (width <= 1199px) {
  .dk > li { flex-basis: calc((100% - 18px) / 2); }
}
@media (width <= 809px) {
  .dk > li { flex-basis: 100%; }
}

/* ---------- 4. Menü «Services»: 11 Einträge (mit Shopify & WordPress) in zwei Spalten zu 6 + 5 ---------- */
.kl__punkt.mit-unter .kl__unter { grid-template-rows: repeat(6, auto); }