/* =========================================================
   meditationgongs.de · Markenseiten (Layout Lea, 08.09.2026)
   Volle Fassung mit neun Blöcken: Oetken, Auris, Olli Hess.
   Kurze Fassung mit vier Blöcken: Meinl, Schlagwerk, Paiste.
   Grund Weiß (liste.css). Wiederverwendet werden design.css, liste.css,
   produkt.css (Klangband, Spieler, Formular) und fragen.css (Fragenblock).
   Neu sind nur die Bausteine, die es noch nirgends gibt.
   Kein neuer Farbwert, alles aus design.css.
   ========================================================= */

/* ---------- 1. Kopf der Markenseite ---------- */
.mkopf{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(32px,5vw,88px);align-items:center;
  padding:clamp(30px,4vw,66px) 0 clamp(64px,7.4vw,116px);
}
/* Ohne Kopfbild bleibt sonst die halbe Zeile leer stehen. Dann laeuft der
   Kopf einspaltig, der Text bekommt aber ein Lesemass und keine Bandwurmzeile. */
.mkopf--ohne-bild{grid-template-columns:minmax(0,1fr)}
.mkopf--ohne-bild h1{max-width:24ch}
/* Ohne Bild duerfen Satz und Einleitung breiter laufen als in der
   Zweispaltenfassung, sonst bleibt trotz Einspaltigkeit die halbe Zeile
   leer. 46 und 70 Zeichen halten die Lesebreite noch angenehm kurz.
   Gefunden von Checker Jody, 10.09.2026: "zu viel weiss" trotz
   mkopf--ohne-bild. */
.mkopf--ohne-bild .mkopf__satz{max-width:46ch}
.mkopf--ohne-bild .mkopf__text{max-width:70ch}
.mkopf h1{font-size:clamp(3rem,5.6vw,5rem);margin-bottom:22px}
.mkopf__satz{
  font-family:var(--f-display);font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,2.1vw,2rem);line-height:1.28;color:var(--dunkel);
  margin:0 0 26px;max-width:30ch;
}
.mkopf__text{color:var(--text);font-size:var(--fs-body);line-height:1.65;max-width:52ch}
.mkopf__text p + p{margin-top:22px}
.mkopf__aktionen{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:42px}
.mkopf__bild{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  aspect-ratio:4/5;background:var(--dunkel);box-shadow:var(--shadow-tile);
}
.mkopf__bild img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* Breitbild-Kopf: ein Motiv im Querformat laeuft als Band unter dem Text,
   in seinem eigenen Seitenverhaeltnis. Kein Beschnitt, also auch kein Gong,
   der an der Feldkante mittendurch geschnitten wird. Der Text bekommt
   dieselben Lesemasse wie die Fassung ohne Bild. */
/* Anmerkung Alexander, 12.09.2026: "Der Hero gehoert ganz oben hin".
   Gemessen hat das Band bei 1440 Pixeln auf y 1032 gestanden, also weit
   unter der Falz und unter dem ganzen Kopftext. Es laeuft jetzt als
   erstes Element des Kopfes, ueber Kicker, Titel und Einleitung, und das
   obere Polster des Kopfes schrumpft, damit das Motiv wirklich oben steht
   und nicht hinter einer Luecke. Gilt fuer jede Marke mit Breitbild,
   also Oetken, Auris und Olli Hess ueber dieselbe Vorlage. */
.mkopf--band{grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.2vw,46px);padding-top:clamp(12px,1.4vw,22px)}
.mkopf--band h1{max-width:24ch}
.mkopf--band .mkopf__satz{max-width:46ch}
.mkopf--band .mkopf__text{max-width:70ch}
/* margin:0 gegen das Standardpolster des Browsers fuer figure (1em 40px).
   Gemessen bei 1440 Pixeln: das Band stand 40 Pixel schmaler als Titel und
   Text und damit sichtbar aus der Flucht, seit es oben steht. */
