/* =====  BASE TYPOGRAPHY  =====
 * Element-Defaults fuer Ueberschriften, Absatz-Text, Listen, Links.
 * hgroup ist der semantische Ersatz fuer die Legacy-.ol/.hl/.sl-Spans,
 * die aber noch fuer Media-Captions und EshopBasket-Item-Titel
 * gebraucht werden. */


/* Super/Subscript */

sub, sup{
font-size: 60%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup{
top: -0.75em;
}

sub{
bottom: -0.25em;
}


/* Small text */

.small{
font-size:var(--fs-xs);
line-height:1rem;
}


/* Headings */

h1{
float:left;
width:100%;
font-size:var(--fs-h1);
margin:1rem 0 .25rem 0;
}

h2{
float:left;
width:100%;
font-size:var(--fs-h2);
margin:1rem 0 .25rem 0;
}

h3{
float:left;
width:100%;
font-size:var(--fs-h3);
margin:1rem 0 .25rem 0;
}

h4{
float:left;
width:100%;
font-size:var(--fs-h4);
margin:1rem 0 .25rem 0;
}

h5{
float:left;
width:100%;
font-size:var(--fs-h5);
margin:1rem 0 .25rem 0;
}

h6{
float:left;
width:100%;
font-size:var(--fs-h6);
margin:1rem 0 .25rem 0;
}


/* Overline / Headline / Subline Spans — purpose-specific fuer
 * <figcaption> in Media-Captions. Inline-Textteile einer Bild-
 * unterschrift, wo <hgroup> semantisch falsch waere, weil figcaption
 * selbst kein Heading-Container ist (HTML5-Spec: hgroup gruppiert
 * h1-h6 mit p — figcaption ist descriptive content).
 *
 * Alle anderen Module (Magazine/Article/Content/Distributor/Search/
 * Product-Cards/EshopBasket) nutzen <hgroup> mit <p>/<h?>. */

.ol{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-m);
}

.hl{
float:left;
width:100%;
margin:0;
padding:0;
font-size:var(--fs-h1);
}

.sl{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-m);
}


/* hgroup — semantic replacement for .ol/.hl/.sl spans.
 *   <hgroup>
 *     <p>overline</p>
 *     <h?>headline</h?>
 *     <p>subline</p>
 *   </hgroup>
 * Tag-Selektoren, keine Klassen noetig. */

hgroup{
float:left;
width:100%;
margin:0 0 .5rem 0;
padding:0;
display:flex;
flex-direction:column;
gap:.25rem;
text-align:left;
}

hgroup > p{
float:left;
width:100%;
margin:0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-m);
line-height:normal;
}

hgroup > :is(h1,h2,h3,h4,h5,h6){
float:left;
width:100%;
margin:0;
padding:0;
text-align:left;
}


/* Paragraphs + links */

p{
color:var(--clr-primary-300);
font-size:var(--fs-p);
line-height:1.4rem;
margin:1rem 0 .25rem 0;
}

a{
color:var(--clr-primary-300);
font-weight:bold;
}


/* Lists */

/* Mobile View > Mobile Only */
@media screen and (max-width: 45rem){

ul,
ol{
float:left;
width:100%;
margin:0 0 0 1rem;
padding:0;
}
}

ul,
ol{
float:left;
width:100%;
margin:.25rem 0 .5rem 0;
}

ul li{
float:left;
text-align:left;
width:100%;
padding:0 0 .15rem 0;
font-size:var(--fs-p);
list-style: none;
}

ul li:before{
display:inline-block;
content:'';
height:.75em;
width:1rem;
background:url('/assets/img/icon/list.svg') no-repeat top left;
}


/* Rule */

hr{
float:left;
width:100%;
height:1px;
margin:1rem 0 .5rem 0;
background:none;
border:none;
border-bottom:var(--brd-primary-100) 1px solid;
}