/* ============================================================
   EasyUsenet - legal.css
   Shared rules for the legal pages (terms, fairuse, takedownnotice).
   Extends and overrides base.css, so ALWAYS load it after base.css.
   The three pages share this file because they use exactly the same
   typography - changes affect all three.
   ============================================================ */

/* --- Page frame --- */
.tms{background:var(--plansbg,#FDF4D8);padding:64px 0 96px}
.tms .head-c{max-width:760px;margin:0 auto 46px;text-align:center}
.tms h1{font-weight:800;line-height:1.05}
.tms .lead{font-size:17px;color:var(--muted);line-height:1.65;max-width:660px;margin:16px auto 0}

/* A wide card but a restrained measure: the padding keeps the line at around 85
   characters, otherwise the contract text becomes unreadable. */
.tms-cols{max-width:880px;margin:0 auto}

/* --- Vertragstext --- */
/* overflow-wrap belongs on the container, not on .vtx a: in the legal texts full
   URLs appear partly as link text and partly as plain body copy. A URL is a
   single unbreakable word - without this line terms.html ran 82px past the right
   edge at 360px. The property is inherited and so covers both cases with one
   rule. */
.vtx{background:var(--white);border:var(--bd);border-radius:var(--r);box-shadow:5px 5px 0 0 var(--black);padding:38px 70px 44px;overflow-wrap:anywhere}
.vtx h2{font-size:25px;font-weight:800;letter-spacing:-.6px;line-height:1.2;scroll-margin-top:24px;margin:44px 0 4px;padding-top:26px;border-top:2px solid #E3DED0}
.vtx > h2:first-child{margin-top:0;padding-top:0;border-top:none}
.vtx h3{font-size:18px;font-weight:800;letter-spacing:-.2px;margin:30px 0 2px}
.vtx p{font-size:17px;line-height:1.72;color:#2C332A}
.vtx > p{margin-top:14px}
.vtx a{color:var(--text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}
.vtx a:hover{color:var(--green)}
.vtx strong,.vtx b{font-weight:800}

/* The numbering runs through from 1 to 68, so the start attributes in the source
   stay in place and the list keeps counting natively. */
.vtx ol{margin:14px 0 0;padding-left:2.9em}
/* Items without a <p> of their own (fairuse) should look exactly like body copy */
.vtx li{margin-top:13px;font-size:17px;line-height:1.72;color:#2C332A}
.vtx li > p{margin:0}
.vtx li > p + p{margin-top:10px}
.vtx ol > li::marker{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.vtx li > ol,.vtx li > ul{margin-top:12px;padding-left:2.2em}
.vtx li > ol > li,.vtx li > ul > li{margin-top:9px}
.vtx li > ol > li::marker{font-size:13px}

/* Unnumbered lists: a plain bullet, no decoration */
.vtx ul{margin:14px 0 0;padding-left:1.9em;list-style:disc}
.vtx ul > li{margin-top:11px}
.vtx li > ul{padding-left:1.5em}

/* Address and contact: stays plain body copy, just with room after it */
.vtx .anschrift{margin-bottom:26px}

/* --- Back to top --- */
.tms-up{margin-top:26px;text-align:right}
.tms-up a{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:14px;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* ============================================================
   Responsive - mind the order: these rules come AFTER the components,
   otherwise the component wins (a media query does not raise
   specificity).
   ============================================================ */
@media (max-width:1000px){
.tms{padding:48px 0 72px}
.tms .head-c{margin-bottom:34px}
.tms-cols{max-width:820px}
.vtx{padding:30px 44px 36px}
}
@media (max-width:720px){
.tms{padding:38px 0 56px}
.vtx{padding:26px 26px 30px}
.vtx h2{font-size:22px;margin-top:34px;padding-top:22px}
.vtx ol{padding-left:2.3em}
.vtx li > ol{padding-left:1.7em}
}
@media (max-width:430px){
.vtx{padding:22px 18px 26px}
.vtx h2{font-size:20px}
.vtx :is(p,li){font-size:16px}
.vtx ol{padding-left:2em}
}

.vtx .underline{text-decoration:underline;text-underline-offset:2px}
.vtx-tbl{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.vtx table{width:100%;border-collapse:collapse;overflow-wrap:normal;font-size:15px;line-height:1.55;color:#2C332A}
.vtx th{font-family:'Sora','Sora Fallback',sans-serif;font-weight:800;font-size:14px;text-align:left;vertical-align:bottom;padding:10px 14px 10px 0;border-bottom:2px solid var(--black)}
.vtx td{vertical-align:top;padding:12px 14px 12px 0;border-bottom:1px solid #E3DED0}
.vtx td p{font-size:15px;line-height:1.55;margin:0}
.vtx td p + p{margin-top:6px}
.vtx th strong{font-weight:800}
/* Translated headings can be a single long word (de: "Datenschutzbestimmungen") that
   is wider than a phone screen: hyphenate instead of overflowing. Single-word
   headings get no .mk marker (white-space:nowrap), see the pages. */
.tms h1{hyphens:auto;overflow-wrap:break-word}
@media (max-width:430px){
.vtx table,.vtx td p{font-size:14px}
.vtx th{font-size:13px}
.vtx :is(th,td){padding-right:10px}
/* the 4-column processor table scrolls sideways inside .vtx-tbl instead of squeezing */
.vtx table:has(th:nth-child(4)){min-width:540px}
}