/* telefonanleitungen.de – Gestaltung nach dem bisherigen e107-Theme cagan2:
   Streifenhintergrund, Logo als Kopf, orange Menüleiste, blaue Titelbalken. */

:root {
  --orange: #ff5529;       /* Menüleiste */
  --blue: #3d9ada;         /* Titelbalken, Trenner */
  --ink: #1a1a1a;          /* Text */
  --muted: #555;
  --box: #f6f6f6;          /* Inhaltsfläche */
  --box-edge: #c4c4c4;     /* gestrichelte Kante */
  --link: #c43a12;         /* dunkleres Orange, ausreichend Kontrast für Fließtext */
  --focus: #1d64c8;
  --ok-bg: #e4f1e6;
  --ok: #2f6141;
  --err: #a11b1b;
  --err-bg: #fbe4e1;
  --info-bg: #e3f0fa;
  --page-width: 1009px;    /* Breite des Logos */
  color-scheme: light;     /* verhindert fremdes Abdunkeln durch den Browser */
}

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

body {
  margin: 0;
  background: #e9e9e9 url("/assets/legacy/e107_themes/cagan2/images/cagan_bg.jpg");
  color: var(--ink);
  font: 16px/1.55 Arial, Helvetica, sans-serif;
}

a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.skip-link { position: absolute; left: -10000px; top: 0; background: #fff; color: var(--ink); padding: 0.5rem 1rem; z-index: 20; }
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 0 1px #d6d6d6;
}

/* ---- Kopf: nur das Logo -------------------------------------------------- */
.logo { display: block; line-height: 0; }
.logo img { width: 100%; height: auto; }
/* Handy: Logo nicht winzig skalieren, sondern links mit Schriftzug zeigen */
@media (max-width: 40rem) {
  .logo img { height: 92px; object-fit: cover; object-position: left center; }
}