.mkopf__bild--band{aspect-ratio:auto;background:transparent;width:auto;min-width:0;order:-1;margin:0}
.mkopf__bild--band img{display:block;width:100%;height:auto;object-fit:fill}
.mkopf__bild figcaption{
  position:absolute;left:20px;bottom:18px;font-size:var(--fs-small);color:var(--creme);
  background:rgba(48,48,48,.72);padding:9px 15px;border-radius:999px;backdrop-filter:blur(4px);
}

/* Kennzahlenzeile unter dem Kopf, sie ersetzt die Vertrauensleiste der Startseite */
.mfakten{border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.mfakten__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.mfakten__item{padding:40px 42px 40px 0;display:grid;gap:11px;align-content:start}
.mfakten__item + .mfakten__item{padding-left:42px;border-left:1px solid var(--linie)}
.mfakten__label{font-size:var(--fs-kicker);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--text)}
.mfakten__wert{font-family:var(--f-display);font-weight:400;font-size:1.75rem;line-height:1.3;color:var(--wein)}

/* ---------- 2. Geschichte, Jahre links, Prosa rechts ---------- */
.mgeschichte{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,4.4vw,80px);align-items:start}
/* Ohne Meilensteine faellt die linke Jahresleiste weg, die Prosa lief dann
   trotzdem nur in ihrer halben Spalte. Gefunden von Checker Jody, 10.09.2026. */
.mgeschichte--ohne-jahre{grid-template-columns:minmax(0,1fr)}
.mgeschichte--ohne-jahre .mprosa{max-width:74ch}
.jahre{list-style:none;margin:0;padding:0;display:grid}
.jahre li{display:grid;gap:6px;padding:26px 0;border-top:1px solid var(--linie)}
.jahre li:last-child{border-bottom:1px solid var(--linie)}
.jahre b{font-family:var(--f-display);font-weight:400;font-size:1.75rem;line-height:1.1;color:var(--wein);letter-spacing:.03em}
.jahre span{font-size:var(--fs-small);color:var(--text);line-height:1.45}
.mprosa{max-width:64ch}
.mprosa p{color:var(--text);font-size:var(--fs-body);line-height:1.68}
.mprosa p + p{margin-top:24px}

/* ---------- 3. Warum wir die Marke führen ---------- */
.warum{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;
  padding:clamp(48px,5.6vw,88px) 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
}
.warum__bild{width:clamp(160px,17vw,240px);aspect-ratio:1/1;border-radius:999px;overflow:hidden;background:var(--weiss)}
.warum__bild img{width:100%;height:100%;object-fit:cover}
.warum__zitat{
  font-family:var(--f-display);font-weight:400;font-size:clamp(1.75rem,2.9vw,2.625rem);
  line-height:1.16;letter-spacing:-.008em;color:var(--wein);margin:0 0 22px;max-width:26ch;
}
.warum p{color:var(--text);font-size:var(--fs-body);line-height:1.65;max-width:58ch}
.warum p + p{margin-top:22px}
.warum__wer{display:block;margin-top:20px;font-size:var(--fs-small);font-weight:600;color:var(--dunkel);letter-spacing:.02em}

/* Hervorgehobener Satz im Fliesstext.
   Anmerkung Alexander, 12.09.2026, im Warum-Block der Oetken-Seite:
   "Mach diesen Satz bitte hervorgehoben."
   Zwei Fassungen zur Wahl, beide ohne neuen Farbwert und ohne Flaeche,
   Schatten oder Gelb-Marker, das waere gegen das Ethos der Marke.
   A (.hebung): ruhig, nur Gewicht und der dunkle Ton der Marke.
   B (.hebung--wein): deutlicher, Weinrot mit feiner Linie darunter.
   Eine von beiden bleibt, die andere wird nach Alexanders Wahl geloescht. */
.hebung{font-weight:700;color:var(--dunkel)}
.hebung--wein{
  font-weight:700;color:var(--wein);
  box-shadow:inset 0 -2px 0 0 var(--wein-20);
}

/* ---------- 4. Klangliche Eigenart, drei Hörproben ---------- */
/* Das dunkle Band und der Spieler kommen aus produkt.css. Hier steht nur,
   wie aus einem Spieler drei werden. */
