/* ==========================================================================
   doebereiner.com — ported theme CSS, composed in four parts (spec §6.5).
   Sources: TYPO3 core fluid_styled_content default CSS (rendered inline
   <style> block, verified against data/snapshot/index.html), then
   fileadmin/templates/inline.css verbatim, then the live half of
   fileadmin/templates/style.css, then two named class substitutions.
   Not reverse-engineered from rendered HTML — ported from the theme files.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PART 1 — the needed slice of TYPO3 core's fluid_styled_content CSS.
   Only the .ce-* rules the emitted textpic/textmedia markup actually uses:
   imageorient 2 → "ce-textpic ce-left ce-above" (1 element, 600px image)
   imageorient 17 → "ce-textpic ce-right ce-intext" (6 elements, 300px)
   imageorient 18 → "ce-textpic ce-left ce-intext" (7 elements, 300px)
   ce-center, ce-below, ce-border, ce-image, ce-uploads, ce-table, ce-headline-*,
   ce-align-*, frame-* never occur in the corpus and are dropped (spec §6.5.1,
   §6.5.5). .ce-textpic (overflow:hidden) is LOAD-BEARING — spec §3.2 group A
   (the 6 dropped clear:left spacer elements) depends on it containing floats.
   -------------------------------------------------------------------------- */

.ce-textpic, .ce-gallery, .ce-row { overflow: hidden; }

.ce-left .ce-gallery, .ce-column { float: left; }
.ce-right .ce-gallery { float: right; }

.ce-gallery figure { display: table; margin: 0; }
.ce-gallery figcaption { display: table-caption; caption-side: bottom; }
.ce-gallery img { display: block; }

.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
    margin-bottom: 10px;
}
.ce-intext.ce-right .ce-gallery { margin-left: 10px; }
.ce-intext.ce-left .ce-gallery { margin-right: 10px; }

.ce-column { margin-right: 10px; }
.ce-column:last-child { margin-right: 0; }

.ce-row { margin-bottom: 10px; }
.ce-row:last-child { margin-bottom: 0; }

.ce-above .ce-bodytext { clear: both; }

.ce-intext.ce-left ol, .ce-intext.ce-left ul { padding-left: 40px; overflow: auto; }

/* --------------------------------------------------------------------------
   PART 2 — fileadmin/templates/inline.css, IN FULL, verbatim.
   This is the real layout: body, #wrap, #header, #main_wrap (flex row),
   #navigation, #content, #footer, p.bodytext, ul.navi/ul.subnavi incl.
   .active states, #menubutton, and the single 500px structural breakpoint.
   No line-height rule exists in the source. None is added here.
   -------------------------------------------------------------------------- */

html {
    min-height: 100%;
}

body {
    color: #494a47;
    font-size: 90%;
    font-family: arial, helvetica, sans-serif;
    background: linear-gradient(0deg, #9A9A9A, #bcbcbc);
    overflow-y: scroll;
}

#wrap {
    background-color: #fff;
    border: solid 1px #777;
    max-width: 1000px;
    width: 100%;
    margin: 3em auto 1em
}

#header {
    font-size: 2em;
    font-style: normal;
    font-weight: 200;
    font-stretch: ultra-expanded;
}

#header p {
    text-align: center;
    margin: 2em 0 1em;
}

#header p a {
    text-decoration: none;
    color: #494a47;
}

#main_wrap {
    clear: both;
    display: flex;
    flex-direction: row;
    justify-content: stretch;
}

#navigation {
    background-color: #d3d3d3;
    max-width: 220px;
    border: 0 solid #777;
    border-right-width: 1px;
}

#content_wrap {
}

#content {
    padding: 5px 3em 5px 1em;
}

#footer {
    padding: 10px;
    font-size: 90%;
    text-align: center;
    margin-bottom: 2em;
}

#footer a {
    color: #494a47;
}

/* [P5b 2026-08-28] OWNER: "make it all left-justified for uniformity." The
   original justified this (and hyphenated, which is what justification needs in
   German); the new site aligns left throughout. Restoring the original is these
   four declarations back. Affects /kaleidoskop/gespraech-ueber-ein-ereignis,
   the one page still emitting p.bodytext. */
p.bodytext {
    text-align: left;
}

#navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 1em;
}

#navigation ul ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 0.5em 1em;
}

ul.navi li {
    margin-bottom: 0.2em;
    border-style: none
}

