/* Stile der redaktionellen Zielseiten (Kinderstoffe, OEKO-TEX Stoffe).
   Ausgelagert aus der eigenständigen Entwurfsvorlage, damit die Seiten
   denselben Kopf und Fuss nutzen wie der übrige Shop. */
/* ---- Einstieg: linksbetont, nicht mittig ---- */
.lp-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:var(--gut);align-items:center;padding:clamp(2.5rem,7vw,6rem) 0 clamp(2rem,4vw,3rem)}
.eyebrow{font-family:var(--display);font-weight:300;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin:0 0 1.25rem}
h1{font-size:clamp(2.6rem,8.5vw,6rem)}
h1 em{font-style:normal;color:var(--coral)}
.lp-lede{max-width:34ch;margin:1.75rem 0 0;font-size:1.15em}
.lp-hero figure{margin:0;position:relative}
.lp-hero figure img{aspect-ratio:3/2;object-fit:cover;width:100%}
.lp-hero figure figcaption{position:absolute;left:0;bottom:0;background:var(--paper);
  padding:.6rem 1rem .5rem;font-family:var(--display);font-weight:300;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}

/* ---- Meterband: das eine Merkmal ---- */
.lp-meter{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);
  padding:0 0 .9rem;position:relative;overflow:hidden}
.ticks{display:flex;align-items:flex-start;height:1.6rem}
.ticks span{flex:1 0 auto;width:calc(100%/50);border-left:1px solid var(--ink);height:.42rem;opacity:.42}
.ticks span:nth-child(5n+1){height:.95rem;opacity:1}
.ticks span:nth-child(10n+1){height:1.5rem;opacity:1;border-left-width:2px}
.lp-meter .read{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--display);font-weight:300;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel)}
.lp-meter .read strong{font-weight:700;color:var(--ink);letter-spacing:-.01em;
  text-transform:none;font-size:1rem}

/* ---- Abschnitte ---- */
section{padding:clamp(3rem,7vw,5.5rem) 0}
.lp-head{display:grid;grid-template-columns:minmax(0,auto) minmax(0,42ch);
  gap:var(--gut);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)}
h2{font-size:clamp(1.9rem,4.5vw,3rem)}
.lp-head p{margin:0;color:#4b4b4b}

/* Materialgruppen: keine Karten, Trennung über Linien und Raum */
.lp-group{border-top:1px solid var(--line);padding:clamp(1.5rem,3vw,2.25rem) 0;
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--gut);align-items:start}
.lp-group:last-child{border-bottom:1px solid var(--line)}
.lp-group h3{font-size:1.6rem;display:flex;align-items:baseline;gap:.6rem}
.lp-group h3 span{font-family:var(--body);font-style:italic;font-weight:400;
  font-size:.95rem;color:var(--steel)}
.lp-group .use{margin:.5rem 0 0;font-size:.98em;color:#4b4b4b;max-width:30ch}
.lp-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}
/* Spalte statt Block: so kann der Preis unten andocken. Sonst rutscht er bei
   zweizeiligen Titeln nach unten und die Preise stehen nicht mehr auf einer
   Linie — im Raster fällt das sofort auf. */
.lp-row a{text-decoration:none;display:flex;flex-direction:column;height:100%}
/* Der Rahmen bleibt stehen, nur der Stoff darin bewegt sich — wie wenn man
   ein Tuch anhebt. Die Kachel wächst NICHT: das verschöbe das Raster und wäre
   der übliche Karten-Effekt, den wir vermeiden wollen. */
.lp-row .frame{aspect-ratio:5/6;overflow:hidden;background:var(--surface)}
.lp-row img{width:100%;height:100%;object-fit:cover;filter:saturate(.96);
  transform:scale(1.015);transform-origin:50% 55%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1),filter .55s ease}
.lp-row a:hover img,.lp-row a:focus-visible img{transform:scale(1.055) translateY(-1.2%);
  filter:saturate(1.04)}
.lp-row .ph{aspect-ratio:5/6;background:var(--surface);display:grid;place-items:center;
  font-family:var(--display);font-weight:300;color:var(--steel);font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase}
.lp-row .t{font-family:var(--display);font-weight:700;font-size:.95rem;
  margin:.6rem 0 .1rem;line-height:1.2;transition:color .25s ease}
.lp-row .p{font-size:.85rem;color:var(--steel);margin-top:auto;padding-top:.15rem}
.lp-row a:hover .t,.lp-row a:focus-visible .t{color:var(--coral)}
.lp-row a:focus-visible{outline:2px solid var(--coral);outline-offset:4px}

