:root { color-scheme: light; }
.account-body { height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; background: #f3f0e8; color: #17251d; }
.account-shell { width: min(1180px, calc(100% - 32px)); margin: 42px auto; }
.account-shell-narrow { width: min(520px, calc(100% - 32px)); }
.account-card { padding: clamp(24px,4vw,42px); border: 1px solid #d8d3c6; background: #fffdf8; border-radius: 20px; box-shadow: 0 18px 55px rgba(25,42,31,.08); }
.account-card h1,.account-card h2,.page-heading h1,.profile-hero h1 { margin: 8px 0 12px; }
.account-card h2, .account-card h3 { overflow-wrap: anywhere; }       /* "Freundschaftsanfragen" in a card on a phone */
:lang(de) .account-card h2 { hyphens: auto; }
.page-heading h1 { overflow-wrap: anywhere; }       /* a long German compound ("Sicherheitseinstellungen") may break instead of pushing the page sideways on a phone ... */
:lang(de) .page-heading h1 { hyphens: auto; }       /* ... and a browser that knows the hyphenation of German (iPhone Safari, Chrome) breaks it at a syllable: "Sicherheits-einstellungen" */
.account-card p { color: #637067; line-height: 1.55; }
.account-switch { margin-top: 20px; text-align: center; }
.account-switch a,.account-shell a { color: #1f6b46; }
.flash { padding: 13px 16px; margin: 0 0 18px; border-radius: 10px; }
.flash-error { background: #fff0ed; border: 1px solid #e5b2a8; color: #8c2f22; }
.flash-success { background: #edf8ef; border: 1px solid #aed0b6; color: #23613a; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:24px; }
:lang(de) .page-heading { flex-wrap:wrap; }       /* a button beside a long German title goes below it on a phone (English fits: its layout is left as it was) */
.settings-grid { display:grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.75fr); gap:24px; align-items:start; }
.account-card-full { grid-column:1 / -1; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.check-field { display:flex; align-items:center; gap:10px; }
.profile-hero { display:flex; align-items:center; gap:28px; padding:34px; margin-bottom:28px; background:#183527; color:#fff; border-radius:22px; }
.profile-hero p { color:#d6e2da; max-width:700px; }
.profile-hero img,.profile-avatar { width:112px; height:112px; border-radius:50%; object-fit:cover; border:4px solid rgba(255,255,255,.25); }
.profile-avatar { display:grid; place-items:center; background:#cf7c32; font-size:48px; font-weight:800; }
.profile-columns { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.public-card-grid { display:grid; gap:14px; }
.public-card { display:block; padding:20px; border:1px solid #d8d3c6; border-radius:14px; background:#fffdf8; color:inherit!important; text-decoration:none; }
.public-card h3 { margin:10px 0 6px; }.public-card p { color:#647067; }
.visibility-badge { display:inline-flex; padding:4px 9px; border-radius:99px; background:#e6eee8; color:#245a3b; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.user-table { display:grid; }.user-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; padding:14px 0; border-top:1px solid #e3ded3; }.user-row small { display:block; color:#68736b; margin-top:3px; }
.admin-route-table { display:grid; }.admin-route-row { display:grid; grid-template-columns:minmax(240px,1fr) auto auto auto; align-items:center; gap:16px; padding:13px 0; border-top:1px solid #e3ded3; }.admin-route-row small { display:block; color:#68736b; margin-top:3px; }.admin-route-row>span:not(.visibility-badge){color:#56645b;font-size:13px;}
@media (max-width:800px){.settings-grid,.profile-columns{grid-template-columns:1fr}.profile-hero{align-items:flex-start}.form-grid{grid-template-columns:1fr}.admin-route-row{grid-template-columns:1fr auto}.admin-route-row>span:last-child{grid-column:2}.account-card-full{grid-column:auto}}
.public-card-cover { width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; border-radius:10px; margin:-6px 0 10px; display:block; }   /* (the cover frame of every picture: docs/FEATURES-2026-10-19.md part B) */

/* ---- Community: profile, people lists, share (CM-9) ---- */
.profile-hero { flex-wrap: wrap; }
.profile-hero-main { flex: 1; min-width: 240px; }
.profile-handle { color: #b9d8c6; font-weight: 700; margin: -4px 0 10px; }
.follows-you { display: inline-block; padding: 2px 8px; border-radius: 99px; background: rgba(255,255,255,.16); color: #fff; font-size: 11px; font-weight: 700; }
.profile-stats { display: flex; gap: 22px; margin-top: 12px; color: #d6e2da; }
.profile-stats a, .profile-stats span { color: #d6e2da !important; text-decoration: none; }
.profile-stats a:hover { text-decoration: underline; }
.profile-stats b { color: #fff; font-size: 18px; margin-right: 3px; }
.profile-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.button-light { background: rgba(255,255,255,.12); color: #fff !important; border: 1px solid rgba(255,255,255,.35); text-decoration: none; }
.button-follow { background: var(--lime); color: #173d2b; border: 0; font-weight: 800; border-radius: 10px; padding: 11px 22px; cursor: pointer; }
.button-follow.is-following { background: transparent; color: inherit; border: 1px solid currentColor; font-weight: 700; }
.profile-hero .button-follow.is-following { color: #fff; }
.button-small { padding: 7px 14px; font-size: 13px; }
.profile-tabs { display: flex; gap: 6px; margin: 0 0 24px; border-bottom: 1px solid #d8d3c6; flex-wrap: wrap; }
.profile-tabs a { padding: 10px 16px; color: #56645b; text-decoration: none; font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.profile-tabs a.is-active { color: #173d2b; border-bottom-color: #173d2b; }
.people-section h2, .people-search h2 { margin-top: 0; }
.people-hint { color: #68736b; font-size: 13px; margin: 6px 0 14px; }
.people-list { display: grid; margin-bottom: 14px; }
.person-row { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-top: 1px solid #e3ded3; }
.person-row:first-child { border-top: 0; }
.person-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.person-avatar-initial { display: grid; place-items: center; background: #cf7c32; color: #fff; font-weight: 800; }
.person-who { flex: 1; min-width: 0; color: inherit !important; text-decoration: none; }
.person-who strong { display: block; overflow-wrap: anywhere; }
.person-badges { display: flex; gap: 6px; }
.badge-friend, .badge-follows-you { padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; background: #e6eee8; color: #245a3b; }
.badge-follows-you { background: #efece2; color: #647067; }
.person-row .button-follow.is-following { color: #245a3b; }
.people-empty { color: #68736b; padding: 8px 0; }
.share-card { display: flex; gap: 32px; align-items: center; justify-content: space-between; margin-top: 30px; flex-wrap: wrap; }
.share-card > div { flex: 1; min-width: 260px; }
.share-link-row { display: flex; gap: 10px; }
.share-link-row input { flex: 1; min-width: 0; }
.share-status { display: block; min-height: 18px; margin-top: 6px; color: #23613a; }
.share-qr { width: 190px; height: 190px; image-rendering: pixelated; border: 1px solid #d8d3c6; border-radius: 12px; background: #fff; }
.field small code { background: #efece2; padding: 0 4px; border-radius: 4px; }
.share-link-row .button, .page-heading .button { width: auto; flex: none; }
.profile-hero .eyebrow { color: #9fcfb2; }

/* ---- Admin: teaser card for the map data page (MD-4) ---- */
.admin-teaser { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.admin-teaser > div { flex:1; min-width:240px; }
.admin-teaser h2 { margin-top:0; }
.admin-teaser p { margin:0; max-width:62ch; }
.admin-teaser p + p { margin-top:10px; }
.admin-teaser .button { width:auto; flex:none; }
.admin-teaser a.button-primary { color:#fff; }       /* (".account-shell a" makes every link green, and this page is no .tr-page, where tours.css makes the link buttons white: the label was green on dark green) */

/* ---- Public pages and footer: privacy policy, support, imprint; account deletion ---- */
.legal-footer { padding: 18px 16px 30px; text-align: center; font-size: 13px; color: #68736b; }
.legal-footer a { color: #1f6b46; text-decoration: none; }
.legal-footer a:hover { text-decoration: underline; }
.legal-footer .sep { margin: 0 6px; }
/* the visitor's choice of a language (templates/_language_switch.html): in the line of the footer; the language that is on is not a link to itself */
.legal-footer .lang-switch { display: inline; }
.legal-footer .lang-switch a[aria-current="true"] { color: inherit; font-weight: 700; }
.account-shell-doc { width: min(820px, calc(100% - 32px)); }
.legal-doc h1 { margin: 8px 0 6px; }
.legal-doc h2 { margin: 34px 0 10px; font-size: 21px; }
.legal-doc h3 { margin: 20px 0 6px; font-size: 16px; }
.legal-doc p, .legal-doc li { color: #2d3b33; line-height: 1.6; }
.legal-doc ul { padding-left: 22px; }
.legal-doc li { margin: 4px 0; }
.legal-doc .legal-meta { color: #68736b; font-size: 14px; margin: 0 0 18px; }
.legal-doc .legal-langswitch { margin: 0 0 22px; font-size: 14px; }
.legal-doc address { font-style: normal; line-height: 1.6; padding: 14px 18px; background: #f3f0e8; border-radius: 12px; display: inline-block; }
.legal-doc table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 14px; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-top: 1px solid #e3ded3; }
.legal-doc th { color: #56645b; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.legal-note { padding: 14px 18px; margin: 12px 0; background: #fff6e0; border: 2px solid #e0b24a; border-radius: 12px; color: #5c4208; line-height: 1.5; }
.legal-note strong { color: #4a3406; }
.legal-warning { margin-bottom: 18px; }
.faq dt { font-weight: 750; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: #2d3b33; line-height: 1.6; }
.button-danger { background: #b3321f; color: #fff; }
.button-danger:hover:not(:disabled) { background: #96281a; }
.danger-zone { border-color: #e5b2a8; }
.danger-zone h2 { color: #8c2f22; }
.danger-zone ul { color: #4f5b53; line-height: 1.55; padding-left: 20px; }
.delete-error { margin: 10px 0 0; }
.danger-zone .button-danger { width: 100%; padding: 13px 16px; }

/* ---- Password managers: the e-mail address as the login name in forms that only ask for passwords (settings). Not
   display:none - a manager only attaches a password to a field it can see - but one pixel, clipped and out of the tab order. ---- */
.pm-username { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }

/* Settings > Profile picture: the round preview and the crop button (js/settings-avatar.js, docs/FEATURES-2026-10-19.md part B) */
.avatar-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avatar-preview { width: 88px; height: 88px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #cf7c32; color: #fff; font-size: 36px; font-weight: 800; border: 3px solid #fffdf8; box-shadow: 0 0 0 1px #d8d3c6; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-actions { display: grid; gap: 8px; min-width: 0; }
/* Settings > Language (templates/settings.html, static/js/settings-language.js): the radio buttons are laid out like the switches of the leaderboards card */
.settings-language p { max-width: 64ch; }
.settings-language .settings-language-options { display: grid; gap: 4px; }
.settings-language .check-field { margin: 4px 0 0; font-weight: 650; align-items: flex-start; }
.settings-language .check-field input { width: 18px; height: 18px; margin: 3px 0 0; padding: 0; flex: none; }
.settings-language .check-field small { display: block; margin-top: 2px; font-weight: 500; color: #68736b; font-size: 13px; }
.settings-language .flash { margin: 0; }
.settings-language .button { width: auto; align-self: flex-start; }