/* Sezione generica */

.DisplayBlock {
display: block;
}

.DisplayInlineBlock {
display: inline-block;
}

.DisplayInline {
display: inline;
}

.DisplayNone {
display: none;
}

.DisplayFlowroot {
display: flow-root;
}

.FloatLeft {
float: left;
}

.FloatRight {
float: right;
}

.ClearLeft {
clear: left;
}

.ClearRight {
clear: right;
}

.ClearBoth {
clear: both;
}

.width-container {
width: var(--container-width);
}

.Width100 {
width: 100%;
height: auto;
box-sizing: border-box;
}

.Width95 {
width: 95%;
height: auto;
box-sizing: border-box;
}

.Width90 {
width: 90%;
height: auto;
box-sizing: border-box;
}

.Width85 {
width: 85%;
height: auto;
box-sizing: border-box;
}

.Width80 {
width: 80%;
height: auto;
box-sizing: border-box;
}

.Width75 {
width: 75%;
height: auto;
box-sizing: border-box;
}

.Width70 {
width: 70%;
height: auto;
box-sizing: border-box;
}

.Width65 {
width: 65%;
height: auto;
box-sizing: border-box;
}

.Width60 {
width: 60%;
height: auto;
box-sizing: border-box;
}

.Width55 {
width: 55%;
height: auto;
box-sizing: border-box;
}

.Width50 {
width: 50%;
height: auto;
box-sizing: border-box;
}

.Width45 {
width: 45%;
height: auto;
box-sizing: border-box;
}

.Width40 {
width: 40%;
height: auto;
box-sizing: border-box;
}

.Width35 {
width: 35%;
height: auto;
box-sizing: border-box;
}

.Width30 {
width: 30%;
height: auto;
box-sizing: border-box;
}

.Width25 {
width: 25%;
height: auto;
box-sizing: border-box;
}

.Width20 {
width: 20%;
height: auto;
box-sizing: border-box;
}

.Width15 {
width: 15%;
height: auto;
box-sizing: border-box;
}

.Width10 {
width: 10%;
height: auto;
box-sizing: border-box;
}

.Width5 {
width: 5%;
height: auto;
box-sizing: border-box;
}

.Size1 {
font-size: 2rem;
}

.Size2 {
font-size: 1.6rem;
}

.Size3 {
font-size: 1.3rem;
}

.Size4 {
font-size: 1.15rem;
}

.Size5 {
font-size: 1rem;
}

.Size6 {
    font-size: 0.9rem;
}

.Bolder {
font-weight: bolder;
}

.Italic {
font-style: italic;
}

.Left {
text-align: left;
}

.Right {
text-align: right;
}

.Center {
text-align: center;
}

.Justify {
text-align: justify;
text-justify: inter-word;
}

.Top {
vertical-align: top;
}

.Middle {
vertical-align: middle;
}

.Bottom {
vertical-align: bottom;
}

.ClText {
color: var(--text);
}

.ClLink {
color: var(--primary);
}

.ClHeader {
color: var(--text);
}

.ClGray1 {
color: var(--text-muted);
}

.ClGray2 {
color: var(--text-muted);
}

.ClGray3 {
color: var(--text-muted);
}

.Flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}

.FlexRow {
display: flex;
flex-direction: row;
align-items: center;
}

.sr-blank {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border: 0;
font-size: 1px;
clip-path: inset(50%);
}


/* Tabelle */

.Bordered {
border-collapse: collapse;
}

.Bordered th,
.Bordered td {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border);
}

.Bordered th {
background-color: var(--surface-alt);
color: var(--text);
font-weight: 600;
}

.Bordered td {
color: var(--text);
}

.Bordered tr:hover {
background-color: var(--surface-alt);
}

/* Reset essenziale */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header,
main,
footer {
position: relative;
z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.75rem;
line-height: 1.3;
color: var(--text-strong);
letter-spacing: -0.02em;
}

h1 {
font-size: 2rem;
font-weight: 700;
}

h2 {
font-size: 1.6rem;
font-weight: 660;
}

h3 {
font-size: 1.3rem;
font-weight: 630;
}

h4 {
font-size: 1.15rem;
font-weight: 615;
}

h5 {
font-size: 1rem;
font-weight: 600;
}

h6 {
font-size: 0.9rem;
font-weight: 590;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
color: var(--primary);
text-decoration: underline;
}

h1 a:focus-visible,
h2 a:focus-visible,
h3 a:focus-visible,
h4 a:focus-visible,
h5 a:focus-visible,
h6 a:focus-visible {
color: var(--primary);
outline: 2px solid var(--focus);
outline-offset: 2px;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition:
        color 0.2s ease,
        text-decoration-color 0.2s ease;
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

a:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 2px;
}

a:active {
    color: var(--primary-hover);
}

a:visited {
    color: color-mix(in srgb, var(--primary) 75%, var(--text-muted));
}

body {
position: relative;
width: 100%;
min-height: 100vh;
margin: 0;
background-color: var(--background);
color: var(--text);
font-family: 'Inter', 'Noto Sans', 'Roboto', sans-serif;
line-height: 1.5;
display: flex;
flex-direction: column;
align-items: center;
}

div.EyeBox {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75vw;
height: auto;
box-sizing: border-box;
background-image: url("/images/biblos.svg");
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
filter: opacity(0.04) blur(5px);
mix-blend-mode: multiply;
z-index: 0;
pointer-events: none;
}

.site-main {
margin-top: 5rem;
width: 100%;
padding: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}

@media (max-width: var(--media-width)) {

.site-main {
margin-top: 4rem;
}

}