ul.navi li a {
    color: #666666;
    font-weight: bold;
    text-decoration: none;
    background-color: #d3d3d3;
    display: block;
    padding: 0.2em;
    border: 0
}

ul.subnavi li a {
    color: #666666;
    font-size: 90%;
    font-weight: normal;
    text-decoration: none;
    background-color: #d3d3d3;
    padding: 0.2em 0.5em;
    border-style: none;
    border-width: 0 0 1px 1px
}

ul.navi li a.active {
    color: #fff;
    background-color: #999;
    border: none #999
}

ul.subnavi li a.active {
    background-color: #f0f0f0;
    font-weight: bold;
    color: #555;
    border-color: #555
}

#menubutton {
    display: none;
    padding: 0 0.5em;
    cursor: pointer;
}


@media screen and (max-width: 500px) {
    body {
        margin: 0;
    }

    #header {
        position: fixed;
        background: #bcbcbc;
        width: 100%;
        border-bottom: 1px solid #777777;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
    }

    #header p {
        margin: 0.3em;
        text-align: left;
    }

    #menubutton {
        display: block;
    }

    #wrap {
        border-width: 1px 0 1px;
        margin: 50px 0 0;
    }

    #main_wrap {
        flex-direction: column;
    }

    #navigation {
        width: 100%;
        max-width: none;
        border-right-width: 0;
        border-bottom-width: 1px;
        display: none;
        position: fixed;
        top: 51px;
        bottom: 0;
        overflow-y: auto;
    }

    #content {
        padding-right: 1em;
    }
}

/* --------------------------------------------------------------------------
   PART 3 — the LIVE half of fileadmin/templates/style.css.
   Dropped as dead (zero matches across all 92 mirrored pages, spec §6.5.5):
   .csc-textpic-imagewrap, div.csc-textpic .csc-textpic-imagewrap
   .csc-textpic-image, div.csc-textpic-intext-left .csc-textpic-imagewrap,
   table#buecher (+7 descendants), table#versandkosten (+2),
   span.buecherliste_subtext, and font-stretch: ultra-expanded on #header
   (kept above only because inline.css itself has it — it is a no-op in
   every current browser, per spec §6.5.5, but it is not this file's rule
   to drop since inline.css carries it verbatim).
   -------------------------------------------------------------------------- */

.indent {
    margin-left: 40px
}

#menubutton img {
    height: 75%;
    margin-top: 12.5%
}

#content img {
    max-width: 100%
}

@media screen and (max-width: 420px) {
    #header {
        font-size: 1.5em
    }
}

@media screen and (max-width: 330px) {
    #header {
        font-size: 1.2em
    }
}

div.textauszug {
    margin: 0 4em 0 1em;
    padding: 0 0 0 1em;
    border-left: 1px solid #ddd
}

div.textauszug h3:first-child {
    padding-top: 0
}

div.textauszug li {
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    /* [P5b] justify -> left, owner ruling; see p.bodytext above */
    text-align: left;
    width: 80%
}

div.center p.bodytext {
    text-align: center
}

div.nomargin p.bodytext {
    margin: 0;
    padding: 0
}

div.markttermine .datum p.bodytext {
    margin: 0;
    padding: 0
}

div.markttermine .zeit p.bodytext {
    padding: 0;
    margin: 0
}

div.markttermine .text p.bodytext {
    padding-top: 0;
    margin-top: 0
}

div.markttermine .text, div.markttermine .zeit {
    padding-left: 4em
}

table#errata {
    font-size: 1em;
    border-collapse: collapse;
    width: 85%;
    margin-top: 3em
}

table#errata td {
    padding: 4px;
    border: 1px solid #ddd
}

table#errata td p.bodytext, table#errata th p.bodytext {
    text-align: left
}

table#errata td.year {
    white-space: nowrap
}

table#errata td.description.wrong {
    border-right: 1px solid #777
}

ul.navi li a:hover {
    color: #0000cd;
    background-color: #d3d3d3;
    border: none #ccc
}

ul.subnavi li {
    list-style-type: none;
    margin: 0 0 0.2em;
    padding: 0;
    border-style: none
}

ul.subnavi li a:hover {
    color: #0000cd;
    border-style: none
}

/* Easy to miss (spec §6.5.3): exists only in the external file, not in
   inline.css's own #content_wrap rule above — this is what makes the
   content column actually fill the flex row. */
