/* ==========================================================================
   teolaf.ch — Matteo Laffranchi

   Type scale from the original 9.5 site (Bootstrap 3 + "Business Casual"):
   14px / 1.428 base, Times serif, 1015px content column with 15px padding.
   Colours come from the palette the live site actually serves — see below.

   The one deliberate departure: on wide screens the navigation is a fixed
   column on the left instead of a bar across the top. Below 1024px it folds
   back into the hamburger.
   ========================================================================== */

/* Palette taken from the LIVE site's served CSS, not from the stylesheet files in
   typo3conf/ext/mydistribution2 — those are stale and still carry the older
   #dcd9c5 / #93885b / "background: red" values. Production defines:
       --bg-color: #d4d2c6   --main-color: #80744f   --secondary-color: #a19059  */
:root {
    --tl-beige: #d4d2c6;        /* --bg-color      : page and container ground */
    --tl-olive: #80744f;        /* --main-color    : body copy, headings, link hover */
    --tl-link: #a19059;         /* --secondary-color: links and rules */
    --tl-olive-dark: #6f6746;
    --tl-rule: #a19059;
    --tl-white: #ffffff;

    --tl-maxw: 1015px;
    --tl-sidebar: 210px;

    /* landing page only: the wordmark green and the muted olive of the menu, both sampled
       from "LandingPage 26.pdf", plus the typewriter face that design is set in */
    --tl-green: #7eb743;
    --tl-landing-ink: #ada789;
    --tl-mono: "Courier New", Courier, monospace;
    /* exactly the old site's stack. Do NOT add "Times New Roman": without it a machine that
       lacks "Times" falls through to Georgia, which is what the original renders. */
    --tl-serif: "Times", "Georgia", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--tl-beige);
    color: var(--tl-olive);
    font-family: var(--tl-serif);
    font-size: 14px;          /* Bootstrap 3 base, as on the old site */
    line-height: 1.42857143;
}

img { max-width: 100%; height: auto; display: block; }

/* links are --secondary-color, hover --main-color, as the live site serves them */
a, a:link, a:visited { color: var(--tl-link); text-decoration: none; outline: none; }
a:hover, a:focus { color: var(--tl-olive); text-decoration: none; }

p {
    font-size: 1.1em;
    line-height: 1.4;
    color: var(--tl-olive);
    margin: 0;
    padding-bottom: 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tl-serif);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--tl-olive);
}
h1 { font-size: 1.1em; font-weight: 300; margin: 20px 0 10px; }
h2 { font-size: 1.1em; margin: 0 0 5px; }
h3 { font-size: 1.1em; font-weight: 300; line-height: 1.6; margin: 20px 0 10px; }

hr {
    max-width: 400px;
    border: 0;
    border-top: 1px solid var(--tl-rule);
    margin: 20px auto;
}

.tl-container {
    width: 100%;
    max-width: var(--tl-maxw);
    margin: 0 auto;
    padding: 0 15px;
}

/* Skip link ---------------------------------------------------------------- */
.tl-skip { position: absolute; left: -9999px; top: 0; background: var(--tl-olive); color: var(--tl-beige); padding: 12px 16px; z-index: 100; }
.tl-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Header — narrow screens: a bar with the wordmark and a hamburger
   -------------------------------------------------------------------------- */
.tl-header {
    background: var(--tl-beige);
    border-bottom: 1px solid var(--tl-rule);
}

.tl-header__inner {
    position: relative;
    width: 100%;
    max-width: var(--tl-maxw);
    margin: 0 auto;
    padding: 12px 15px 0;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.tl-brand {
    display: inline-block;
    font-size: 18px;             /* .navbar-brand { font-size: 18px; line-height: 20px } */
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tl-olive);      /* .navbar-default .navbar-brand */
    margin-right: auto;
    padding: 15px 0;
    white-space: nowrap;
}

/* three stacked bars, no surrounding box and no label */
.tl-navtoggle {
    display: block;
    background: none;
    border: 0;
    padding: 12px 0;
    cursor: pointer;
    color: var(--tl-olive);
    line-height: 0;
}
.tl-navtoggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    margin: 0 0 4px;
}
.tl-navtoggle__bar:last-of-type { margin-bottom: 0; }

/* open state: top and bottom bars cross, middle one disappears */
.tl-navtoggle__bar { transition: transform .2s ease, opacity .15s ease; }
.tl-navtoggle.is-open .tl-navtoggle__bar:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
.tl-navtoggle.is-open .tl-navtoggle__bar:nth-of-type(2) { opacity: 0; }
.tl-navtoggle.is-open .tl-navtoggle__bar:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }

.tl-nav { display: none; flex-basis: 100%; padding-bottom: 12px; }
.tl-nav.is-open { display: block; }

.tl-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* pre-line honours the newlines stored in nav_title, reproducing the
   hand-written <br/> breaks of the original labels */
.tl-nav__link {
    display: inline-block;
    white-space: pre-line;
    font-size: 1em;              /* .navbar-nav { font-size: 1em } -> 14px */
    /* bold: the live markup is <a><b>Für die<br/>Öffentlichkeit</b></a>, so the inner <b>
       wins over .navbar-nav { font-weight: 400 } */
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.35;
    color: var(--tl-link);       /* .navbar-default .navbar-nav > li > a */
    padding: 5px 0;
}
.tl-nav__link:hover,
.tl-nav__item--active > .tl-nav__link { 
    color: var(--tl-olive);
    font-weight: bolder;
 }

/* A "Menu separator" page is a group title with no page behind it, so it is a <span>, not a
   link. Its subpages are listed underneath in their own casing - the way the design writes
   them ("freie Kunst", not "FREIE KUNST"). */
.tl-nav__title {
    display: block;
    white-space: pre-line;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.35;
    color: var(--tl-link);
    padding: 5px 0;
}
/* When the visitor is on one of a group's subpages the separator itself is marked active,
   so it reads as the current section - matching the active link treatment above. */
.tl-nav__item--active > .tl-nav__title {
    color: var(--tl-olive);
    font-weight: bolder;
}

.tl-nav__sub { list-style: none; margin: 0; padding: 0 0 4px 12px; }
.tl-nav__link--sub { font-weight: 400; letter-spacing: 1px; text-transform: none; }

/* The group title is a button here too, so it needs the same stripping back to plain text.
   Only the properties .tl-nav__title does not already set are touched, so the type stays put. */
.tl-nav__toggle {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    margin: 0;
    width: auto;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.tl-nav__toggle:hover,
.tl-nav__toggle:focus-visible { color: var(--tl-olive-dark); }

/* Collapsed groups. The class comes from JavaScript, so with it switched off the lists stay
   open. A simple reflow is right here - unlike beside the circle, a vertical menu is expected
   to grow downwards when a group opens. */
.tl-nav__item--group.is-collapsible .tl-nav__sub { display: none; }
.tl-nav__item--group.is-collapsible.is-open .tl-nav__sub { display: block; }

/* Main --------------------------------------------------------------------- */
.tl-main { padding: 20px 0 45px; min-height: 50vh; }

/* Content elements --------------------------------------------------------- */
.frame { margin: 0 0 25px; }

.frame-type-textpic header,
.frame-type-textmedia header { margin-bottom: 5px; }

/* the image element's header is rendered below the pictures (see Image.fluid.html):
   a small, unemphasised label. The lightbox shows the same title in bold instead. */
.frame-type-image header { margin: 8px 0 0; }
.frame-type-image header h1,
.frame-type-image header h2,
.frame-type-image header h3,
.frame-type-image header h4 {
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.35;
    margin: 0;
    color: var(--tl-olive);
}

.frame-type-text,
.frame-type-textpic,
.frame-type-textmedia { max-width: 70ch; }

.frame-type-div { margin: 20px 0; }
.ce-div, .frame-type-div hr {
    border: 0;
    border-top: 1px solid var(--tl-rule);
    max-width: 400px;
    margin: 20px auto;
}

.ce-gallery figcaption { font-size: 1.25em; color: var(--tl-olive); }

/* Alignment and spacing classes emitted by fluid_styled_content.
   header_position -> ce-headline-*, and the frame spacing values are the live site's. */
.ce-align-left    { text-align: left; }
.ce-align-center  { text-align: center; }
.ce-align-right   { text-align: right; }
.ce-headline-left   { text-align: left; }
.ce-headline-center { text-align: center; }
.ce-headline-right  { text-align: right; }

.frame-space-before-extra-small { margin-top: 1em; }
.frame-space-before-small       { margin-top: 2em; }
.frame-space-before-medium      { margin-top: 3em; }
.frame-space-before-large       { margin-top: 4em; }
.frame-space-before-extra-large { margin-top: 5em; }
.frame-space-after-extra-small  { margin-bottom: 1em; }
.frame-space-after-small        { margin-bottom: 2em; }
.frame-space-after-medium       { margin-bottom: 3em; }
.frame-space-after-large        { margin-bottom: 4em; }
.frame-space-after-extra-large  { margin-bottom: 5em; }

/* Container rows ----------------------------------------------------------- */
.tl-row {
    display: grid;
    gap: 20px;
    align-items: start;
    margin: 0 0 25px;
}
.tl-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tl-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tl-col { min-width: 0; }
.tl-col > .frame:last-child { margin-bottom: 0; }

/* Gallery ------------------------------------------------------------------
   Images fill their column at natural proportions, no frame — the old site
   rendered .image-embed-item as width:100%; height:auto. A single image is
   NOT capped: on the old site it spans the full content width. */
.tl-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    align-items: start;
    margin: 0;
}

