/* ==========================================================================
   asc-frame.css - ASC design-language frame for the vsc.ac.at bridge site.

   Tokens and anatomy mirror the successor implementation's conventions
   (primary red #d62828, neutrals #ececec/#d9d9d9, 1rem box radius, soft
   shadows, Inter stack), re-expressed as plain CSS for this package. No
   framework is loaded. Frontend only; the TYPO3 backend is untouched.

   Sections:
     A. base: tokens, reset, body, main container, skip link, site header
     B. main navigation (red identity bar)
     C. main grid: plain sidebar column + content column + content typography
     D. light footer with plain partner crests
   ========================================================================== */

/* --- A. base -------------------------------------------------------------- */

/* overflow-y: scroll always-on gutter: keep the centered 1000px container perfectly still when
   pages toggle scrollbar presence - measured class ~7px left (container left 466->459, navbar 280->273). */
html {
    overflow-y: scroll;
}

:root {
    --asc-primary: #d62828;
    --asc-primary-content: #ffffff;
    --asc-base-100: #ffffff;
    --asc-base-200: #f2f2f2;
    --asc-base-300: #d9d9d9;
    --asc-base-content: #000000;
    --asc-bar-hover: #fe9776;
    --asc-column-rule: #c0c0c0;
    --asc-radius-field: 0.5rem;
}

*,
::before,
::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background-color: var(--asc-base-200);
    color: var(--asc-base-content);
    font-family: "Inter", ui-sans-serif, system-ui, Arial, sans-serif;
    font-size: 0.9em;
}

/* True-old link discipline (general.css): red, un-underlined, underline on
   hover. Sections with their own link colours override these. */
a {
    color: var(--asc-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* No global height:auto: it would overrule the footer crests' height
   attributes (presentational hints lose to every author rule). Responsive
   height is scoped to the content column; brand and crests size explicitly. */
img {
    max-width: 100%;
    border: 0;
}

/* True-old #maincontainer: the whole frame (header, bar, columns, footer)
   lives in one white 1000px container with a soft drop shadow on the light
   gray page. Square corners - the old design has no radii. */
.maincontainer {
    width: 1000px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--asc-base-100);
    box-shadow: 0 0.3rem 0.4rem rgba(0, 0, 0, 0.15);
}

/* Honour the OS-level "reduce motion" preference site-wide. */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.5rem 1rem;
    border-radius: 0 0 var(--asc-radius-field) 0;
    background: var(--asc-primary);
    color: var(--asc-primary-content);
    text-decoration: none;
}

.skip-link:focus {
    left: 0;
}

/* --- A. site header: big horizontal ASC logo --------------------------------

   Sheet-verbatim anatomy (general.css + template-body.html structure):
     #header     { background-color:#fff; top:5px; height:90px;
                   position:relative }
     #headerflex { display:flex, flex-direction:row, align-items:end;
                   margin-top:20px }
     #logo       { float:left; margin-left:20px; margin-top:20px }
   The two 20px margins do two different jobs, exactly like the original:
   #headerflex's margin-top collapses up through header and container into
   the 20px page-background strip above the container; #logo's margin-top
   sits on a flex item, so it is held in place INSIDE the header - the
   white air above the logo. The logo itself is the template's
   <img width="225"> of the horizontal lockup. (An earlier round had the
   logo margin on a plain block child, where it collapsed outward and
   glued the logo to the container's top edge.) */

.site-header {
    height: 90px;
    position: relative;
    top: 5px;
    background: var(--asc-base-100);
}

.headerflex {
    display: flex;
    align-items: end;
    margin-top: 20px;
}

.brand {
    margin: 20px 0 0 20px;
}

.brand img {
    display: block;
    width: 225px;
    height: auto;
}

/* Small viewports keep the same look scaled down: capped logo height plus an
   82vw hard backstop and a lead-in margin so the lockup never touches the
   viewport edge. */
@media (max-width: 640px) {
    .site-header {
        height: auto;
        top: 0;
    }

    .headerflex {
        margin-top: 0.75rem;
    }

    .brand {
        margin: 0 0 0.75rem 0.5rem;
    }

    .brand img {
        width: auto;
        height: 2.75rem;
        max-width: 82vw;
    }
}