.klang__proben{display:grid;gap:16px}
.klang__proben .spieler{align-items:center}
.probe__wer{display:block;font-size:var(--fs-small);color:var(--creme);opacity:.75;margin-top:2px}
/* Offene Angabe an der Hoerprobe. Der Satz ist selbst der Vermerk, deshalb
   traegt er nicht zusaetzlich die Kante und das Label von .blind. */
.probe__offen{
  display:block;margin-top:4px;font-size:var(--fs-kicker);font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--creme);opacity:.6;
}
.klang--marke{margin-top:var(--sec)}
.klang--marke .klang__grid{align-items:start}
.klang--marke h2{max-width:20ch}
.klang--marke p{max-width:38ch}
.klang__fussnote{margin-top:22px;font-size:var(--fs-small);color:var(--creme);opacity:.75;max-width:46ch}

/* ---------- 5. Serien und Bauarten ---------- */
/* Die Spaltenzahl kommt aus der Zahl der Serien, gesetzt in vorlagen/marke.php,
   und zwar fuer jede Breitenstufe einzeln: --b fuer ab 1181 Pixeln, --m fuer
   901 bis 1180. Darunter ist immer eine Spalte, dort kann keine Kachel allein
   stehenbleiben.
   Grund fuer die Stufen: die erste Fassung vom 12.09.2026 setzte die Spalten
   nur fuer die breiteste Stufe, darunter fiel das Raster starr auf zwei und
   dann auf eine Spalte. Bei fuenf Kacheln und 1024 Pixeln standen deshalb
   2, 2 und eine allein, also genau das Bild, das Alexander geruegt hat.
   Gefunden von Checker Jody.
   Die Grundregel steht absichtlich ohne Spaltenangabe, jede Stufe setzt sie
   selbst. */
.serien{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr)}
@media (min-width:901px){
  .serien--m1{grid-template-columns:minmax(0,1fr)}
  .serien--m2{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Bleibt bei dieser Spaltenzahl genau eine Kachel uebrig, fuellt sie die
     letzte Zeile ganz aus, statt allein an der linken Kante zu haengen. */
  .serien--mspann > .serie:last-child{grid-column:1 / -1}
}
@media (min-width:1181px){
  .serien--b1{grid-template-columns:minmax(0,1fr)}
  .serien--b2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serien--b3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .serien--bspann > .serie:last-child{grid-column:1 / -1}
  /* Ab dieser Stufe entscheidet die breite Stufe allein. Ohne diese Zeile
     bliebe eine Spannregel der mittleren Stufe stehen, obwohl die breite
     Stufe eine andere Spaltenzahl gewaehlt hat. */
  .serien:not(.serien--bspann) > .serie:last-child{grid-column:auto}
}
.serie{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-l);
  padding:38px 34px;display:flex;flex-direction:column;gap:16px;
}
.serie h3{font-size:1.75rem;line-height:1.1}
.serie p{color:var(--text);font-size:var(--fs-small);line-height:1.55}
.serie dl{margin:8px 0 0;margin-top:auto;padding-top:8px;display:grid;grid-template-columns:auto 1fr;gap:0}
.serie dt,.serie dd{margin:0;padding:15px 0;border-top:1px solid var(--linie);font-size:var(--fs-small);line-height:1.4}
.serie dt{color:var(--text);font-weight:600;padding-right:18px}
.serie dd{color:var(--dunkel);text-align:right}
.serie .nebenlink{margin-top:6px;align-self:start}

/* ---------- Abgesetzte Serie (Alexander 12.09.2026) ----------
   "Die Gongreiber solltest du etwas absetzen oder anders darstellen. Sie
   gehoeren nicht in die Linie der Mallets." Sie standen vorher als fuenfte
   Kachel neben der Move Line, gleiche Form, gleiche Groesse, gleiche Farbe.
   Welche Serie hier landet, entscheidet die Vorlage an der Kachel selbst,
   siehe marke.php: es ist die, deren Link die Kategorie wechselt.

   Abgesetzt wird ueber vier Mittel, die alle schon im Haus sind, ohne neue
   Farbe, ohne Schatten und ohne Icon: eigene Zeile, Linie darueber, eigener
   Kicker, heller Grund statt Weiss. Dazu der fuenfte und deutlichste
   Unterschied, ab 901 Pixeln: die Kachel liegt, statt zu stehen. Text links,
   die Kennzahlen rechts daneben statt darunter. */