.tl-gallery[data-images="1"] { grid-template-columns: minmax(0, 1fr); }

.tl-gallery__cell { min-width: 0; }

.tl-gallery__item { display: block; cursor: zoom-in; }

/* per-image title, shown under the picture when the element itself has no header */
.tl-gallery__label {
    display: block;
    margin-top: 8px;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.35;
    color: var(--tl-olive);
}

/* decorative images: no pointer, no lightbox — "Click-enlarge" is unticked */
.tl-gallery__static { display: block; cursor: default; }
.tl-gallery__static img { width: 100%; height: auto; border: 0; padding: 0; }
.tl-gallery__item img { width: 100%; height: auto; border: 0; padding: 0; }
.tl-gallery__item--linked { cursor: pointer; }

/* video/audio thumbnails: a play triangle so it reads as playable, not as a photo.
   lightbox.js adds --media once it recognises the href as a media file. */
/* a video used as its own preview: same box as an image */
.tl-gallery__preview {
    width: 100%;
    height: auto;
    display: block;
    background: #000;
}

.tl-gallery__item--media { position: relative; }
.tl-gallery__item--media::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(28, 26, 18, .18);
    transition: background .2s ease;
}
.tl-gallery__item--media::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* triangle, optically centred inside its circle */
    margin: -16px 0 0 -8px;
    border-style: solid;
    border-width: 16px 0 16px 26px;
    border-color: transparent transparent transparent rgba(255, 255, 255, .92);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
    transition: transform .2s ease;
}
.tl-gallery__item--media:hover::before { background: rgba(28, 26, 18, .08); }
.tl-gallery__item--media:hover::after  { transform: scale(1.08); }
.tl-gallery__item:focus-visible { outline: 2px solid var(--tl-olive); outline-offset: 2px; }

.tl-gallery__cell video,
.tl-gallery__cell iframe { width: 100%; height: auto; display: block; }

/* Lightbox ----------------------------------------------------------------- */
.tl-lb {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 48px 24px 32px;
    background: rgba(28, 26, 18, .95);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.tl-lb.is-open { opacity: 1; visibility: visible; }

.tl-lb__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 100%; }

.tl-lb__img,
.tl-lb__video {
    max-width: min(100%, 1400px);
    max-height: 76vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.tl-lb__video {
    display: block;
    background: #000;
    /* a video with controls needs a sane minimum or the bar crowds the picture */
    min-width: min(100%, 480px);
}

.tl-lb__caption { color: var(--tl-beige); text-align: center; max-width: 60ch; font-family: var(--tl-serif); }
.tl-lb__title { display: block; font-size: 1.15em; font-weight: 700; letter-spacing: 1px; }
.tl-lb__text {
    display: block;
    margin-top: 6px;
    font-size: 1em;
    font-weight: 400;
    line-height: 1.45;
    color: #b8b39a;
    white-space: pre-line;   /* renders the \n between materials and "Privatbesitz" */
}

.tl-lb__close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: 0;
    color: var(--tl-beige);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    font-family: var(--tl-serif);
}
.tl-lb__close:hover { color: var(--tl-white); }
.tl-lb__spinner { color: #8d8875; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

body.tl-lb-open { overflow: hidden; }

/* ==========================================================================
   Landing page  ("LandingPage 26.pdf" / "Navigation phone 1+2.pdf")

   No header and no sidebar here: the menu IS the page. One grid holds the wordmark, the five
   menu entries and the picture, which lets the entries sit to the left of, to the right of and
   below the circle. On phones the same markup becomes the single list of the phone mockups.

   Everything is typed by the editor: casing and line breaks come from each page's navigation
   title (white-space: pre-line), and the position around the picture follows the order of the
   page tree.
   ========================================================================== */
.tl-landing {
    --tl-landing-image: min(46vw, 520px);

    display: grid;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 15px 45px;
    grid-template-columns: 1fr;
    grid-template-areas:
        "nav"
        "fig"
        "brand";
    row-gap: clamp(16px, 3vw, 40px);

    font-family: var(--tl-serif);
    font-size: clamp(12px, 1.15vw, 16px);
    line-height: 1.45;
    color: var(--tl-link);
}

.tl-landing__brand {
    grid-area: brand;
    justify-self: center;
    color: var(--tl-green);
    font-size: 3em;
}

.tl-landing__figure { grid-area: fig; justify-self: center; max-width: var(--tl-landing-image); }
.tl-landing__figure .frame { margin: 0; }
.tl-landing__figure img { width: 100%; height: auto; }

/* on phones the entries become cells of a list grid (see the phone media query); on wide
   screens the <nav> is a flex row above the picture */
.tl-landing__nav { display: contents; }

.tl-landing__title,
.tl-landing__link {
    display: block;
    white-space: pre-line;
    color: var(--tl-link);
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.2em; 
}
a.tl-landing__link:hover,
a.tl-landing__link:focus,
.tl-landing__link--active { color: var(--tl-olive); }

.tl-landing__sub { list-style: none; margin: .4em 0 0; padding: 0; }

/* A group title is a button, so it has to be stripped back to plain text. text-align is
   inherited on purpose: it is what makes the left-hand groups stay right-aligned. */
.tl-landing__toggle {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--tl-link);
    text-align: inherit;
    font-size: 1.2em; 
    cursor: pointer;
}
.tl-landing__toggle:hover,
.tl-landing__toggle:focus-visible { color: var(--tl-olive); }

