/* ============================================================================= _app-seite.css — общий вид СТРАНИЦ ОПИСАНИЯ приложений (max.html, lager.html) 🚨 ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ СТИЛЬ ВНУТРИ КАЖДОЙ СТРАНИЦЫ. Страниц две сегодня и четыре завтра (Faktura, Solo). Вставленный в каждую стиль — это четыре копии одной раскладки, которые разъедутся ровно так же, как разъехались бы правовые страницы; там это уже решено одним файлом (`legal/_style.css`), и решение то же самое. 🚩 ТОКЕНЫ ПОВТОРЯЮТ `index.html`, И ЭТО НАЗВАНО ВСЛУХ. У сайта нет сборки, а `design-system.css` лежит в другом репозитории (`apps//`) и на хостинг сайта не попадает — подключить эталон нечем. Поэтому значения скопированы, но скопированы ОДИН РАЗ, здесь, а не по разу на страницу. Тот же довод слово в слово стои́т в шапке `legal/_style.css`. 🐞 29.08, СРАЗУ ПОСЛЕ НАПИСАНИЯ. Строка выше стояла как `apps/*` со звёздочкой и косой чертой — и ЗАКРЫВАЛА этот комментарий на десять строк раньше срока. Остаток шапки становился мусорной разметкой и съедал первый же блок `:root` целиком: в тёмной теме страница выглядела верно (там краски объявлены заново в `@media`), а в СВЕТЛОЙ у неё не было ни фона, ни зелёной кнопки — надпись белым по белому. 🚨 Найдено не глазами по коду, а замером в браузере: `getComputedStyle(...).getPropertyValue('--cta')` вернул пустоту, хотя остальные правила файла работали. Цвета по умолчанию в исходнике не написано, и увидеть его чтением нельзя в принципе (§22 L13). ⛔️ Поэтому в комментариях этого файла НЕ ПИШЕМ путей со звёздочкой перед косой чертой. Пиши `apps//`. 🎨 ЦВЕТ ПРИЛОЖЕНИЯ — ЕДИНСТВЕННОЕ, ЧТО РАЗЛИЧАЕТ СТРАНИЦЫ. Он задаётся страницей через `--app` / `--app-hell` и берётся из семейной таблицы красок (`FAMILIE.md` §11): Max синий `#0B6FA4`, Lager оранжевый `#AE4A00`. Тот же цвет носит значок установленного приложения — человек, пришедший со страницы, узнаёт его на домашнем экране, а не вычитывает подпись. ============================================================================= */ :root{ --pine:#123F3C; --cta:#146B45; --cta-press:#0F5233; --accent:#2FA45C; --page:#F4F6F6; --card:#FFFFFF; --sunken:#EDF1F1; --border:#DFE4E4; --border-strong:#C7D0CF; --text:#101A19; --muted:#63736F; --ok-bg:#E9F2EC; --ok-border:#C3DDCE; --ok-text:#0F5233; --header-bg:rgba(244,246,246,.92); --r:8px; --wrap:1000px; /* Запасной цвет приложения — страница обязана задать свой. Зелёный семейства здесь означает «страница забыла представиться», и это видно глазом. */ --app:#164A3E; --app-hell:#2FA45C; } /* Тёмная тема. Три состояния, как на витрине: явный выбор ставит `data-theme` на , без выбора решает система. Порядок правил важен — выбор человека обязан побеждать системную настройку в ОБЕ стороны. */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]){ --pine:#CBE4D6; --cta:#1E8A50; --cta-press:#146B45; --page:#0E1917; --card:#142522; --sunken:#1B2C29; --border:#264039; --border-strong:#33524C; --text:#E6EDEA; --muted:#9DB3AB; --ok-bg:#173129; --ok-border:#2C5747; --ok-text:#7FD8A6; --header-bg:rgba(14,25,23,.92); } } html[data-theme="dark"]{ --pine:#CBE4D6; --cta:#1E8A50; --cta-press:#146B45; --page:#0E1917; --card:#142522; --sunken:#1B2C29; --border:#264039; --border-strong:#33524C; --text:#E6EDEA; --muted:#9DB3AB; --ok-bg:#173129; --ok-border:#2C5747; --ok-text:#7FD8A6; --header-bg:rgba(14,25,23,.92); } /* 🚨 На тёмном фоне фирменный цвет приложения БЕРЁТСЯ СВЕТЛЫЙ. Синий #0B6FA4 на почти чёрном не читается — у семьи для этого и заведена вторая краска (`--app-max-on-dark`). Заголовок цветом приложения без этой подмены был бы нарядным и нечитаемым разом. */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) { --app:var(--app-hell) } } html[data-theme="dark"]{ --app:var(--app-hell) } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--page); color:var(--text); font:17px/1.6 "Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--wrap); margin:0 auto; padding:0 22px} /* ---------- шапка ---------- */ header{ position:sticky; top:0; z-index:50; background:var(--header-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .bar{display:flex; align-items:center; gap:14px; padding:12px 0} .brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--pine)} .brand svg{width:34px; height:34px; flex:none} .brand b{font-size:20px; font-weight:800; letter-spacing:.6px} .brand span{display:block; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.3px} /* Дорога назад — словами и со стрелкой, а не голым значком (правило интуитивного UI: подпись обязательна). На узком экране прячется только слово «Übersicht», сама стрелка остаётся. */ .zurueck{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; flex:none; color:var(--text); text-decoration:none; font-size:15px; font-weight:700; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:6px 13px; min-height:36px; } .zurueck:hover{border-color:var(--border-strong)} .lang{display:inline-flex; background:var(--sunken); border-radius:999px; padding:3px; flex:none} .lang button{ border:none; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700; color:var(--muted); padding:6px 13px; border-radius:999px; min-height:36px; } .lang button.on{background:var(--card); color:var(--pine); box-shadow:0 1px 3px rgba(0,0,0,.09)} .theme-btn{ display:inline-flex; align-items:center; gap:6px; flex:none; cursor:pointer; border:1px solid var(--border); background:var(--card); color:var(--text); font:inherit; font-size:13px; font-weight:700; padding:6px 12px; border-radius:999px; min-height:36px; } .theme-btn:hover{border-color:var(--border-strong)} .t-light{display:none} html[data-theme="dark"] .t-dark{display:none} html[data-theme="dark"] .t-light{display:inline} @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .t-dark{display:none} html:not([data-theme="light"]) .t-light{display:inline} } /* ---------- первый экран страницы приложения ---------- */ .kopf{padding:44px 0 30px; display:flex; gap:28px; align-items:center; flex-wrap:wrap} .kopf-text{flex:1 1 340px; min-width:0} .marke{ display:inline-block; border:1px solid var(--ok-border); background:var(--ok-bg); color:var(--ok-text); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; margin-bottom:16px; } .kopf h1{ font-size:clamp(30px,4.6vw,46px); line-height:1.14; margin:0 0 14px; font-weight:800; letter-spacing:-.5px; color:var(--app); } .kopf .satz{font-size:clamp(17px,2vw,20px); color:var(--muted); margin:0 0 26px; max-width:52ch} /* Значок приложения — как он будет выглядеть на домашнем экране. 🚩 Силуэт совы повторяет знак семейства (те же пути, что в шапке index.html). Настоящий файл значка лежит в репозитории приложения и на хостинг сайта не попадает — подключить его нечем, поэтому он воспроизведён здесь. */ .symbol{width:112px; height:112px; border-radius:25px; flex:none; box-shadow:0 10px 28px rgba(0,0,0,.22)} .knopfe{display:flex; gap:12px; flex-wrap:wrap} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:var(--r); padding:14px 24px; font-size:16.5px; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; min-height:54px; font-family:inherit; } .btn-main{background:var(--cta); color:#fff} .btn-main:hover{background:var(--cta-press)} .btn-ghost{background:var(--card); color:var(--pine); border-color:var(--border-strong)} .btn-ghost:hover{border-color:var(--accent)} .hinweis{width:100%; color:var(--muted); font-size:13.5px; margin:10px 0 0} /* ---------- разделы ---------- */ section{padding:48px 0} section.gedeckt{background:var(--card); border-top:1px solid var(--border); border-bottom:1px solid var(--border)} .h2{font-size:clamp(24px,3.2vw,33px); font-weight:800; color:var(--pine); margin:0 0 12px; letter-spacing:-.3px} .lead{color:var(--muted); font-size:17px; max-width:64ch; margin:0 0 28px} /* ---------- что умеет: плитки ---------- */ .gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr)); gap:16px} .kachel{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:20px 20px 18px; border-top:3px solid var(--app); } section.gedeckt .kachel{background:var(--page)} .kachel h3{margin:0 0 7px; font-size:17px; font-weight:800; color:var(--pine)} .kachel p{margin:0; color:var(--muted); font-size:15px; line-height:1.55} .kachel .sym{font-size:22px; display:block; margin-bottom:9px} /* ---------- роли ---------- */ .rollen{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px} .rolle{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:22px} section.gedeckt .rolle{background:var(--page)} .rolle h3{margin:0 0 4px; font-size:18px; color:var(--app); font-weight:800} .rolle .wer{margin:0 0 12px; font-size:13.5px; color:var(--muted); font-weight:700} .rolle ul{margin:0; padding-left:20px; color:var(--muted); font-size:15px; line-height:1.6} /* ---------- пакеты ---------- */ .pakete{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; align-items:start} .paket{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:24px 22px} section.gedeckt .paket{background:var(--page)} .paket.beste{border:2px solid var(--app)} .paket h3{margin:0 0 2px; font-size:19px; font-weight:800; color:var(--pine)} .paket .wofuer{margin:0 0 14px; font-size:13.5px; color:var(--muted); font-weight:700} .betrag{font-size:31px; font-weight:800; color:var(--app); line-height:1.2} .betrag small{font-size:14.5px; font-weight:700; color:var(--muted)} /* 🚨 Годовая цена обязана стоять рядом с тем, во что она выходит в месяц — формат из `FAMILIE.md` §2. Рядом «48» и «480» первое кажется меньше. */ .jahr{margin:4px 0 16px; font-size:14.5px; color:var(--muted)} .jahr b{color:var(--text)} .paket ul{margin:0 0 18px; padding-left:20px; font-size:15px; color:var(--muted); line-height:1.65} .paket .btn{width:100%; min-height:48px; padding:12px 16px; font-size:15.5px} /* Надбавка за соседнее приложение показывается КАК СКИДКА: зачёркнутая полная цена, надбавка, экономия. Голое «+7» не показывает выгоды — человек не знает, что приложение стоит 15 (`FAMILIE.md` §2, решение владельца 19.08). */ .dazu{ margin-top:18px; background:var(--sunken); border:1px solid var(--border); border-radius:12px; padding:16px 18px; font-size:15px; } .dazu s{color:var(--muted)} .dazu b{color:var(--app)} .dazu .spar{color:var(--ok-text); font-weight:700} /* 🐞 ССЫЛКА ВНУТРИ СОДЕРЖАНИЯ ОСТАВАЛАСЬ БРАУЗЕРНОЙ. Цвет по умолчанию — `#0000EE`, тёмно-синий: на тёмной теме он почти сливается с фоном, и «Vulstrix Lager ansehen →» было не прочесть. Найдено СНИМКОМ 390 px, а не чтением кода: цвета по умолчанию в исходнике не написано, и глазами по CSS его не найти — ровно тот случай, ради которого §22 L13 требует смотреть картинку, а не полагаться на прогон. */ section a:not(.btn), .kopf a:not(.btn){color:var(--ok-text); font-weight:700} section a:not(.btn):hover{text-decoration:underline} /* ---------- честная оговорка ---------- */ .offen{ border:1px solid var(--border-strong); border-left:3px solid var(--app); border-radius:12px; background:var(--card); padding:18px 20px; margin-top:24px; } section.gedeckt .offen{background:var(--page)} .offen h3{margin:0 0 8px; font-size:16px; color:var(--pine)} .offen p, .offen li{margin:0 0 6px; color:var(--muted); font-size:15px} .offen ul{margin:0; padding-left:20px} /* ---------- подвал ---------- */ footer{border-top:1px solid var(--border); padding:30px 0; color:var(--muted); font-size:14.5px} .frow{display:flex; gap:22px; flex-wrap:wrap; align-items:center} footer a{color:var(--muted); text-decoration:none} footer a:hover{color:var(--accent)} .frow .right{margin-left:auto} @media (max-width:640px){ .frow .right{margin-left:0} } /* ---------- два языка ---------- */ [data-en]{display:none} html[lang="en"] [data-de]{display:none} html[lang="en"] [data-en]{display:revert} /* ---------- телефон 390 px ---------- 🚨 390 — ширина iPhone 14/15 и мерка, которой семья проверяет каждый экран. Здесь ужимается всё, что на широком стоит рядом. */ @media (max-width:640px){ .kopf{padding:30px 0 22px; gap:20px} .symbol{width:84px; height:84px; border-radius:19px} .btn{width:100%} .knopfe{gap:10px} section{padding:36px 0} /* 🐞 ШАПКА НЕ ВЛЕЗАЛА В 390 px, и ломала страницу целиком: переполнение растягивало документ до 410, а вместе с ним — полосу согласия на cookie во всю ширину. Найдено не глазами, а замером: у витрины «никто не шире», у этой страницы виновными назвались `.lang` и полоса согласия. 🚩 Убрано СЛОВО «VULSTRIX», а не дорога назад. Совa остаётся ссылкой на главную, но человек на телефоне не обязан догадываться, что значок — это выход: подписанная кнопка «← Alle Apps» важнее собственного имени на своей же странице (правило интуитивного UI). */ .bar{gap:9px; padding:10px 0} .wrap.bar{padding-left:14px; padding-right:14px} .brand b, .brand span span{display:none} .brand svg{width:30px; height:30px} .zurueck{padding:6px 11px} .theme-btn{padding:6px 10px} .lang button{padding:6px 10px} }