/* Zertifikat: die einzige Stelle mit Senf */
.lp-cert{background:var(--ink);color:var(--paper);padding:clamp(2.25rem,5vw,3.5rem) 0}
/* Oben ausrichten, nicht zentrieren: sonst schwebt die kürzere Spalte
   gegenüber der längeren und die Kanten stimmen nicht überein. */
.lp-cert .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--gut);align-items:start}
.lp-cert h2{color:var(--paper)}
/* Die Anzeigeschrift sitzt optisch höher als die Serife. Der kleine Versatz
   bringt die erste Textzeile auf die Höhe der Versalien der Überschrift. */
.lp-cert p{color:#ded8d0;max-width:46ch;margin:.35rem 0 0;line-height:1.55}
.lp-badge{display:inline-flex;align-items:baseline;gap:.65rem;border:2px solid var(--mustard);
  padding:.55rem 1rem;margin-top:1.5rem;font-family:var(--display);font-weight:300;
  letter-spacing:.1em;text-transform:uppercase;font-size:.8rem;color:var(--mustard)}
.lp-badge b{font-weight:700;font-size:1.4rem;letter-spacing:-.02em;text-transform:none;
  line-height:1}

/* Laden */
.lp-shop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gut);align-items:center}
.lp-shop dl{margin:1.5rem 0 0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem;font-size:.95em}
.lp-shop dt{font-family:var(--display);font-weight:300;letter-spacing:.08em;
  text-transform:uppercase;font-size:.78rem;color:var(--steel);align-self:baseline}
.lp-shop dd{margin:0}


@media (max-width:52rem){
  .lp-hero,.lp-head,.lp-cert .wrap,.lp-shop{grid-template-columns:1fr}
  .lp-hero figure{order:-1}
  .lp-group{grid-template-columns:1fr}
  .lp-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Wer reduzierte Bewegung eingestellt hat, bekommt keine Bewegung — der
   Farbwechsel bleibt, damit der Hinweis auf Klickbarkeit nicht verloren geht. */
@media (prefers-reduced-motion:reduce){
  .lp-row img{transform:none!important;transition:none!important}
  .lp-row a:hover img,.lp-row a:focus-visible img{transform:none!important}
  *{animation:none!important}
}

/* ---------------------------------------------------------------------------
   Der Weg weiter, am Ende jeder Kategoriereihe

   Vorher endete die Reihe nach vier Bildern, und dass hinter „Jersey" noch 68
   weitere stecken, stand nur klein in der Überschrift. Die Karte nimmt den
   vierten Platz ein und ist so gross wie eine Kachel — nicht kleiner, sonst
   läse man sie als Fussnote, und nicht bunter, sonst zöge sie den Blick von
   den Stoffen ab, um die es geht.

   Rahmen statt Fläche: Sie zeigt kein Bild, und eine gefüllte Kachel ohne
   Bild sähe aus wie ein Ladefehler.
--------------------------------------------------------------------------- */
.lp-mehr {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--s2);
	aspect-ratio: 5/6;
	padding: var(--s3);
	border: 2px solid var(--ink);
	background: transparent;
	color: var(--ink);
	text-decoration: none;
	transition: background .25s ease, color .25s ease;
}
.lp-mehr-zahl {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(1.9rem, 4.5vw, 2.8rem);
	line-height: .9;
}
.lp-mehr-text {
	font-family: var(--body);
	font-size: .95rem;
	line-height: 1.25;
}
.lp-mehr-pfeil {
	font-family: var(--display);
	font-size: 1.3rem;
	line-height: 1;
	/* Kein `margin-top:auto`: Das schob den Pfeil an den unteren Rand, wo er
	   allein stand und wie vergessen aussah. Er gehört zum Text, nicht in die
	   Ecke. */
	transition: transform .25s ease;
}
.lp-mehr:hover,
.lp-mehr:focus-visible {
	background: var(--ink);
	color: var(--paper);
	outline: none;
}
.lp-mehr:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}
.lp-mehr:hover .lp-mehr-pfeil,
.lp-mehr:focus-visible .lp-mehr-pfeil { transform: translateX(.3rem); }

@media (prefers-reduced-motion: reduce) {
	.lp-mehr, .lp-mehr-pfeil { transition: none; }
	.lp-mehr:hover .lp-mehr-pfeil { transform: none; }
}

/* Der Abgrenzungs-Absatz auf der Zertifikatsseite: derselbe Fluss, aber
   erkennbar als Einschränkung — deshalb abgesetzt, nicht hervorgehoben. */
.lp-cert-abgrenzung {
	margin-top: var(--s3);
	padding-top: var(--s3);
	border-top: 1px solid currentColor;
	font-size: .95rem;
}