/* Methode in sieben Schritten neu formatiert (Devin 29.10.2026, Punkte 1–6 der Beratung). Eigene Datei, überschreibt site.css/demo.css über #ablauf: 1 ein Raster für alle Schritte (Bild und Text je 46 %, abwechselnd), 2 jedes Bild in derselben hellen Bildkarte (4:3), 3 „Schritt N“ klein über der Überschrift, 4 kurze Absätze, 5 Linie mit den Zahlen 1–7 in der Mitte, die sich beim Scrollen zeichnet (methode.js), 6 Häkchen statt Zahlen in der kleinen Liste von Schritt 4 */ #ablauf .pfad{position:relative} /* 1 Raster */ #ablauf .schritt,#ablauf .schritt.bild-links,#ablauf .schritt.bild-rechts,#ablauf .schritt.bild-links.galerie3{position:relative;grid-template-columns:46% 46%;justify-content:space-between;column-gap:0;align-items:start;margin-bottom:280px} /* Bild und Text beginnen auf einer Höhe. Mitlaufen (sticky) geht hier nicht: html und body haben overflow-x:hidden */ #ablauf .schritt:last-child{margin-bottom:0} /* von der Überschrift bis Schritt 1 derselbe Abstand wie zwischen den Schritten (Devin 29.10.2026), verdoppelt (Devin 30.10.2026); gleich groß auch von der Methode bis zur Demo (fällt mit dem Abstand über der Demo zusammen, shopdemo.css bleibt unberührt) */ #ablauf h2{margin-bottom:280px} #ablauf{margin-bottom:280px} #ablauf .schritt-bild,#ablauf .schritt-text{padding:0} /* 2 Bildkarte: heller Grund; weiße Hintergründe der Illustrationen verschwinden darin (multiply) */ #ablauf .schritt-bild{box-sizing:border-box;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center;padding:7%;border-radius:18px;background:#edf4f7} #ablauf .schritt-bild > img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:contain;border-radius:10px;mix-blend-mode:multiply} /* Schritt 1: die vier Kacheln bleiben quadratisch, die Karte wächst mit */ #ablauf .galerie3 .schritt-bild{display:block;aspect-ratio:auto;padding:6% 6% 4%} /* Schritt 4: der Entwurf liegt wie ein Fenster auf der Karte */ #ablauf .schritt-ew .entwurf{flex:none;width:100%} /* 3 Zahl über der Überschrift */ #ablauf .schritt-text h3{margin-bottom:16px} #ablauf .schritt-nr{display:block;margin-bottom:8px;font-size:15px;line-height:1.2;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--akzent, #60A8BF)} /* 4 kurze Absätze, Fragen als Liste; kein Fettdruck im Fließtext (Devin 29.10.2026) */ #ablauf .schritt-text p{margin:0 0 .75em} #ablauf .schritt-text p:last-child{margin-bottom:0} #ablauf .fragen{list-style:none;margin:0 0 .75em;padding:0} #ablauf .fragen li{position:relative;margin-bottom:.3em;padding-left:1.1em} #ablauf .fragen li::before{content:"";position:absolute;left:0;top:.8em;width:.5em;height:2px;background:var(--akzent, #60A8BF)} /* Schritt 2: Kette aus Frage und Ergebnis – Frage klein und grau, Ergebnis normal groß mit hellblauem Pfeil (Devin 30.10.2026) */ #ablauf .kette{list-style:none;margin:0 0 .9em;padding:0} #ablauf .kette li{margin-bottom:.85em} #ablauf .kette .frage{display:block;margin-bottom:.15em;font-size:16px;line-height:1.45;color:#7b8a93} #ablauf .kette .ergebnis{display:block;position:relative;padding-left:1.45em} #ablauf .kette .ergebnis::before{content:"";position:absolute;left:0;top:.38em;width:.95em;height:.85em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' fill='none' stroke='%2360A8BF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 10h19M13 2.5l8 7.5-8 7.5'/%3E%3C/svg%3E") center / contain no-repeat} /* 5 Linie mit den Zahlen in der Mitte zwischen Bild und Text; Lage und Stand setzt methode.js */ #ablauf .pfad-linie{position:absolute;left:50%;top:0;width:2px;height:0;margin-left:-1px;background:#dde6ea} #ablauf .pfad-linie i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--akzent, #60A8BF)} #ablauf .pfad-nr{position:absolute;z-index:1;left:50%;top:0;box-sizing:border-box;width:46px;height:46px;margin:0 0 0 -23px;border-radius:50%;border:2px solid #dde6ea;background:#fff;color:#9aa8b0;font-size:18px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background .35s, border-color .35s, color .35s} #ablauf .pfad-nr.an{border-color:var(--akzent, #60A8BF);background:var(--akzent, #60A8BF);color:#fff} /* Schritt 4: die drei Punkte unter dem Entwurf nebeneinander statt im Text (Devin 30.10.2026); die Karte wächst dafür mit */ #ablauf .schritt-ew .schritt-bild{flex-direction:column;gap:24px;aspect-ratio:auto} #ablauf .schritt-bild .ew-schritte{flex-direction:row;justify-content:space-between;gap:10px;width:100%;margin:0;font-size:16px;line-height:1.3} #ablauf .schritt-bild .ew-schritte li{flex:1 1 0;flex-direction:column;gap:.55em;text-align:center} /* 6 Häkchen statt Zahlen in der kleinen Liste von Schritt 4 (die Liste zählt sonst gegen die Schritte) */ #ablauf .ew-schritte li::before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8c95' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 55% no-repeat} #ablauf [data-schritt="1"] .ew-schritte li[data-n="1"]::before,#ablauf [data-schritt="2"] .ew-schritte li[data-n="2"]::before,#ablauf [data-schritt="3"] .ew-schritte li[data-n="3"]::before{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 55% no-repeat} /* Handy: Text, dann Bildkarte; Linie und Zahlen links */ @media (max-width:767px){ #ablauf .pfad{padding-left:46px} #ablauf .schritt,#ablauf .schritt.bild-links,#ablauf .schritt.bild-rechts,#ablauf .schritt.bild-links.galerie3{grid-template-columns:minmax(0, 1fr);row-gap:22px;margin-bottom:176px} #ablauf h2{margin-bottom:176px} #ablauf{margin-bottom:148px} #ablauf .pfad-linie{left:16px} #ablauf .pfad-nr{left:-46px;top:-4px;width:32px;height:32px;margin:0;font-size:15px} #ablauf .schritt-nr{font-size:13px} #ablauf .schritt-bild{border-radius:14px} #ablauf .schritt-bild .ew-schritte{font-size:14px} #ablauf .kette .frage{font-size:14.5px} } @media (prefers-reduced-motion:reduce){ #ablauf .pfad-nr{transition:none} }