/* --- B. main navigation: red identity bar -----------------------------------

   Sheet-verbatim (general.css). The old #hmenu carries the geometry:
     #hmenu  { background-color:#d62828; border-bottom:5px solid #fff;
               padding-left:4px; height:35px; width:996px; font-size:16px;
               float:left; display:block }                          (L103-118)
   painted 5px below its layout slot via #maincontent's relative top:5px
   (L95-101). The 5px white band under the bar is the border-bottom. Items:
     #hmenu a       { color:#fff; text-decoration:none }            (L120-123)
     #hmenu a:hover { background-color:#fe9776; color:#fff }        (L125-128)
     #hmenu ul      { display:inline }                              (L130-133)
     #hmenu li      { background-color:#d62828; border:3px solid #d62828;
                      margin-right:0px; margin-left:15px; margin-top:4px;
                      float:left; display:block; position:relative } (L135-145)
   Text is ALWAYS white, on every item, active or not. The active section
   wears the original "small pedestal" - the sheet's horizontal_act:
     #hmenu li.horizontal_act { border-bottom:9px solid #fff;
                                font-weight:bold }                  (L147-151)
   i.e. the li hugs its text and the white 9px band sits along the item
   bottom, below the text. (No light pills, no red text in the bar; the
   earlier white-tab rendering was dropped per user ruling - the sheet is
   the law, screenshots only show the general layout.) */

/* Sheet's height:35px is content-box speak: 35px of red + the 5px white
   band border. In our global border-box that meaning is 40px total -
   same box-model translation as the column widths, documented in the
   README mapping. */
.main-nav {
    position: relative;
    top: 5px;
    height: 40px;
    padding-left: 4px;
    background: var(--asc-primary);
    border-bottom: 5px solid var(--asc-base-100);
}

.main-menu {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
}

.main-menu li {
    display: flex;
    position: relative;
    margin-left: 15px;
    margin-top: 4px;
    border: 3px solid var(--asc-primary);
    background: var(--asc-primary);
}

.main-menu a {
    display: flex;
    align-items: center;
    color: var(--asc-primary-content);
    text-decoration: none;
}

.main-menu a:hover {
    background: var(--asc-bar-hover);
    color: var(--asc-primary-content);
}

/* Active section: bold white text on the red bar + the 9px white pedestal
   under the text (sheet #hmenu li.horizontal_act, verbatim). */
.main-menu li.is-active {
    border-bottom: 9px solid var(--asc-base-100);
    font-weight: 700;
}

/* Below the container width the bar wraps instead of pinning its height. */
@media (max-width: 1023px) {
    .main-nav {
        height: auto;
        min-height: 40px;
    }

    .main-menu {
        flex-wrap: wrap;
    }
}

/* --- C. main grid: plain sidebar column + content column ---------------------- */

/* Sheet-verbatim column row (general.css): the old #maincontent carries a
   relative top:5px (L95-101) and #main another top:5px plus
   border-bottom:3px solid #fff (L258-264) - net +10px paint offset and the
   white band below the columns, applied to our flatter tree as one
   declaration. The column rule stretches with the taller side. */
.page-main {
    display: flex;
    align-items: stretch;
    position: relative;
    top: 10px;
    border-bottom: 3px solid var(--asc-base-100);
}

