/* ============================================================================
   BASE.CSS: Reset of all browser specific settings and elements
             Initial clean-up of the windows. 
			 Important to ensure a consistent and browser-independent style.
			 No layout and no styles are defined here.
             Specific style will be defined in layout.css and theme.css
             Layout.css and theme.css must be loaded after base.css is called.
   ============================================================================ */

/* Box model */
*,
*::before,
*::after {
    box-sizing: border-box; /* all elements are included in the box model; no addition spaces/ borders */
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth; /* Enables a smooth anf fluent scrolling */
}

/* Basis */
body {
    margin: 0;
    min-height: 100vh; /* Full height of the screen is used. Ration of side diemenstions is considered */
}

/* Media */
img, picture, svg, video, canvas {
    display: block; /* No additional spaces */
    max-width: 100%; /* Full width od the screen is used */
    height: auto; /* Aspect ration is maintained */
}

/* Form elements */
input, button, textarea, select {
    font: inherit; /* Use same scripts for all elements  */
}

/* Form elements */
input, textarea, select {
    width: 100%; /* Full width of container is used */
}

/* Buttons */
button {
    cursor: pointer; /* Automatic recognition of button at mouse-over (change mouse from arrow to hand) */
}

/* Lists */
ul, ol {
    margin: 0; /* No additional spaces */
    padding: 0; /* No additional paddings */
    list-style: none; /* no items and no indentation */
}

/* Titles/ captions */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0; /* No additional spaces */
    line-height: 1.2; /* Line height for better readability */
}

/* Paragraphs */
p {
    margin-top: 0; /* No additional spaces */
    margin-bottom: 0; /* No space between paragraphs*/
}

/* Links*/
a {
    text-decoration: none; /* No underline for links; Normal text style is used */
    color: inherit; /* Links have the same color as the surrounding text */
}

/* Tables */
table {
    border-collapse: collapse; /* Borders of adjacent cells are merged into a single border */
    border-spacing: 0; /* No space between cells */
}

/* Hidden elements*/
[hidden] {
    display: none !important; /* Enforces to hide all elements */
}

/* Accessibility */
:focus-visible {
    outline: 2px solid currentColor; /* Focus will be well visible for keyboard navigation (Necessary for accessibility)*/
    outline-offset: 2px;    /* Width of the focus outline */
}

/* Auxiliary class for screen readers --> necessary that also screen readers can read the content */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}