/* ---- Menüleiste ---------------------------------------------------------- */
.site-header { position: relative; z-index: 5; }
.bar {
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: var(--orange); color: #fff;
}
.site-nav { flex: 1 1 auto; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.site-nav a, .site-nav summary {
  display: block; color: inherit; text-decoration: none; cursor: pointer;
}
.site-nav summary { list-style: none; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav summary::after {
  content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-0.22em) rotate(45deg); transition: transform 0.15s;
}
.site-nav details[open] > summary::after { transform: translateY(0.05em) rotate(225deg); }
.nav-overview a { font-style: italic; }

.account { display: flex; align-items: center; gap: 1rem; padding: 0 0.9rem; font-weight: 700; }
.account a, .account .link-button { color: #fff; }
.account-name { font-weight: 400; }
.inline-form { display: inline; margin: 0; }
.link-button {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.15em;
}
.bar :focus-visible { outline-color: #fff; }

.nav-toggle {
  display: none;
  font: 700 1.1rem Arial, Helvetica, sans-serif; color: #fff;
  background: none; border: 0; padding: 0.55rem 0.9rem; cursor: pointer;
}
.nav-toggle::before { content: "\2630"; margin-right: 0.45em; }   /* ☰ */
.nav-mobile-only { display: none; }
.nav-account { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Desktop: Leiste mit Aufklappmenüs */
@media (min-width: 56.25rem) {
  .nav-level-0 { display: flex; flex-wrap: wrap; padding-left: 0.4rem; }
  .nav-level-0 > li { position: relative; }
  .nav-level-0 > li > a, .nav-level-0 > li > details > summary {
    font-weight: 700; font-size: 1.15rem;   /* großer Text: Weiß auf Orange zulässig */
    padding: 0.3rem 0.65rem;
    border-right: 1px solid rgba(255, 255, 255, 0.55);
  }
  .nav-level-0 > li > a:hover, .nav-level-0 > li > details > summary:hover { background: rgba(0, 0, 0, 0.1); }
  .nav-level-0 > li > a[aria-current="page"],
  .nav-level-0 > li.in-trail > details > summary { background: #d63d14; }

  .nav-level-0 > li > details > .nav-list {
    position: absolute; left: 0; top: 100%;
    min-width: 17rem; max-width: min(28rem, 90vw); max-height: 75vh; overflow-y: auto;
    background: #fff; color: var(--ink);
    border: 1px solid #ccc; border-top: 3px solid var(--orange);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
    padding: 0.3rem 0;
  }
  .nav-level-0 > li:nth-last-child(-n+2) > details > .nav-list { left: auto; right: 0; }
  .nav-level-1 a, .nav-level-1 summary { padding: 0.35rem 1rem; }
  .nav-level-1 a:hover, .nav-level-1 summary:hover { background: #fdeee9; }
  .nav-level-1 a[aria-current="page"] { font-weight: 700; box-shadow: inset 4px 0 0 var(--orange); }
  .nav-level-2, .nav-level-3, .nav-level-4, .nav-level-5, .nav-level-6 {
    margin-left: 1rem; border-left: 2px solid #e2e2e2;
  }
}

/* Schmal: Menü-Button links, Anmelden rechts, Menü klappt darunter auf */
@media (max-width: 56.24rem) {
  .nav-toggle { display: block; order: 1; }
  .account { order: 2; margin-left: auto; }
  .account .desktop-only { display: none; }
  .account-name { display: none; }
  .site-nav { order: 3; flex-basis: 100%; background: #fff; color: var(--ink); border-bottom: 3px solid var(--orange); }
  .js .site-nav:not(.is-open) { display: none; }
  .nav-mobile-only { display: block; }
  .site-nav a, .site-nav summary { padding: 0.7rem 1rem; border-top: 1px solid #eee; } /* fingergerecht */
  .site-nav .nav-list .nav-list { margin-left: 1rem; border-left: 2px solid #e2e2e2; }
  .site-nav a[aria-current="page"] { font-weight: 700; box-shadow: inset 4px 0 0 var(--orange); }
}

/* ---- Inhalt -------------------------------------------------------------- */
.sheet { padding: 1rem clamp(0.5rem, 2vw, 1.25rem) 1.5rem; }

.box-title {
  margin: 0;
  background: var(--blue); color: #fff;
  font-size: 1.15rem; font-weight: 700; line-height: 1.3;   /* große Schrift: Kontrast 3:1 genügt */
  padding: 0.35rem 0.6rem;
  border-bottom: 3px solid #a9d2ee;
}
.box {
  background: var(--box);
  border: 1px dashed var(--box-edge); border-top: 0;
  padding: clamp(0.75rem, 2.5vw, 1.25rem);
  margin-bottom: 1.25rem;
  overflow-wrap: anywhere;
}
.box > :first-child { margin-top: 0; }
.box > :last-child { margin-bottom: 0; }

h2, h3, h4 { line-height: 1.25; margin: 1.4em 0 0.5em; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; }
hr { border: 0; border-top: 2px solid var(--blue); margin: 1.5rem 0; }
.lead { font-size: 1.1rem; }
.hint { color: var(--muted); font-size: 0.9rem; font-weight: 400; }

/* Altinhalte aus TinyMCE robust darstellen */
.content img, .content video, .content iframe { max-width: 100%; height: auto; }
.content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.content [style*="width"] { max-width: 100% !important; }
.content pre { overflow-x: auto; }

/* ---- Meldungen ----------------------------------------------------------- */
.notice { padding: 0.7rem 1rem; border-left: 5px solid; margin: 0 0 1rem; background: #fff; }
.notice-success { background: var(--ok-bg); border-color: var(--ok); }
.notice-error { background: var(--err-bg); border-color: var(--err); }
.notice-info { background: var(--info-bg); border-color: var(--blue); }

/* ---- Formulare ----------------------------------------------------------- */
.form { max-width: 28rem; display: grid; gap: 0.35rem; }
.form label { font-weight: 700; margin-top: 0.8rem; }
.form label.check { font-weight: 400; display: flex; align-items: center; gap: 0.5rem; }
.form input[type="text"], .form input[type="email"], .form input[type="password"] {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #8a8a8a; border-radius: 2px; padding: 0.5rem 0.65rem; width: 100%;
}
.form input[type="checkbox"] { width: 1.15rem; height: 1.15rem; accent-color: var(--orange); }
.form input[aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
.field-error { color: var(--err); margin: 0.2rem 0 0; font-size: 0.95rem; }
.button {
  justify-self: start; margin-top: 1.1rem;
  font: 700 1.05rem Arial, Helvetica, sans-serif;
  background: var(--orange); color: #fff;
  border: 0; border-radius: 2px; padding: 0.55rem 1.4rem; cursor: pointer;
}
.button:hover { background: #e2441b; }
.form-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.25rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Fuß ----------------------------------------------------------------- */
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem;
  padding: 0.9rem clamp(0.5rem, 2vw, 1.25rem);
  border-top: 2px solid var(--blue);
  color: var(--muted); font-size: 0.9rem;
}
.site-footer a { color: var(--muted); }
.donate { line-height: 0; }

.debug { white-space: pre-wrap; font-size: 0.8rem; background: #eee; padding: 1rem; }

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

/* ---- Laufzeitanzeige (app.debug_timing) ----------------------------------- */
.debug-timing { margin-left: auto; font-size: 0.8rem; }

/* ---- Umschalter Farbschema ----------------------------------------------- */
.theme-toggle {
  display: none;               /* ohne JavaScript nicht nutzbar */
  align-self: center; order: 2;
  background: none; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%;
  width: 2rem; height: 2rem; margin: 0 0.3rem; padding: 0; cursor: pointer; color: #fff;
}
.js .theme-toggle { display: inline-flex; align-items: center; justify-content: center; }
.theme-icon { width: 1.15rem; height: 1.15rem; display: none; }
.icon-auto { display: block; }                                         /* automatisch */
[data-theme-pref="light"] .icon-auto, [data-theme-pref="dark"] .icon-auto { display: none; }
[data-theme-pref="light"] .icon-light { display: block; }              /* hell */
[data-theme-pref="dark"] .icon-dark { display: block; }                /* dunkel */
@media (min-width: 56.25rem) { .theme-toggle { order: 0; } }
@media (max-width: 56.24rem) { .theme-toggle { margin-left: auto; } .account { margin-left: 0; order: 3; } .site-nav { order: 4; } }

/* =========================================================================
   Dunkles Farbschema. Gesetzt per data-theme="dark" (nav.js, folgt dem
   Browser oder der Wahl über den Umschalter).
   ========================================================================= */
[data-theme="dark"] {
  --ink: #e4e4e0;
  --muted: #a9b1b9;
  --box: #23282d;
  --box-edge: #4a525a;
  --link: #ff8a66;
  --focus: #7fb0ff;
  --ok-bg: #1f3326;
  --ok: #8fd19e;
  --err: #ffb4ab;
  --err-bg: #3b1f1d;
  --info-bg: #1d2f3d;
  color-scheme: dark;
}
[data-theme="dark"] body { background: #15181b; }
[data-theme="dark"] .page { background: #1c2024; box-shadow: 0 0 0 1px #2c3238; }
[data-theme="dark"] .logo img { filter: brightness(0.82); }
[data-theme="dark"] .bar { background: #d9481f; }                     /* Weiß darauf etwas kontrastreicher */
[data-theme="dark"] .box-title { background: #2c7cb5; border-bottom-color: #1f5a85; }
[data-theme="dark"] hr { border-top-color: #2c7cb5; }
[data-theme="dark"] .site-footer { border-top-color: #2c7cb5; }
[data-theme="dark"] .notice { background: var(--box); }
[data-theme="dark"] .notice-success { background: var(--ok-bg); }
[data-theme="dark"] .notice-error { background: var(--err-bg); }
[data-theme="dark"] .notice-info { background: var(--info-bg); }
[data-theme="dark"] .form input[type="text"], [data-theme="dark"] .form input[type="email"],
[data-theme="dark"] .form input[type="password"] { background: #15181b; border-color: #6b747d; }
[data-theme="dark"] .button { background: #c43a12; }
[data-theme="dark"] .debug { background: #15181b; }

/* Menü */
@media (min-width: 56.25rem) {
  [data-theme="dark"] .nav-level-0 > li > details > .nav-list { background: #23282d; border-color: #3a4249; }
  [data-theme="dark"] .nav-level-1 a:hover, [data-theme="dark"] .nav-level-1 summary:hover { background: #3a2a24; }
}
@media (max-width: 56.24rem) {
  [data-theme="dark"] .site-nav { background: #23282d; }
  [data-theme="dark"] .site-nav a, [data-theme="dark"] .site-nav summary { border-top-color: #333a40; }
}
[data-theme="dark"] .nav-level-2, [data-theme="dark"] .nav-level-3, [data-theme="dark"] .nav-level-4,
[data-theme="dark"] .site-nav .nav-list .nav-list { border-left-color: #3a4249; }

/* Alte Seiteninhalte: feste Farben aus TinyMCE überschreiben */
[data-theme="dark"] .content [style*="color"], [data-theme="dark"] .content font[color] { color: inherit !important; }
[data-theme="dark"] .content [style*="background"], [data-theme="dark"] .content [bgcolor] { background-color: transparent !important; }
[data-theme="dark"] .content a, [data-theme="dark"] .content a[style*="color"],
[data-theme="dark"] .content a [style*="color"] { color: var(--link) !important; }
[data-theme="dark"] .content td, [data-theme="dark"] .content th { border-color: #4a525a !important; }

/* Downloadbereich (unabhängig von der Farbanpassung dlb-theme.css) */
[data-theme="dark"] .dlb {
  --dlb-ink: #ff8a66;
  --dlb-ink-soft: #ffb199;
  --dlb-paper: #15181b;
  --dlb-tab: #2a3137;
  --dlb-rule: #46505a;
  --dlb-muted: #a9b1b9;
  --dlb-ok: #8fd19e;
  --dlb-lock: #f0c36a;
  --dlb-lock-bg: #3b3420;
  --dlb-deny: #ffb4ab;
  color: var(--ink);
}
[data-theme="dark"] .dlb h2 { color: #6fb6e6; }
[data-theme="dark"] .dlb-crumbs li[aria-current] { color: var(--ink); }
[data-theme="dark"] .dlb-search button, [data-theme="dark"] .dlb .dlb-btn { background: #c43a12; color: #fff; }
[data-theme="dark"] .dlb-search button:hover, [data-theme="dark"] .dlb .dlb-btn:hover { background: #a3300e; }
[data-theme="dark"] .dlb-search input { color: var(--ink); }
[data-theme="dark"] .dlb-dirs a { color: var(--ink); }
[data-theme="dark"] .dlb-dirs a:hover, [data-theme="dark"] .dlb-dirs a:hover::before { background: #34404a; }
[data-theme="dark"] .dlb-files a:hover, [data-theme="dark"] .dlb-hits a:hover { background: #2b2420; }
[data-theme="dark"] .dlb-type--pdf { color: #ff8a80; }
[data-theme="dark"] .dlb-debug { background: #3b1f1d; }

/* ---- Kontoseite und Admin ------------------------------------------------- */
.facts { border-collapse: collapse; margin-bottom: 1rem; }
.facts th, .facts td { text-align: left; padding: 0.3rem 1.2rem 0.3rem 0; vertical-align: top; }
.facts th { font-weight: 700; white-space: nowrap; }
.button-danger { background: #a11b1b; }
.button-danger:hover { background: #861515; }
.account-name { color: #fff; font-weight: 400; }

/* ---- Hersteller-Wolke ({{herstellerwolke}}) -------------------------------- */
.hersteller-wolke { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.3rem 1rem; line-height: 1.3; }
.hersteller-wolke a { text-decoration: none; }
.hersteller-wolke a:hover { text-decoration: underline; }
.hersteller-wolke .w1 { font-size: 0.85rem; opacity: 0.8; }
.hersteller-wolke .w2 { font-size: 1rem; }
.hersteller-wolke .w3 { font-size: 1.2rem; }
.hersteller-wolke .w4 { font-size: 1.45rem; font-weight: 700; }
.hersteller-wolke .w5 { font-size: 1.75rem; font-weight: 700; }
.hersteller-wolke .w6 { font-size: 2.1rem; font-weight: 700; }