#content_wrap {
    width: 100%;
}

/* --------------------------------------------------------------------------
   PART 4 — two named substitutions (spec §6.5.4, test T(c)).
   -------------------------------------------------------------------------- */

/* was "#c285 img" — a TYPO3 content-element id, cannot survive the port.
   Declarations otherwise identical, applied to the homepage's single raw
   <img> (spec §3.2 group C1). margin-top added here (not in the original
   rule): on the old site #c285 had no padding of its own, so the first
   paragraph's UA-default 1em top margin collapsed straight through the
   wrapper div and pushed the whole element — image included — down by
   that 1em, landing the floated image flush with the paragraph's own
   text top. The port has no per-element wrapper div (content is plain
   Markdown), so that collapse never happens and the image renders 1em
   too high, no longer aligned with the text beside it. Restored here
   directly rather than by reintroducing a wrapper div. Found and fixed
   at P5 (docs/05-visual.md). */
.portrait {
    float: left;
    width: 150px;
    margin: 1em 1em 0.2em 0;
}

/* [P5b 2026-08-28] This was `.textauszug p { text-align: justify }`, then briefly
   `.textauszug.justified p` while the old site's split was reproduced faithfully
   (17 hand-written `html` elements carried a stored class="bodytext" and were
   justified; 38 RTE `text` elements did not and were ragged). The owner then
   ruled for uniformity -- "make it all left-justified" -- so the distinction is
   gone and with it the rule; the excerpt blocks inherit the page default.
   docs/05b-layout.md §2 records the split and the SQL that re-derives it, should
   anyone want it back. */
.textauszug p {
    text-align: left;
}

/* [2026-09-03] The calendar on /kalender: the current page, shown small and opened
   full-size in a dialog. See site/layouts/partials/calendar.html and kalender/README.md.

   The dialog rules only ever apply once assets/js/kalender.js has called showModal() --
   a <dialog> without the `open` attribute is display:none, and the script is the only
   thing that opens this one. With JavaScript off, none of this is reachable and the
   image is an ordinary link, which is what it was before. */
.kalender-voll {
    display: inline-block;
    cursor: zoom-in;
}

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

.kalender-dialog {
    /* max-width/max-height rather than width/height: the page is a fixed 1.73:1, so the
       constraint that binds is the viewport's short side, and the box should follow the
       image rather than the image being letterboxed inside a box of the wrong shape. */
    max-width: 96vw;
    max-height: 96vh;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: auto;
}

.kalender-dialog::backdrop {
    background: rgba(0, 0, 0, 0.82);
}

/* Selected through the dialog's id, not by class alone. `#content img { max-width: 100% }`
   above is an ID rule and outranks a class, and this image is inside #content -- so a plain
   .kalender-dialog-bild rule loses the max-width and the picture is silently constrained to
   its container. On a wide screen the two happen to agree; on a phone, where the rule below
   deliberately lets the image overflow, they do not, and the full-size view came out no
   bigger than the small one. */
#kalender-dialog .kalender-dialog-bild {
    display: block;
    max-width: 96vw;
    max-height: 96vh;
    width: auto;
    height: auto;
    background: #fff;
}

/* position:fixed, not absolute. A modal dialog is in the top layer, so fixed positions the
   button against the viewport -- which is the only anchor that cannot put it off-screen.
   Anchored to the dialog it was clipped on a narrow phone: the dialog is already 96vw wide
   there, so a button nudged outside its corner has nowhere to go. */
.kalender-dialog-close {
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    width: 2em;
    height: 2em;
    padding: 0;
    font: inherit;
    font-size: 1.4em;
    line-height: 1;
    color: #000;
    background: #fff;
    border: 1px solid #888;
    border-radius: 50%;
    cursor: pointer;
}

.kalender-dialog-close:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/* A landscape page on a portrait screen: fitting it to the width makes the full-size view
   barely larger than the small one (374 px against 361 px on a 390 px phone, measured), which
   is not worth opening. Fit it to the HEIGHT instead and let the dialog scroll sideways, so
   the calendar's fine print is actually readable and the reader pans across it. */
@media screen and (max-width: 760px) {
    .kalender-dialog {
        max-width: 100vw;
        max-height: 100vh;
    }

    #kalender-dialog .kalender-dialog-bild {
        max-width: none;
        max-height: none;
        width: auto;
        height: 86vh;
    }
}