/* Collapsed groups. The class is added by JavaScript, so with JavaScript switched off the
   lists simply stay open and every link remains reachable. */
.tl-landing__item--group.is-collapsible .tl-landing__sub { display: none; }
.tl-landing__item--group.is-collapsible.is-open .tl-landing__sub { display: block; }

/* Wide screens: the five entries sit in one horizontal row above the picture, the wordmark
   is centred underneath it. */
@media (min-width: 768px) {
    .tl-landing__nav {
        grid-area: nav;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: clamp(1.5em, 5vw, 4.5em);
    }
    .tl-landing__item {
        position: relative;
        text-align: center;
    }
    .tl-landing__title { text-align: center; }

    /* a collapsible group's links hang underneath its title, centred, without widening the
       row - so the titles keep their place whether the group is open or shut */
    .tl-landing__item--group.is-collapsible .tl-landing__sub {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        margin-top: .4em;
        text-align: center;
    }
    .tl-landing__item--group.is-collapsible.is-open .tl-landing__sub { display: block; }
}

/* Phones: the wordmark, then the entries as one list - a group title on the left with its
   links in a second column beside it - and the picture underneath. */
@media (max-width: 767px) {
    .tl-landing {
        display: block;
        padding: 14px 15px 24px;
        font-size: 14px;
    }
    .tl-landing__brand { display: block; padding-bottom: 1em; }
    .tl-landing__nav {
        display: grid;
        grid-template-columns: max-content 1fr;
        column-gap: 1.1em;
        row-gap: 1em;
        margin-bottom: 18px;
    }
    /* The title and the sub-list become cells of the list grid, so every group's links start
       at the same left edge no matter how wide its title is. The explicit columns are what
       keeps the pairs together: without them the cells would simply flow on and an entry
       without subpages would push the next group out of line. */
    .tl-landing__item { display: contents; }
    /* align-self keeps the title on the line of the group's FIRST link instead of letting the
       grid centre it against the whole list, which is how the phone mockup has it */
    .tl-landing__title { grid-column: 1; align-self: start; }
    .tl-landing__sub { grid-column: 2; margin: 0; }
}

/* --------------------------------------------------------------------------
   Wide screens: navigation becomes a fixed column on the left
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .tl-header {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--tl-sidebar);
        border-right: 1px solid var(--tl-rule);
        border-bottom: 0;
        overflow-y: auto;
        z-index: 40;
    }

    .tl-header__inner {
        display: block;
        max-width: none;
        margin: 0;
        padding: 30px 20px;
    }

    /* the old site hides its wordmark on desktop; the hamburger is gone too */
    .tl-brand { display: none; }
    .tl-navtoggle { display: none; }

    .tl-nav {
        display: block;
        flex-basis: auto;
        padding: 0;
    }

    .tl-nav__list {
        flex-direction: column;
        gap: 18px;
    }

    .tl-nav__link { padding: 0; }

    .tl-main { margin-left: var(--tl-sidebar); }
}

/* Phones: everything stacks, one image per row ------------------------------
   767px is Bootstrap 3's `sm` breakpoint, which is the one the old site used:
   its grid columns are `col-sm-*`, floated only from 768px upwards, so below
   that each column - and with it each image - fills the full width. Both the
   container rows and the gallery follow that rule here, so a phone shows a
   single picture per row instead of two small ones. */
@media (max-width: 767px) {
    .tl-row--2,
    .tl-row--3 { grid-template-columns: minmax(0, 1fr); }
    .tl-row { gap: 12px; }
    .tl-gallery { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}