/*! HPN Volldeklaration
    Gehört zu sections/hpn-volldeklaration.liquid.

    Löst das alte Akkordeon ab, das die Nährwerttabelle in eine 550 Pixel
    schmale Spalte gequetscht und hinter sechs geschlossene Klappen gelegt hat.

    WARUM DIE TABELLE OFFEN STEHT: Hotjar zeigt, dass praktisch jeder Besucher
    sie ansieht, und dort stehen die USPs der HPN-Produkte. Das ist mit Daten
    belegt, nicht Geschmack. Beschluss Sami, 2026-08-15. Bitte nicht
    "aufräumen", indem man sie wieder zuklappt.

    Vorlage: WERKSTATT/live-volldeklaration-2026-08/ENTWURF_volldeklaration-final_2026-08-15.html
    Die festen Werte des Entwurfs sind hier auf Theme-Token gemappt, siehe
    Tabelle unten.

      Entwurf              wird zu
      --vd-ton             var(--hpn-ton)
      --vd-lack            var(--hpn-lack)
      --vd-lack-text       var(--hpn-text)
      --vd-flaeche #F5F5F7 rgb(var(--color-placeholder))   gleicher Wert, Token gab es schon
      --vd-linie           rgb(var(--color-border))
      --vd-still .58       .62, sonst reißt 14px-Text die Kontrastschwelle AA
      drei Radien          var(--buttons-radius), wie bei den Fakten-Pillen
      --vd-akzent #C25E17  getönt zu --vd-akzent-flaeche, siehe unten
*//*! Die NRV-Balken sind am 2026-08-16 wieder entfernt worden.
    Beschluss Sami: Kunden arbeiten visuell, und ein Balken liest sich als
    Fortschritt. Voll gleich gut, kurz gleich schlecht, das entscheidet
    niemand bewusst. Bei Magnesium mit 32 Prozent hätte der Balken gegen
    das Produkt gearbeitet, obwohl die Dosierung Absicht ist. Die Prozentzahl
    steht jetzt schlicht rechtsbündig in der letzten Spalte.

    WO DER TERRAKOTTA-AKZENT STATTDESSEN SITZT, Beschluss Sami 2026-08-16:
    auf der Gruppenzeile "Markenrohstoffe", die als erster Block in der
    Tabelle steht. Die Markenrohstoffe stehen dort ganz normal als Zeilen
    mit Menge und NRV, nicht als eigene Leiste über der Tabelle. Sami hat
    dazu festgehalten, dass die Reihenfolge der Zusammensetzung nicht
    gesetzlich geregelt ist, geregelt ist nur die Zutatenliste.

    Bewusst getönt und NICHT als Vollton-Lack wie die Fakten-Pillen:
    "ohne den Gradienten-Button, sondern mit diesem dezenten Terrakotta".
    Ebenso bewusst ohne Rahmenlinie, auch das ist seine Ansage.
    Der Textton ist #8A4210 und nicht #C25E17: auf der getönten Fläche
    käme das reine Terrakotta nur auf Kontrast 3.84 und risse AA, der
    tiefere Ton kommt auf 6.58. Nachgerechnet, nicht geschätzt.

    Umsortiert wird in der VORLAGE, nicht im Browser. Das Skript ordnet
    keine Zeilen um, es erkennt die Gruppenzeile nur an ihrem Namen und
    hängt eine Klasse dran. Quelltext und Bildschirm zeigen dasselbe. *//*! PFLICHT, nicht kosmetisch: der Inhalt muss positioniert sein.
   theme.css legt an JEDE .section ein ::before mit position:absolute,
   inset:0 und dem Hintergrund der Section. Weil es positioniert ist, malt
   es über allem, was es nicht ist, also über jedem normalen Text. Ohne die
   zwei Zeilen hier ist die ganze Section weiß und man sieht nur die
   Bauteile, die selbst position:relative oder sticky tragen.
   Alle anderen Sections im Theme lösen das über die Klasse "relative" am
   Inhalts-Container, siehe faq.liquid und multicolumn-with-icons.liquid.
   Hier steht es im Stylesheet, damit es nicht beim nächsten Umbau des
   Markups verlorengeht. */.hpn-vd{position:relative;z-index:1;--vd-weich: rgb(var(--color-foreground)/ .8);--vd-still: rgb(var(--color-foreground)/ .62);--vd-linie: rgb(var(--color-border));--vd-flaeche: rgb(var(--color-placeholder));--vd-lichtkante: inset 0 1px 0 rgb(255 255 255/ .1);--vd-akzent-flaeche: #fbf1e9;--vd-akzent-text: #8a4210}/*! Kopf */.hpn-vd__unter{margin:var(--sp-3) 0 0;max-width:60ch;color:var(--vd-weich)}/*! Körper. Die Rinne links entsteht erst, wenn das Skript die Liste
   gefüllt hat. Ohne Skript bleibt sonst eine leere 250px-Spalte stehen. */.hpn-vd__body{margin-top:var(--sp-9)}.hpn-vd--mit-liste .hpn-vd__body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--sp-10);align-items:start}/*! Inhaltsliste. Kein Reiter-Widget: die Einträge öffnen den Punkt und
   springen hin, deshalb sind es Links. */.hpn-vd__liste{position:sticky;top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-1d5);margin:0}.hpn-vd__liste[hidden]{display:none}.hpn-vd__liste a{display:block;min-height:46px;padding:var(--sp-3d5) var(--sp-4);border-radius:var(--buttons-radius);background:var(--vd-flaeche);color:rgb(var(--color-foreground));text-decoration:none;transition:background-color .16s ease-out,color .16s ease-out}.hpn-vd__liste a:hover{background:rgb(var(--color-foreground)/ .08)}.hpn-vd__liste a[aria-current=true]{color:var(--hpn-text);background-color:var(--hpn-ton);background-image:var(--hpn-lack);box-shadow:var(--vd-lichtkante)}.hpn-vd__liste a:focus-visible,.hpn-vd__akk summary:focus-visible{outline:2px solid var(--hpn-ton);outline-offset:2px}/*! Tabelle. Angesprochen wird sie über den Bereich, nicht über ihren
   Klassennamen: im Bestand heisst sie table-clean, ignite-table-clean oder
   hpn-lp-table-clean. Die Section entfernt beim Rendern jeden mitgelieferten
   style-Block, sonst kämpft das alte CSS mit !important dagegen. *//*! PFLICHT, nicht kosmetisch: das globale Tabellen-CSS neutralisieren.
   theme.css ab Zeile 4035 gibt JEDER Tabelle im Shop einen 1px-Ring per
   box-shadow, einen Radius, --text-lg als Schriftgröße, eine sehr große
   Polsterung, einen grauen Kopfhintergrund und eine Linie ÜBER jeder Zeile.

   Die kopierten Live-Tabellen bringen dagegen ihr eigenes table-clean-CSS
   mit, das genau das mit !important wegnimmt. Deshalb sah Multi Core immer
   richtig aus: dort steht das alte Akkordeon noch daneben und liefert diese
   Regeln global auf der Seite mit. Die Section selbst entfernt den
   style-Block der eingefügten Tabelle ja.

   Eine neu geschriebene Tabelle wie bei Omega-D3-K2 hat diesen Schutz nicht,
   und dort schlug das globale CSS voll durch: Kasten um die Tabelle, 18px
   statt 14px Schrift. Genau so hat Sami es am 17.08. gemeldet.

   ACHTUNG für später: Sobald bei Multi Core das alte Akkordeon abgeschaltet
   wird, fällt dort dasselbe CSS weg. Ohne diesen Block sähe Multi Core dann
   genauso aus. Diese Regeln also nicht als Doppelung missverstehen und
   entfernen. */.hpn-vd .hpn-vd__tabelle-bereich table{width:100%;border-collapse:collapse;box-shadow:none;border-radius:0;overflow:visible}.hpn-vd .hpn-vd__tabelle-bereich th,.hpn-vd .hpn-vd__tabelle-bereich td{padding:var(--sp-3d5) var(--sp-1);text-align:left;vertical-align:baseline;border:0;font-size:var(--text-sm)}/*! Die Linie kommt von uns als border-bottom. theme.css setzt zusätzlich eine
   border-block-start an jede Zeile, das gäbe doppelte Linien. */.hpn-vd .hpn-vd__tabelle-bereich tbody tr,.hpn-vd .hpn-vd__tabelle-bereich tfoot tr:first-child{border-block-start:0}/*! Erste Spalte trägt den Namen und nimmt den Rest der Breite.
   Alle weiteren sind Zahlen, rechtsbündig und mit Tabellenziffern.
   Bewusst über :first-child statt nth-child, damit auch die neun
   vierspaltigen und die eine fünfspaltige Tabelle richtig sitzen. */.hpn-vd .hpn-vd__tabelle-bereich td:first-child,.hpn-vd .hpn-vd__tabelle-bereich th:first-child{width:100%;max-width:44ch;line-height:1.45}.hpn-vd .hpn-vd__tabelle-bereich td:not(:first-child),.hpn-vd .hpn-vd__tabelle-bereich th:not(:first-child){padding-left:var(--sp-6);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.hpn-vd .hpn-vd__tabelle-bereich thead th{padding:0 var(--sp-1) var(--sp-3);color:var(--vd-still);border-bottom:1px solid var(--vd-linie);font-size:var(--text-xs);background-color:transparent}.hpn-vd .hpn-vd__tabelle-bereich tbody tr{border-bottom:1px solid var(--vd-linie)}/*! Solange eine Seite noch den alten Block daneben hat, liegt dessen
   .table-clean-CSS global auf der Seite und färbt auch diese Tabelle:
   tbody tr:nth-child(odd) weiß, (even) #fafafa. Diese Zebrastreifen
   gehören nicht zum Entwurf. Weggenommen über höhere Spezifität
   (0,3,2 gegen 0,2,2) statt über !important, damit die Regel nicht
   stärker ist, als sie sein muss. */.hpn-vd .hpn-vd__tabelle-bereich tbody tr:nth-child(n){background:transparent}.hpn-vd .hpn-vd__tabelle-bereich tbody td:not(:first-child){color:var(--vd-weich)}/*! Der Zusatz aus der Klammer, vom Skript auf eine eigene Zeile gesetzt */.hpn-vd .hpn-vd__tabelle-bereich .hpn-vd__zusatz{display:block;margin-top:2px;color:var(--vd-still)}/*! Gruppenzeile. Erkennbar am colspan, dafür braucht es kein Skript.
   Das Skript setzt zusätzlich .hpn-vd__gruppe, weil :has() erst in
   neueren Browsern sitzt. Beide Wege führen zum selben Ergebnis. */.hpn-vd .hpn-vd__tabelle-bereich tbody tr:has(>td[colspan]),.hpn-vd .hpn-vd__tabelle-bereich tbody tr.hpn-vd__gruppe{border-bottom:0}.hpn-vd .hpn-vd__tabelle-bereich tbody td[colspan]{padding:var(--sp-2d5) var(--sp-4);border-radius:var(--buttons-radius);background:var(--vd-flaeche);color:rgb(var(--color-foreground))}.hpn-vd .hpn-vd__tabelle-bereich tbody tr:has(>td[colspan])+tr td,.hpn-vd .hpn-vd__tabelle-bereich tbody tr.hpn-vd__gruppe+tr td{padding-top:var(--sp-4)}/*! Die Markenrohstoff-Gruppe, der einzige Farbakzent der Section.
   Die Klasse setzt das Skript, erkannt am Namen der Gruppenzeile. Fällt das
   Skript aus, steht die Gruppe schlicht in Grau wie die anderen: die
   Reihenfolge kommt aus der Vorlage und stimmt auch dann. */.hpn-vd .hpn-vd__tabelle-bereich tbody tr.hpn-vd__gruppe--marken td[colspan]{background:var(--vd-akzent-flaeche);color:var(--vd-akzent-text)}/*! davon-Zeile, vom Skript markiert. Gleiche Spezifitätsstufe wie die
   allgemeinen Zellenregeln oben, sonst gewinnen die und die Zeile klebt
   nicht mehr an ihrer Elternzeile. */.hpn-vd .hpn-vd__tabelle-bereich tr.hpn-vd__davon{border-bottom:0}.hpn-vd .hpn-vd__tabelle-bereich tr.hpn-vd__davon td{padding-top:0;padding-bottom:var(--sp-3d5);color:var(--vd-still)}.hpn-vd .hpn-vd__tabelle-bereich tr.hpn-vd__davon td:first-child{padding-left:var(--sp-5d5)}.hpn-vd__fuss{margin:var(--sp-4d5) 0 0;max-width:80ch;color:var(--vd-still)}/*! Markenrohstoff-Leiste über der Tabelle, der zweite von zwei Wegen für den
   Akzent. Der erste ist die gefärbte Gruppenzeile weiter oben. Welcher Weg
   gilt, hängt am Produkt und nicht am Geschmack: stehen die Rohstoffe als
   Klammerzusatz in der Tabelle, gehören sie hinein, sonst hierher. Beide
   nutzen dieselben zwei Token, damit es eine Farbe bleibt und nicht zwei.

   Bauform von .hpn-fakten aus theme.css übernommen (Radius, Polsterung,
   Symbol links), aber bewusst OHNE Verlauf und OHNE Rahmenlinie: "ohne den
   Gradienten-Button, sondern mit diesem dezenten Terrakotta", Sami 2026-08-16. */.hpn-vd__marken-titel{margin:0 0 var(--sp-2d5);color:var(--vd-still);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase}.hpn-vd__marken{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-5);padding:0;list-style:none}.hpn-vd__marken li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3d5);border-radius:var(--buttons-radius);background:var(--vd-akzent-flaeche);color:var(--vd-akzent-text);font-size:var(--text-xs);line-height:1.2}.hpn-vd__marken svg{flex:none;display:block;width:var(--sp-3d5);height:var(--sp-3d5)}/*! Die Nachschlage-Punkte. Natives details, exklusiv über das name-Attribut,
   also ohne JavaScript und ohne ARIA-Rollenspiel. */.hpn-vd__akk{border-top:1px solid var(--vd-linie);scroll-margin-block-start:calc(var(--sticky-header-height, 0px) + var(--sp-6))}.hpn-vd__akk:last-of-type{border-bottom:1px solid var(--vd-linie)}.hpn-vd__akk summary{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);min-height:46px;padding:var(--sp-4d5) 2px;list-style:none;cursor:pointer}.hpn-vd__akk summary::-webkit-details-marker{display:none}/*! Plus und Minus aus zwei Strichen, damit kein Icon nachgeladen wird */.hpn-vd__zeichen{position:relative;flex:none;width:14px;height:14px}.hpn-vd__zeichen:before,.hpn-vd__zeichen:after{content:"";position:absolute;background:var(--vd-still);transition:transform .18s ease-out}.hpn-vd__zeichen:before{inset-inline:0;top:6px;height:1.5px}.hpn-vd__zeichen:after{inset-block:0;left:6px;width:1.5px}.hpn-vd__akk[open] .hpn-vd__zeichen:after{transform:scaleY(0)}.hpn-vd__akk-inhalt{padding:2px 2px var(--sp-7d5)}.hpn-vd__inhalt-text{max-width:68ch;color:var(--vd-weich)}/*! Steht der Text unter der Tabelle, wie die Sternchen-Fußnoten in der
   Zusammensetzung, braucht er Luft. Sonst klebt er an der letzten Zeile.
   Die Schriftgröße folgt der Tabelle und nicht dem Fließtext: mit 16px über
   einer 14px-Tabelle wirkte die Fußnote wichtiger als die Werte, auf die sie
   sich bezieht. Beschluss Sami, 17.08. */.hpn-vd__tabelle-bereich+.hpn-vd__inhalt-text{margin-top:var(--sp-4d5);color:var(--vd-still);font-size:var(--text-sm)}.hpn-vd__inhalt-text strong{color:rgb(var(--color-foreground))}/*! Mobil: dieselbe Bauform, nur ohne die Liste links. Beschluss Sami. */@media screen and (max-width:900px){.hpn-vd--mit-liste .hpn-vd__body{grid-template-columns:minmax(0,1fr);gap:0}.hpn-vd__liste{display:none}.hpn-vd__body{margin-top:var(--sp-6)}/*! Mobil ist die Zusammensetzung KEIN Akkordeon, sondern steht fest offen.
   Die Klasse setzt das Skript. Absicht: ohne Skript bleibt die Klappe
   bedienbar, statt dass der Schalter verschwindet und der Inhalt womöglich
   zu ist. Beschluss Sami: mobil gibt es keine Inhaltsliste, über die man
   die Tabelle zurückholen könnte. */.hpn-vd--haupt-fest .hpn-vd__haupt{border-top:0}.hpn-vd--haupt-fest .hpn-vd__haupt>summary{display:none}.hpn-vd--haupt-fest .hpn-vd__haupt>.hpn-vd__akk-inhalt{padding-top:0}}/*! MOBIL: technisches Datenblatt, kein loser Textblock.

   Name links, Werte rechts, EINE Zeile je Stoff, Haarlinie dazwischen. Die
   erste Fassung stapelte Name und Werte untereinander, das las sich wie eine
   Einkaufsliste. Beschluss Sami, 2026-08-16: "soll aussehen wie eine
   professionelle Zusammensetzungsübersicht, wie ein technisches Datenblatt".

   Die Tabellen-Semantik bleibt, gebrochen wird nur die Darstellungsrolle.
   Screenreader lesen weiterhin eine Tabelle. */@media screen and (max-width:760px){.hpn-vd .hpn-vd__tabelle-bereich table,.hpn-vd .hpn-vd__tabelle-bereich tbody{display:block;width:auto}.hpn-vd .hpn-vd__tabelle-bereich thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.hpn-vd .hpn-vd__tabelle-bereich tbody tr{display:flex;align-items:baseline;gap:var(--sp-3);padding:var(--sp-2d5) 0}.hpn-vd .hpn-vd__tabelle-bereich tbody td{display:block;padding:0}.hpn-vd .hpn-vd__tabelle-bereich tbody td:first-child{flex:1 1 auto;min-width:0;max-width:none}.hpn-vd .hpn-vd__tabelle-bereich tbody td:not(:first-child){flex:0 0 auto;text-align:right}.hpn-vd .hpn-vd__tabelle-bereich tbody td:empty{display:none}/*! Gruppenzeile nimmt die ganze Breite */.hpn-vd .hpn-vd__tabelle-bereich tbody td[colspan]{flex:1 1 100%}.hpn-vd .hpn-vd__tabelle-bereich tbody tr:has(>td[colspan]),.hpn-vd .hpn-vd__tabelle-bereich tbody tr.hpn-vd__gruppe{padding:var(--sp-4) 0 var(--sp-1)}/*! VIER UND MEHR SPALTEN, zum Beispiel Omega-D3-K2 mit "pro Kapsel",
     "pro 2 Kapseln" und NRV. Die Klasse setzt das Skript ab vier Spalten.

     Erster Versuch am 17.08. war falsch und ist von Sami zurückgewiesen
     worden: Name über die volle Breite, darunter die Werte, jeder mit
     seinem Spaltenkopf als eigenes Label. Das verdoppelt die Zeilenzahl,
     wiederholt dieselben drei Wörter bei jedem Stoff und macht Name und
     Messwert optisch gleich schwer. Man sieht dann nicht mehr, was Stoff
     und was Zahl ist.

     Richtig ist der umgekehrte Weg: der Tabellenkopf bleibt mobil STEHEN
     und beschriftet alle Zeilen ein einziges Mal. Damit bleibt die Zeile
     das, was sie bei drei Spalten auch ist, nämlich Name links und Werte
     rechtsbündig daneben, gestreckt bis zum Rand. Nur enger und kleiner.

     Deshalb hängt das Skript data-vd-spalte weiterhin an, es wird hier
     aber bewusst NICHT mehr angezeigt. Das Attribut bleibt für
     Screenreader und für spätere Layouts nützlich. */.hpn-vd .hpn-vd__tabelle--breit thead{position:static;width:auto;height:auto;overflow:visible;clip-path:none}/*! Der Strich unter dem Kopf gehört an die ZEILE, nicht an die einzelnen
   Zellen. Hängt er an den Zellen, reißt ihn jeder Spaltenabstand auf und
   es entstehen vier Striche mit Lücken, während die Datenzeilen darunter
   einen durchgezogenen haben. Genau das wirkte unharmonisch, gemeldet von
   Sami am 17.08. Dazu etwas mehr Luft zwischen Kopftext und Strich. */.hpn-vd .hpn-vd__tabelle--breit thead tr{display:flex;align-items:flex-end;gap:var(--sp-2);padding:0 0 var(--sp-3d5);border-bottom:1px solid var(--vd-linie)}.hpn-vd .hpn-vd__tabelle--breit thead th{display:block;padding:0;line-height:1.2;-webkit-hyphens:auto;hyphens:auto;border-bottom:0}.hpn-vd .hpn-vd__tabelle--breit tbody tr{gap:var(--sp-2);padding:var(--sp-2d5) 0}/*! Die Werte bekommen feste Breiten, damit sie untereinander stehen und
     nicht je Zeile wandern. Bei 390 Pixeln und vier Spalten ist die Breite
     knapp, deshalb ist sie hier nachgerechnet und nicht geschaetzt:

       Tabelle 331 px
       zwei Mengenspalten  je 5em bei 12px    =  120 px
       NRV-Spalte          3.4em              =   41 px
       drei Abstaende      je 8px             =   24 px
       bleibt fuer den Namen                  =  146 px

     Die 5em sind der kleinste Wert, bei dem "1000 mg" noch einzeilig steht.
     Bei 4.4em brach es zu "1000" und "mg" um, was schlimmer aussah als der
     eine gesparte Pixel wert war. "100 µg (4000 IE)" bricht weiterhin um,
     das ist bei dieser Laenge unvermeidlich und stoert nur in einer Zeile.

     Die NRV-Spalte ist schmaler, weil dort nur "**", "100 %" oder "2000 %"
     steht. Die 13px gelten NUR fuer die Werte, der Stoffname bleibt bei 14px
     und traegt damit sichtbar mehr Gewicht als die Zahlen daneben. Genau
     diese Hierarchie hat vorher gefehlt. */.hpn-vd .hpn-vd__tabelle--breit thead th:not(:first-child),.hpn-vd .hpn-vd__tabelle--breit tbody td:not(:first-child){flex:0 0 5em;min-width:0;padding-left:0;text-align:right;white-space:normal;overflow-wrap:break-word;font-size:var(--text-xs)}.hpn-vd .hpn-vd__tabelle--breit thead th:last-child,.hpn-vd .hpn-vd__tabelle--breit tbody td:last-child{flex:0 0 3.4em}.hpn-vd .hpn-vd__tabelle--breit thead th:first-child,.hpn-vd .hpn-vd__tabelle--breit tbody td:first-child{flex:1 1 auto;min-width:0;padding-right:var(--sp-1)}/*! davon klebt an seiner Elternzeile, aber nicht am Strich darüber.
   Vorher stand hier padding-top auf 0, dadurch berührte "davon Omega-3-
   Fettsäuren" die Linie der Zeile über ihm fast. Beschluss Sami, 17.08.:
   etwas mehr Luft, aber weniger als über einer normalen Zeile, damit die
   Zugehörigkeit zur Elternzeile sichtbar bleibt. Normale Zeile 10px, hier
   6px. */.hpn-vd .hpn-vd__tabelle-bereich tr.hpn-vd__davon{padding-top:var(--sp-1d5)}.hpn-vd .hpn-vd__tabelle-bereich tr.hpn-vd__davon td{padding-bottom:0}.hpn-vd .hpn-vd__tabelle-bereich tr.hpn-vd__davon td:first-child{padding-left:var(--sp-3d5)}/*! Der Strich über einem neuen Hauptstoff, NUR bei vier und mehr Spalten.

     davon-Zeilen tragen bewusst keinen Strich unten, sonst würden sie von
     ihrer Elternzeile abgeschnitten. Folgt auf die letzte davon-Zeile ein
     neuer Hauptstoff, fehlt dort aber jede Trennung.

     WARUM NUR BEI --breit, Beschluss Sami 17.08.: Der Strich ist ein
     Zusatz für die Fälle, die ihn brauchen, keine Regel für alle Tabellen.
     Bei Omega-D3-K2 braucht es ihn: der Tabellenkopf steht mobil sichtbar
     da, die Zeilen liegen dichter, und unter Fischölkonzentrat hängen drei
     davon-Zeilen am Stück. Ohne Trennung sieht man nicht, wo Vitamin D3
     anfängt. Bei Multi Core mit drei Spalten und einzelnen davon-Zeilen ist
     die Struktur ohne Strich klar, dort wirkten die zusätzlichen Linien
     über Ginseng-Extrakt und Cholin nur unruhig.

     Gelöst über den Nachfolger statt über :has(), das erst in neueren
     Browsern sitzt: die erste normale Zeile nach einer davon-Zeile bekommt
     ihren Strich oben. Gruppenzeilen sind ausgenommen, die trennen als
     getönte Kachel schon selbst.

     WARUM !important: Sobald eine vierspaltige Tabelle von einer Live-Seite
     kopiert wird, liegt deren table-clean-CSS mit "border: none !important"
     an jeder Zeile. Im Bestand gibt es neun weitere vierspaltige und eine
     fünfspaltige Tabelle, die genau so kommen werden. Gegen ein fremdes
     !important hilft keine Spezifität, nur ein eigenes. */.hpn-vd .hpn-vd__tabelle--breit tr.hpn-vd__davon+tr:not(.hpn-vd__davon):not(.hpn-vd__gruppe){border-top:1px solid var(--vd-linie)!important}}/*! Die schließende Klammer eine Zeile höher hat lange gefehlt. Dadurch lagen
   die beiden Blöcke hier drunter INNERHALB der 760px-Abfrage: die
   Bewegungsreduktion galt nur auf schmalen Bildschirmen, und die Druckregel
   war komplett wirkungslos, weil sich screen und print gegenseitig
   ausschließen. Gezählt waren es 62 öffnende gegen 61 schließende Klammern. */@media(prefers-reduced-motion:reduce){.hpn-vd *,.hpn-vd *:before,.hpn-vd *:after{transition:none!important}}@media print{.hpn-vd__liste{display:none!important}}
/*# sourceMappingURL=/cdn/shop/t/182/assets/hpn-volldeklaration.css.map */