/* Sheet-verbatim sidebar (general.css). Class names stay ours; the rules
   reproduce the exact numbers of the original #vmenu ids/levels:
     #vmenu   { background-color:#fff; padding:15px 12px; width:24.1%;
                float:left; overflow:hidden; position:relative;
                font-size:1.2em }                                 (L153-161)
     (width:24.1% there is content-box: 241px + 24px lateral padding = 265px,
      i.e. 26.5% in our border-box - the translation is the only edit.)
     #vmenu a / #vmenu a:hover                                    (L163-171)
   level-1 title - landing renders as plain text (CUR), child pages as a
   red bold link (ACT):
     #level1 li      { padding:5px 0 5px 10px; width:230px;
                       display:inline-block }                      (L179-183)
     #home li a, #level1 li a { padding:5px 0 5px 0px; width:230px;
                       display:inline-block }                      (L204-214)
     #level1 li.active { font-weight:bold }                        (L234-237)
   children:
     #level2 li      { margin-left:20px; padding:2px 0 0px 10px;
                       width:210px; font-size:0.8em; display:inline-block }
                                                                   (L185-193)
     #level2 li a    { margin-left:0px; padding:4px 0 0px 0px;
                       width:210px; display:inline-block; font-weight:normal }
                                                                   (L216-223)
     #level2 li.active a { font-weight:bold }                      (L239-242)
   nested third level (not currently fed by the menu processor; rules ported
   for completeness):
     #level3 li      { padding:2px 0; width:190px; font-size:0.9em;
                       display:inline-block }                      (L195-202)
     #level3 li a    { padding:0; width:190px; display:inline-block }
                                                                   (L225-232)
   Deliberately skipped lines: #level1.select-by {font-size:16px} (markup
   never rendered), #level3 li.act a {font-style:bold} (invalid declaration,
   ignored by browsers). */

.sidebar-col {
    flex: 0 0 auto;
    width: 26.5%;
    padding: 15px 12px;
    background: var(--asc-base-100);
    position: relative;
    overflow: hidden;
    font-size: 1.2em;
}

.sidebar-title {
    display: inline-block;
    width: 230px;
    max-width: 100%;
    margin: 0;
    padding: 5px 0 5px 10px;
    color: #000;
    font-size: 1em;
    font-weight: 400;
}

a.sidebar-title {
    color: var(--asc-primary);
    font-weight: 700;
    text-decoration: none;
}

a.sidebar-title:hover {
    text-decoration: underline;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-menu li {
    display: inline-block;
    width: 210px;
    max-width: 100%;
    margin-left: 20px;
    padding: 2px 0 0 10px;
    font-size: 0.8em;
    font-style: normal;
    font-weight: normal;
}

.sidebar-menu a {
    display: inline-block;
    width: 210px;
    max-width: 100%;
    margin-left: 0;
    padding: 4px 0 0 0;
    color: var(--asc-primary);
    text-decoration: none;
}

.sidebar-menu a:hover {
    text-decoration: underline;
}

/* Active child: bold red only (#level2 li.active a). */
.sidebar-menu a.is-active {
    color: var(--asc-primary);
    font-weight: 700;
}

/* Third level (#level3), if the menu data ever carries it. */
.sidebar-menu .sidebar-menu li {
    padding: 2px 0;
    width: 190px;
    font-size: 0.9em;
}

.sidebar-menu .sidebar-menu a {
    padding: 0;
    width: 190px;
}

/* Sheet-verbatim columns: #content { border-bottom:3px solid #fff;
   padding:0 15px; clear:both } (L266-270) and #contentsub { border-left:
   1px solid #c0c0c0; border-bottom:3px solid #fff; padding:0 15px;
   width:70%; float:left } (L272-278). width:70% there is content-box -
   700px + 30px padding + 1px rule = 731px = 73.1% border-box here. Without
   a sidebar (error views) the column spans the full container (#content's
   role), also white-on-white with flat geometry. */
.content-col {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 15px;
    border-bottom: 3px solid var(--asc-base-100);
}

.sidebar-col + .content-col {
    flex: 0 0 auto;
    width: 73.1%;
    border-left: 1px solid var(--asc-column-rule);
}

@media (max-width: 1023px) {
    .page-main {
        flex-direction: column;
    }

    .sidebar-col {
        flex: none;
        width: auto;
    }

    .sidebar-col + .content-col {
        width: auto;
        border-left: 0;
    }
}

/* --- C. content typography (migrated rich-text bodies render unclassed) --- */

/* True-old content type: the old sheets set no heading sizes or paragraph
   spacing at all, so this follows the browser-default rhythm they showed
   (h1 2em/0.67em margins, h2 1.5em/0.83em, h3 1.17em/1em, h4 1em/1.33em,
   paragraphs and lists 1em, list indents 40px) on the 0.9em body size. */

.content-col > *:first-child,
.content-col > *:first-child > *:first-child {
    margin-top: 0;
}

.content-col h1,
.content-col h2,
.content-col h3,
.content-col h4,
.content-col h5,
.content-col h6 {
    color: #000;
    font-weight: 700;
    line-height: 1.3;
}

.content-col h1 { font-size: 2em; margin: 0.67em 0; }
.content-col h2 { font-size: 1.5em; margin: 0.83em 0; }
.content-col h3 { font-size: 1.17em; margin: 1em 0; }
.content-col h4 { font-size: 1em; margin: 1.33em 0; }

.content-col p,
.content-col ul,
.content-col ol,
.content-col pre {
    margin: 1em 0;
}

.content-col ul {
    list-style: disc;
    padding-left: 2.5rem;
}

.content-col ol {
    list-style: decimal;
    padding-left: 2.5rem;
}

/* Content images scale down with the column; square corners kept
   (general.css img { border: none }). */
.content-col img {
    height: auto;
}

/* True-old detail: thin light rules between sections. */
.content-col hr {
    margin: 0.5em 0;
    border: 0;
    border-top: 1px solid var(--asc-column-rule);
}

.content-col blockquote {
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 4px solid var(--asc-primary);
    color: rgba(0, 0, 0, 0.6);
    font-style: italic;
}

.content-col table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.925rem;
}