.serien-abseits{margin-top:var(--gap);padding-top:var(--gap);border-top:1px solid var(--linie)}
.serien-abseits .kicker{margin-bottom:20px}
.serie--abseits{background:var(--creme);border-color:transparent}
@media (min-width:901px){
  .serie--abseits{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    column-gap:clamp(36px,4.5vw,80px);row-gap:16px;align-items:start;
    padding:clamp(34px,3.4vw,44px) clamp(32px,3.4vw,44px);
  }
  .serie--abseits h3{grid-column:1;grid-row:1}
  .serie--abseits p{grid-column:1;grid-row:2}
  .serie--abseits .nebenlink{grid-column:1;grid-row:3;margin-top:10px}
  /* Die Kennzahlen stehen rechts auf der vollen Hoehe. Das margin-top:auto
     der stehenden Kachel wuerde sie hier nach unten druecken. */
  .serie--abseits dl{grid-column:2;grid-row:1 / span 3;margin-top:0;padding-top:0;align-content:start}
  .serie--abseits dl > dt:first-of-type,.serie--abseits dl > dd:first-of-type{border-top:0;padding-top:0}
}

/* ---------- 5b. Zusaetzlich bestellbar (E3, Bestellliste ohne eigenes Produkt) ---------- */
/* Dieselbe Zeilen-Grammatik wie der Beleg der Bestellbestaetigung
   (kasse.css .beleg__zeile), eigener Namensraum, weil dort Bild und
   Brutto/Netto nebeneinander stehen und hier drei schlichte Spalten reichen:
   Modell mit optionalem Ton darunter, Groesse, Preis rechtsbuendig. */
.sek-kopf__aktion .liefer{margin-top:0}
.bliste{border-top:1px solid var(--linie)}
.bliste__kopf,.bliste__zeile{
  display:grid;grid-template-columns:minmax(0,1fr) 132px 176px;gap:20px;align-items:baseline;
}
.bliste__kopf{
  padding:0 0 10px;font-size:var(--fs-kicker);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text);
}
.bliste__kopf span:last-child,.bliste__zeile .bliste__preis{text-align:right}
.bliste__zeile{padding:18px 0;border-top:1px solid var(--linie)}
.bliste__name{font-family:var(--f-display);font-weight:400;font-size:1.125rem;line-height:1.3;color:var(--dunkel);display:block}
.bliste__name small{display:block;font-family:var(--f-text);font-size:var(--fs-small);color:var(--text);margin-top:3px}
.bliste__groesse{font-size:var(--fs-small);color:var(--text);align-self:start;padding-top:.3em}
.bliste__preis{display:grid;gap:2px}
.bliste__preis b{font-size:1.0625rem;font-weight:700;color:var(--dunkel);font-variant-numeric:tabular-nums}
.bliste__preis small{font-size:var(--fs-small);color:var(--text)}
.mabschnitt--flach:has(.bliste) .btn{margin-top:28px}
/* Unter 640 Pixel reicht die Zeile nicht mehr fuer drei Spalten, deshalb
   fallen Name, Groesse und Preis untereinander, wie eine kleine Karte statt
   einer Tabellenzeile. */
@media(max-width:640px){
  .bliste__kopf{display:none}
  .bliste__zeile{display:grid;grid-template-columns:1fr;gap:6px;padding:16px 0}
  .bliste__groesse{padding-top:0}
  .bliste__preis{justify-items:start}
  .bliste__preis b,.bliste__preis small{display:inline}
  .bliste__preis small::before{content:" · "}
}

