/* ============================================================
   R-T.com — main stylesheet
   Mirrors the original TYPO3 two-column layout.
   Actual image assets will be placed in rtcom/static/img/
   once extracted from the archive (Phase 4).
   ============================================================ */

/* ── Reset / base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 150%;
    color: #49565F;
    background: #CFD2D3;
}

a { color: #977c34; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Outer wrapper ── */
/* bg_page.gif is the original 40×955px gradient from the source site.
   background-size: auto 100% stretches it vertically to cover any page height. */
#page_margin { width: 100%; background: #CFD2D3 url("../img/bg_page.57bb2d581d27.gif") repeat-x center top / auto 100%; }

#page {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

/* ── Meta navigation (top bar) ── */
#metaNavWrap {
    height: 40px;
}

#metaNav {
    width: 1000px;
    margin: 0 auto;
    padding: 4px 0;
    font-size: 1em;
    text-align: center;
    text-transform: lowercase;
    position: relative;
}

#metaNav a {
    margin: 0 3px;
    color: #977c34;
}

#metaNav a:hover { text-decoration: underline; }

.metaNav-sep { color: #49565F; margin: 0; }

.metaNav-copy { margin-left: 0; color: #49565F; }

.metaNav-lang {
    position: absolute;
    right: 0;
    top: 4px;
    text-transform: uppercase;
    font-size: 0.9em;
}
.metaNav-lang a { margin: 0 4px; color: #977c34; }
.metaNav-lang a.active { color: #49565F; font-weight: bold; text-decoration: underline; }

/* ── Header ── */
#headerWrap {
    height: 60px;
    margin-bottom: 43px;
}

#header {
    position: relative;
}

#rt_signet {
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
    width: auto;
}

#rt_titel {
    position: absolute;
    left: 60px;
    top: 0;
    height: 60px;
    width: auto;
}

/* ── Main two-column area ── */
#mainWrap {
    width: 940px;
    margin-left: 60px;
}

#main.subcolumns {
    display: flex;
    align-items: flex-start;
    min-height: 500px;
}

/* Left column — matches source .cs42l { width:418px } from base.css.
   Hero slider images are 420px wide; the 2px overhang is clipped by overflow:hidden. */
#nav.cs42l {
    width: 418px;
    height: 380px;
    flex-shrink: 0;
    position: relative;
    background: #fff;
    overflow: hidden;
}

/* Right column — original TYPO3 dimensions (screen.css: width 418px, height 378px,
   1px border, overflow:auto). Must use content-box so the 418×378 content area is
   preserved; the global border-box reset would otherwise shrink the content area to
   416×376, causing the image to overflow and triggering unwanted scrollbars. */
#content.cs42l {
    box-sizing: content-box;
    width: 418px;
    flex-shrink: 0;
    margin-left: 60px;
    height: 378px;
    border: 1px solid #49565f;
    overflow: auto;
    padding: 0;
}

/* ── Nav hero image (section-specific, replaces original Flash animation) ── */
#navHeroImg {
    position: absolute;
    top: 0; left: 0;
    width: 420px;
    height: 380px;
    object-fit: cover;
}

/* ── Primary navigation ── */
#primaryNav {
    position: absolute;
    z-index: 20;
    width: 155px;
    top: 0;
    left: 270px;
    margin-top: 14px;
}

#primaryNav a {
    display: block;
    padding: 2px 0 1px 6px;
    font-weight: bold;
    background: #fff;
    color: #46565f;
    text-decoration: none;
    margin-top: 10px;
}

#primaryNav a:hover,
#primaryNav a.active {
    background: #46565f;
    color: #fff;
    text-decoration: none;
}

/* Sub-navigation (rendered under the active top-level section) */
#primaryNav ul.subnav {
    list-style: none;
    margin: 0;
    padding: 0;
}
#primaryNav ul.subnav li {
    padding: 0 0 0 6px;
    margin-top: 10px;
}
#primaryNav ul.subnav a {
    display: block;
    padding: 2px 3px 3px 6px;
    background: #fff;
    color: #46565f;
    font-weight: normal;
    line-height: 120%;
    margin-top: 0;
}
#primaryNav ul.subnav a.subnav-linkact,
#primaryNav ul.subnav a:hover {
    background: #46565f;
    color: #fff;
}

/* ── Content text wrapper (matches original .elementText) ── */
.elementText {
    padding: 24px 30px 24px 20px;
}

/* ── Content area ── */
#content h1,
#content h2,
#content h3,
#content h4,
#content h5 { font-size: 1em; font-weight: bold; margin-bottom: 0.8em; }

#content a,
#content p a { font-weight: bold; }

#content p  { margin-bottom: 0.8em; }

#content ul {
    list-style-type: disc;
    margin: 0 0 0.5em 1.5em;
}

/* ── Footer ── */
#footer {
    width: 940px;
    margin: 10px 0 0 60px;
    font-size: 1em;
}

#breadcrumb { margin: 15px 0 0; height: 35px; }
#breadcrumb p,
#breadcrumb ul,
#breadcrumb li { display: inline; }
#breadcrumb a { text-decoration: none; text-transform: lowercase; color: inherit; }
#breadcrumb a:hover { text-decoration: underline; }
#breadcrumb span { font-weight: bold; }

#searchForm {
    border: 1px solid #49565f;
    width: 200px;
    background: url("../img/bg_suche.181c36ee29d7.gif") no-repeat;
    height: 23px;
    display: flex;
    align-items: center;
}

#searchForm input[type="text"] {
    border: 0;
    height: 16px;
    margin-top: 1px;
    padding: 3px 0 0 6px;
    width: 153px;
    font-size: 1em;
    background: transparent;
}

#searchForm button {
    width: 40px;
    height: 22px;
    margin: 0; padding: 0;
    border: 0;
    background: transparent url("../img/pfeil_suche.87b8592764a3.gif") no-repeat center top;
    text-indent: -1000em;
    cursor: pointer;
}

/* ── Rich text content styles ── */
.richtext-image.left  { float: left;  margin: 0 12px 8px 0; }
.richtext-image.right { float: right; margin: 0 0 8px 12px; }
.richtext-image.full  { display: block; margin: 10px auto; max-width: 100%; }

/* ── Team member grid ── */
.team-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}

.team-card {
    width: 180px;
}

.team-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border: 1px solid #ddd;
}

.team-card h3 { font-size: 12px; margin-top: 4px; }
.team-card p  { font-size: 11px; color: #666; }

/* ── News listing ── */
.news-list article {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.news-list .news-date { font-size: 11px; color: #999; }
.news-list h2         { font-size: 14px; margin: 2px 0 4px; }
.news-list h2 a       { color: #333; }
.news-list h2 a:hover { color: #7a0000; }
.news-list .news-intro { font-size: 12px; color: #555; }