.content-col th,
.content-col td {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--asc-base-300);
    text-align: left;
    vertical-align: top;
}

.content-col th {
    background: var(--asc-base-200);
}

.content-col iframe {
    max-width: 100%;
}

/* Centered content-element layouts: the old sheets never styled FSC's
   ce-* classes, so center-flagged headers and figures fell back to left;
   the design language centers them (homepage news block, lead image). */
.content-col .ce-headline-center,
.content-col .ce-center,
.content-col .bodytext-center {
    text-align: center;
}

.content-col .ce-center img {
    margin-left: auto;
    margin-right: auto;
}

/* --- D. footer: light band, © + red links left, partner crests right ---------

   Sheet-verbatim (general.css + template-body.html). The band is the old
   #footer { margin-top:12px; margin-left:0px; background-color:#fff;
   color:#555555; font-size:0.8em; display:block; height:142px;
   position:relative; clear:both }                                (L292-303)
   (clear:both is float-era and a no-op on our flex layout - skipped).
   Left column is #contact { margin:24px 0 0 18px; padding:0 5px;
   width:237px; float:left; font-weight:bold }                    (L305-311)
   holding the © line plus the template's space-evenly bold Contact/
   Imprint row. #contact a { color:#fff } (L313-315) matches no element in
   the 2023 template (no links inside #contact) - note only. Right block is
   #footerlogos { padding:0 15px; width:704px; float:right; display:flex;
   justify-content:space-evenly }                                 (L317-328)
   with .footerlogo { float:left; margin:42px 10px }              (L331-334)
   and the template's per-crest height attributes. */

.site-footer {
    margin-top: 12px;
    margin-left: 0;
    height: 142px;
    position: relative;
    background: var(--asc-base-100);
    color: #555555;
    font-size: 0.8em;
}

.site-footer-inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.footer-left {
    width: 237px;
    margin: 24px 0 0 18px;
    padding: 0 5px;
}

.footer-copy {
    margin: 0;
    font-weight: 700;
}

.footer-links {
    display: flex;
    justify-content: space-evenly;
    margin-top: 12px;
}

.footer-links a {
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

.partner-logos {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    width: 704px;
    padding: 0 15px;
}

.partner-logo {
    margin: 42px 10px;
}

/* Crest heights come from the template's height attributes
   (30/27/30/22/22/30/30); no author-level height rule, so they hold. */
.partner-logo img {
    display: block;
}

@media (max-width: 1023px) {
    .site-footer {
        height: auto;
    }

    .site-footer-inner {
        flex-direction: column;
        height: auto;
        padding-bottom: 1rem;
    }

    .footer-left {
        width: auto;
    }

    .partner-logos {
        flex-wrap: wrap;
        width: auto;
        margin-top: 1rem;
    }

    .partner-logo {
        margin: 0.25rem 10px;
    }
}