/* ---------- Kurze Fassung: Verweis auf die passende Kategorie ---------- */
.weiter{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--linie)}
/* Die Zellen muessen gleich hoch schliessen. Sonst endet die Trennlinie
   jeder Zelle auf ihrer eigenen Texthoehe und die Reihe sieht verrutscht aus
   (gemessen: die dreizeilige Mitte schloss 28 px tiefer als die Nachbarn). */
.weiter li{display:grid}
.weiter li a{
  display:flex;flex-direction:column;gap:6px;padding:28px 26px 28px 0;height:100%;
  color:var(--wein);text-decoration:none;border-bottom:1px solid var(--linie);
  transition:transform .4s var(--ease);
}
.weiter li + li a{padding-left:26px;border-left:1px solid var(--linie)}
.weiter li a:hover{transform:translateX(8px);text-decoration:none}
.weiter b{font-family:var(--f-display);font-weight:400;font-size:clamp(1.6rem,2.2vw,2.125rem);line-height:1.08}
.weiter span{font-size:var(--fs-small);color:var(--text);line-height:1.45}

/* ---------- 8. Beratung ohne Bild ---------- */
/* .beratung selbst steht in design.css, hier nur die Markenseiten-Variante
   ohne Beratungsbild. Ohne sie blieb die rechte Haelfte leer stehen.
   Gefunden von Checker Jody, 10.09.2026. */
.beratung--ohne-bild{grid-template-columns:minmax(0,1fr)}
/* design.css:372 setzt .beratung__text auf padding:0 clamp(0px,3vw,48px),
   die Untergrenze 0px weicht unter 667 px vom Sektionsrand der Seite ab
   (--gutter:clamp(20px,3vw,48px), design.css:44). Bei 390 px lag der Text
   dadurch bei 12 statt 20 Pixeln, 8 Pixel naeher am Bildschirmrand als jede
   andere Sektion. Eigene Untergrenze hier, statt design.css global
   anzufassen. Gefunden von Checker Jody, 10.09.2026, zweimal gemessen. */
/* 24.09.2026, Lea: seit .wrap.sec den Gutter wieder traegt, zaehlte dieses Polster doppelt (x 104 statt 60). Auf 0. */
.beratung--ohne-bild .beratung__text{padding:0;max-width:70ch}

/* ---------- Abschnittsabstände ---------- */
/* Im Entwurf trug der Fuss die Klasse .fuss--abstand. Der Fuss aus
   vorlagen/rahmen.php ist auf jeder Seite derselbe und bekommt keine
   Sonderklasse, deshalb setzt die Markenseite den Abstand selbst. Ohne ihn
   stiess der letzte Block direkt an den weinroten Fuss, gemessen 0 px. */
.seite-marke{padding-bottom:var(--sec)}
.fuss--abstand{margin-top:var(--sec)}
.mabschnitt{padding:var(--sec) 0 0}
.mabschnitt--flach{padding:calc(var(--sec)*.62) 0 0}
/* 24.09.2026, Lea: #sortiment und #beratung sind .wrap.sec UND enthalten eine
   .mabschnitt. Beide trugen var(--sec), der Abstand stand doppelt da (gemessen
   bei 1440 px: 440 und 353 px statt rund 190). Der Wrapper gibt seinen Abstand
   ab, den Rhythmus traegt allein die .mabschnitt wie bei allen anderen Bloecken.
   Zugleich kommt der Seitenrand zurueck: .sec (design.css) ueberschrieb den
   Gutter von .wrap mit 0, Sortiment und Beratung standen bei x 0. */
.seite-marke > .wrap.sec{padding:0 var(--gutter)}
/* Kurze Fassung ohne Kennzahlen: der Sortimentsblock folgt direkt auf den Kopf,
   der unten schon Luft hat. Dann die flache Stufe, wie Kopf zu Block sonst. */
.seite-marke > .wrap:has(> #sec-kopf) + #sortiment > .mabschnitt{padding-top:calc(var(--sec)*.62)}

/* ---------- Responsiv ---------- */
@media (max-width:1180px){
  .mfakten__grid{grid-template-columns:repeat(2,1fr)}
  .mfakten__item:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--linie)}
  .mfakten__item:nth-child(4){border-top:1px solid var(--linie)}
}
@media (max-width:900px){
  .mkopf{grid-template-columns:1fr;gap:32px;padding-bottom:40px}
  .mkopf__bild{aspect-ratio:4/3;order:-1}
  /* Die Regel eine Zeile darueber setzt die Spalte auf 1fr, also mit
     min-width:auto. Ein Bild von 1400 Pixeln zieht das Rasterfeld dann
     ueber die Zeilenbreite hinaus, gemessen bei 768 Pixeln: 8 Pixel
     horizontaler Seiten-Scroll. minmax(0,1fr) erlaubt das Schrumpfen. */
  .mkopf--band{grid-template-columns:minmax(0,1fr)}
  .mkopf__bild--band{aspect-ratio:auto;order:-1}
  .mkopf__satz,.mkopf__text{max-width:none}
  .mgeschichte{grid-template-columns:1fr;gap:28px}
  .warum{grid-template-columns:1fr;gap:24px}
  .warum__bild{width:150px}
  .warum__zitat,.warum p{max-width:none}
  .weiter{grid-template-columns:1fr}
  .weiter li a,.weiter li + li a{padding:22px 0;border-left:0;padding-left:0}
}
@media (max-width:560px){
  .mfakten__grid{grid-template-columns:1fr}
  .mfakten__item{padding:18px 0}
  .mfakten__item + .mfakten__item{padding-left:0;border-left:0;border-top:1px solid var(--linie)}
  .mkopf__aktionen .btn{width:100%}
  .klang__proben .spieler{grid-template-columns:1fr;gap:18px;padding:22px 20px}
}

/* ---------- Blindtext im Zielumfang ---------- */
/* Layout Lea gestaltet, Texter Tim schreibt. Damit die Blocklaengen pruefbar
   sind, steht hier Blindtext im richtigen Umfang. Er ist an der Kante links
   und am kleinen Vermerk erkennbar und darf nie so live gehen. */
.blind{position:relative;padding-left:20px}
.blind::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:2px;background:var(--akzent);opacity:.55}
.blind::after{
  content:"Text von Tim";display:block;margin-top:10px;
  font-family:var(--f-text);font-style:normal;
  font-size:var(--fs-kicker);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--akzent);
}
.blind--kurz::after{margin-top:6px}
.warum .blind::before{opacity:.4}
.klang .blind::before{background:var(--creme);opacity:.5}
.klang .blind::after{color:var(--creme);opacity:.8}

/* Hinweisbanner oben auf der Seite */
.mhinweis{
  display:flex;gap:14px;align-items:flex-start;margin:18px 0 0;
  padding:16px 20px;border:1.5px dashed var(--akzent);border-radius:var(--radius);
  background:var(--wein-10);color:var(--dunkel);font-size:var(--fs-small);line-height:1.5;
}
.mhinweis b{color:var(--wein);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:var(--fs-kicker);flex:none}
@media (max-width:560px){.mhinweis{flex-direction:column;gap:8px}}

/* Bildausschnitt: der Gong sitzt in szene-erde.jpg rechts der Mitte */
.mkopf__bild--rechts img{object-position:70% 42%}

/* Unter 700 Pixel laeuft das Bildband randlos ueber die volle Breite, ohne
   Radius, wie die Bildbaender der Startseite. Auf dem Telefon gewinnt das
   Motiv dadurch rund 13 Prozent Bildflaeche, gemessen 346 zu 390 Pixel bei
   einem Fenster von 390. Der Ausbruch rechnet mit der Fensterbreite selbst
   statt mit dem Polster des Elternteils, sonst muesste jede Aenderung an
   --gutter hier nachgezogen werden. */
@media (max-width:699px){
  .mkopf__bild--band{
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    width:100vw;max-width:100vw;border-radius:0;box-shadow:none;
  }
  .mkopf__bild--band img{border-radius:0}
}