/* =====================================================================
   Enkeln: the look of the page
   =====================================================================
   Taken over from the prototype HelpingHands (design by Iden, Figma
   "Türkei1"): a cream page like a notice board, Lato for text, Fraunces
   for headings, Caveat for short handwritten notes. Yellow #FFCF3A for
   chosen things and notes, green #245B45 for the main buttons.
   Made for older people: large text, strong contrast, big buttons, and
   everything reachable with the keyboard.

   Loaded by: index.html. Works together with js/reading.js, which sets
   the classes "large-text", "high-contrast" and "dark-mode" on <body>.
   All fonts lie in ../fonts/, the page never asks a foreign server.
   ===================================================================== */

/* ---------- Font ---------- */

/* "@font-face" tells the browser where a font file is and for which
   letters it should be used. Lato comes in two files per weight:
   "latin" has the usual letters (also German ä, ö, ü, ß and the Turkish
   dotless ı), "latin-ext" has the other Turkish letters (ş, ğ, İ ...).
   "unicode-range" lists the letter numbers each file covers, so the
   browser only downloads the second file when such a letter appears.
   "font-display: swap" shows the text at once in a system font and
   switches to Lato as soon as the file has arrived. */
@font-face {
  font-family: "Lato";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 400;  /* normal thickness */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/lato-latin-400-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;  /* usual letters: A-Z, a-z, ä ö ü ß, Turkish ı, € and punctuation */
}

/* Lato normal, extra letters. */
@font-face {
  font-family: "Lato";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 400;  /* normal thickness */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/lato-latin-ext-400-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;  /* extra letters: Turkish ş ğ İ and other accents */
}

/* Lato bold, usual letters. */
@font-face {
  font-family: "Lato";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 700;  /* bold */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/lato-latin-700-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;  /* usual letters: A-Z, a-z, ä ö ü ß, Turkish ı, € and punctuation */
}

/* Lato bold, extra letters. */
@font-face {
  font-family: "Lato";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 700;  /* bold */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/lato-latin-ext-700-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;  /* extra letters: Turkish ş ğ İ and other accents */
}

/* Fraunces: a warm serif with soft, a little old-fashioned letters, like
   the headline of a local newspaper. Only for headings, in extra bold
   (800). Same split into "latin" and "latin-ext" as Lato above.
   Licence: fonts/OFL-Fraunces.txt. */
@font-face {
  font-family: "Fraunces";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 800;  /* extra bold */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/fraunces-latin-800-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;  /* usual letters: A-Z, a-z, ä ö ü ß, Turkish ı, € and punctuation */
}

/* Fraunces extra bold, extra letters. */
@font-face {
  font-family: "Fraunces";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 800;  /* extra bold */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/fraunces-latin-ext-800-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;  /* extra letters: Turkish ş ğ İ and other accents */
}

/* Caveat: handwriting, as if written with a pen on a note. Only for
   short extra words ("von Nachbarn für Nachbarn", "Lena sagt zu"),
   never for something people must read to use the page.
   Licence: fonts/OFL-Caveat.txt. */
@font-face {
  font-family: "Caveat";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 700;  /* bold */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/caveat-latin-700-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;  /* usual letters: A-Z, a-z, ä ö ü ß, Turkish ı, € and punctuation */
}

/* Caveat bold, extra letters. */
@font-face {
  font-family: "Caveat";  /* the name used in this file, see --font-body etc. */
  font-style: normal;  /* upright letters, not italic */
  font-weight: 700;  /* bold */
  font-display: swap;  /* show text at once in a system font, swap later */
  src: url("../fonts/caveat-latin-ext-700-normal.woff2") format("woff2");  /* the file in our own folder "fonts" */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;  /* extra letters: Turkish ş ğ İ and other accents */
}

/* ---------- Design values ---------- */

/* All colours, sizes and spaces in one place. The green, the cream and
   the orange come from the Figma screens. Every pair of text and
   background below was measured: normal text needs a contrast of at
   least 4.5:1, big text and the edges of buttons at least 3:1.
   Example: white text on the green button: 7.9:1. */
/* ":root" is the whole page. Values set here can be used everywhere with var(--name). */
:root {
  --color-background: #f7f4ed;      /* cream page, like an old notice board */
  --color-surface: #ffffff;         /* fields and the header */
  --color-paper: #fffdf8;           /* the paper of the notes, a little warm */
  --color-text: #252d29;            /* almost black with a little green */
  --color-muted: #53615a;           /* hints, 5.9:1 on the cream */
  --color-placeholder: #6b7670;     /* example text in empty fields, 4.7:1 */
  /* Yellow and green share the work (decision 2026-10-02-2045): yellow
     for the logo, chosen things, notes and highlights, green for the
     main buttons. Yellow is only ever a fill: text on it is dark
     (9.6:1). Where yellow would be a line or text on white, a dark
     mustard is used, because yellow text on white cannot be read (1.5:1). */
  --color-primary: #ffcf3a;         /* sunflower yellow, fill of buttons */
  --color-primary-dark: #f2b705;    /* deeper yellow for "hover", dark text 7.8:1 */
  --color-primary-soft: #fff4cc;    /* very light yellow for chosen things */
  --color-primary-text: #252d29;    /* dark text on yellow */
  --color-primary-line: #9a6b00;    /* mustard for frames and edges, 4.7:1 */
  --color-primary-ink: #7a5400;     /* dark mustard for text and icons, 6.2:1 */
  --color-accent-green: #245b45;    /* the green of the design: main
                                       buttons, white text on it 7.9:1 */
  --color-green-ink: #245b45;       /* green text on the page, 7.8:1 */
  --color-accent: #e9a23b;          /* warm orange, only with dark text on it */
  --color-accent-dark: #b5651d;     /* orange for small icons and stars */
  --color-accent-soft: #fce7ce;  /* light orange for soft boxes, for example the pay box */
  --color-note: #ffe27a;            /* yellow sticky note, dark text 11:1 */
  --color-tape: rgba(255, 226, 122, 0.8);  /* see-through yellow tape */
  --color-stamp: #b3372a;           /* red stamp ink, 5.9:1 on paper */
  --color-ink: #2f4e8f;             /* blue ink of a ballpoint pen, 7.9:1 */
  --color-border: #e4ddcf;          /* soft line around notes and the header */
  --color-field-border: #8a948f;    /* line around things to fill in, 3:1 */
  --color-highlight: #fff1c2;  /* light yellow behind marked things */
  --color-success: #245b45;         /* "done" uses the same green */
  --color-success-soft: #e9f1e9;  /* light green behind "done" things */
  --color-focus: #c96f00;  /* orange ring around the element that has the keyboard focus */
  --color-track: #d5d1c9;           /* line of steps that are not reached */
  --color-error: #a3241c;  /* dark red for error text, 7.4:1 on white */
  --color-error-soft: #fde7e5;  /* light red behind error messages */

  /* The only spaces the design uses. Every margin, padding and gap in
     this file should be one of them. */
  --space-8: 8px;  /* 8px: the smallest space, for example between icon and text */
  --space-12: 12px;  /* 12px: between small things in a row */
  --space-16: 16px;  /* 16px: the normal space inside boxes */
  --space-24: 24px;  /* 24px: between blocks */
  --space-32: 32px;  /* 32px: between larger parts of a page */
  --space-48: 48px;  /* 48px: above big sections */
  --space-64: 64px;  /* 64px: the largest space */

  /* Corners: 12px for fields and buttons. Notes have small corners
     (6px), because paper is not round. */
  --radius-small: 12px;  /* corners of fields and buttons */
  --radius: 16px;  /* corners of larger boxes */
  --radius-note: 6px;  /* corners of the paper notes */
  /* The shadow of a sheet of paper: a thin line right below it and a soft
     shadow further down, as if the lower edge lifts off the board.
     "-14px" pulls the soft shadow in, so it only shows at the bottom. */
  --shadow: 0 1px 1px rgba(37, 45, 41, 0.08), 0 14px 18px -14px rgba(37, 45, 41, 0.45);
  --shadow-float: 0 12px 32px rgba(37, 45, 41, 0.2);  /* a larger shadow for things that float above the page (popups) */

  /* Height of fields and big buttons. */
  --control-height: 64px;  /* 64px: big enough for older fingers and shaky hands */

  /* Fraunces for headings, Lato for text and buttons, Caveat for the
     handwritten notes. The other names are used while the fonts load. */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;  /* headings */
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;  /* normal text and buttons */
  --font-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;  /* handwritten notes */
}

/* "Dark mode" (decision 2026-10-02-2115): a dark page with light text.
   Yellow and the green buttons stay as they are. Every pair was measured
   again, for example light text on the dark page 14.5:1, light yellow
   text on a dark note 9.5:1, blue stamp ink 6.6:1.
   ":not(.high-contrast)" means: only while "Strong contrast" is off.
   When both are switched on, strong contrast wins (black on white). */
body.dark-mode:not(.high-contrast) {
  --color-background: #1b1f1d;      /* almost black with a little green */
  --color-surface: #252b28;         /* fields and the header */
  --color-paper: #2b322e;           /* the notes */
  --color-text: #f1efe8;  /* light text on the dark page, 14.5:1 */
  --color-muted: #b7c0ba;           /* 7.0:1 on the notes */
  --color-placeholder: #9aa39e;  /* example text in empty fields, lighter grey */
  --color-primary-soft: #3a3420;    /* dark yellow for chosen things */
  --color-primary-line: #d9b048;    /* light mustard frames, 7.0:1 */
  --color-primary-ink: #ffd75e;     /* light yellow text, 9.5:1 */
  --color-green-ink: #8fd6b0;       /* light green text, 8.5:1 */
  --color-accent-dark: #f0b45a;  /* orange for small icons and stars, lighter for the dark page */
  --color-accent-soft: #3d2f1c;  /* dark orange box behind the pay box */
  --color-tape: rgba(255, 226, 122, 0.55);  /* the tape is a bit less bright on the dark board */
  --color-stamp: #ff8a7a;  /* red stamp ink, lighter for the dark page */
  --color-ink: #9db8f0;  /* blue pen ink, 6.6:1 */
  --color-border: #3a423e;  /* dark lines around notes */
  --color-field-border: #7d8782;  /* lines around fields, 3.9:1 on the dark fields */
  --color-highlight: #3a3420;  /* dark yellow behind marked things */
  --color-success: #7fd1a8;  /* light green for "done" */
  --color-success-soft: #1f3a2d;  /* dark green box behind "done" things */
  --color-focus: #ffb347;  /* light orange focus ring, visible on dark */
  --color-track: #4a524e;  /* line of steps that are not reached yet */
  --color-error: #ff8a80;  /* light red error text */
  --color-error-soft: #3d2220;  /* dark red box behind error messages */
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 14px 18px -14px rgba(0, 0, 0, 0.7);  /* darker shadows, so they still show on the dark page */
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.5);  /* shadow of popups on the dark page */
  /* Tells the browser to draw its own parts dark too, for example the
     scroll bars and the little calendar of date fields. */
  color-scheme: dark;
}

/* "Strong contrast": black on white, no soft colours, no shadows. It wins
   over the dark mode when both are switched on. */
body.high-contrast {
  --color-background: #ffffff;  /* white page */
  --color-surface: #ffffff;  /* white fields and header */
  --color-text: #000000;  /* black text */
  --color-muted: #000000;  /* hints are black too */
  --color-placeholder: #000000;  /* example text is black too */
  --color-primary: #000000;  /* buttons become black ... */
  --color-primary-dark: #000000;  /* ... also under the mouse */
  --color-primary-soft: #ffffff;  /* chosen things: white */
  --color-primary-text: #ffffff;  /* ... with white text on the black buttons */
  --color-primary-line: #000000;  /* black frames */
  --color-primary-ink: #000000;  /* black text instead of mustard */
  --color-accent-green: #000000;  /* green buttons become black */
  --color-green-ink: #000000;  /* green text becomes black */
  --color-accent: #ffd400;  /* strong yellow for highlights */
  --color-accent-dark: #000000;  /* black icons and stars */
  --color-accent-soft: #ffffff;  /* white boxes */
  --color-paper: #ffffff;  /* white notes */
  --color-note: #ffffff;  /* white sticky notes */
  --color-tape: transparent;  /* no tape */
  --color-stamp: #000000;  /* black stamps */
  --color-ink: #000000;  /* black pen ink */
  --color-border: #000000;  /* black lines */
  --color-field-border: #000000;  /* black lines around fields */
  --color-highlight: #ffd400;  /* strong yellow behind marked things */
  --color-success: #000000;  /* black for "done" */
  --color-success-soft: #ffffff;  /* white behind "done" things */
  --color-focus: #d40000;  /* red focus ring, easy to see */
  --color-track: #767676;  /* grey line for steps not reached, 4.5:1 */
  --color-error: #000000;  /* black error text */
  --color-error-soft: #ffffff;  /* white behind error messages */
  --shadow: none;  /* no shadows: they only blur the edges */
}


/* =====================================================================
   Base: the whole page
   ===================================================================== */

/* Every box counts its border and inner space in its width.
   Example: width 200px with padding 16px stays 200px wide, not 232px. */
* {
  box-sizing: border-box;
}

/* The whole page: colours, font, size and line height. */
body {
  margin: 0;                                   /* no white edge around the page */
  background-color: var(--color-background);   /* cream, like a notice board */
  color: var(--color-text);
  font-family: var(--font-body);               /* Lato */
  font-size: 18px;                             /* the normal text size of the design */
  line-height: 1.55;                           /* 28px from one line to the next */
  -webkit-tap-highlight-color: transparent;    /* no grey flash when a phone taps a button */
}

/* "Larger text" (js/reading.js): everything 20 percent larger. "zoom"
   makes text, buttons and spaces larger together, so nothing overlaps. */
body.large-text {
  zoom: 1.2;
}

/* Text only for screen readers: takes no room, but is still read aloud. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* A thick orange ring around the element that has the keyboard focus. */
:focus-visible {
  outline: 4px solid var(--color-focus);
  outline-offset: 3px;
}

/* "Skip to content": hidden until the keyboard reaches it (first Tab). */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-16);  /* left, or right in Arabic */
  top: -100px;                       /* above the page while not focused */
  background: var(--color-surface);
  padding: var(--space-12) var(--space-16);
  z-index: 10;
}
.skip-link:focus {
  top: var(--space-16);              /* slides into view with the keyboard */
}

/* Headings in Fraunces. */
h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin: 0 0 var(--space-16);
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }

/* Normal paragraphs keep a space below. */
p {
  margin: 0 0 var(--space-16);
}

/* Links are underlined, so they are recognised without colour. */
a {
  color: var(--color-green-ink);
}

/* Anything with the attribute "hidden" is never shown, whatever other
   rules say (for example "display: flex"). */
[hidden] {
  display: none !important;
}


/* =====================================================================
   Header with logo, title and navigation
   ===================================================================== */

.site-header {
  display: flex;                          /* logo, title and buttons in one row */
  flex-wrap: wrap;                        /* on narrow phones the buttons move below */
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border-bottom: 4px solid var(--color-primary);   /* the yellow line under the header */
}

/* The logo: the word "Enkeln" on a yellow spot. */
.logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-primary-text);
  background: var(--color-primary);
  padding: 0 var(--space-12);
  border-radius: var(--radius-small);
  text-decoration: none;
}

/* The title of the open screen next to the logo ("Anmelden", ...). */
.screen-title {
  font-weight: 700;
  flex: 1;                                /* takes the free room, pushes the buttons right */
}

/* The navigation buttons in the header. */
.header-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}


/* =====================================================================
   Reading aids (Lesehilfen): a row of switches under the header
   ===================================================================== */

.reading-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background: var(--color-highlight);
  border-bottom: 1px solid var(--color-border);
}

/* =====================================================================
   Language: in the reading aids (the first choice has its own screen)
   ===================================================================== */

.language-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}
/* The first choice: one big button per language, one under the other. */
.language-choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: var(--space-16) 0;
}
/* The globe on the button "Lesehilfen". It does not shrink next to long words. */
.button-icon {
  flex-shrink: 0;
}
.language-bar label {
  font-weight: 700;
}
/* The list is only as wide as the longest language name. */
.language-bar select {
  width: auto;
  min-height: 48px;
}


/* =====================================================================
   Main part of the page
   ===================================================================== */

main {
  max-width: 46rem;                      /* lines stay short enough to read */
  margin: 0 auto;                         /* in the middle of wide screens */
  padding: var(--space-24) var(--space-16) var(--space-64);
}

/* The page moves the focus to <main> when a screen opens (js/screens.js),
   so screen readers start there. That is not a click by the person, so
   no orange ring around the whole content. */
main:focus {
  outline: none;
}

/* The handwritten note under the big title. */
.hand-note {
  font-family: var(--font-hand);
  font-size: 1.6rem;
  color: var(--color-ink);
  margin-top: calc(-1 * var(--space-12));
}

/* A lead sentence: a bit larger than normal text. */
.lead {
  font-size: 1.15rem;
}

/* A hint in grey. */
.hint {
  color: var(--color-muted);
  font-size: 0.95rem;
}


/* =====================================================================
   Buttons
   ===================================================================== */

/* Every button: big, round corners, bold text. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--control-height);     /* 64px: easy to hit */
  padding: var(--space-12) var(--space-24);
  border: 2px solid var(--color-accent-green);
  border-radius: var(--radius-small);
  background: var(--color-accent-green); /* green main button ... */
  color: #ffffff;                        /* ... with white text (7.9:1) */
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.button:hover {
  filter: brightness(1.1);
}

/* A quieter button: white with a green frame. */
.button.secondary {
  background: var(--color-surface);
  color: var(--color-green-ink);
}

/* A small button, for example in the header. */
.button.small {
  min-height: 48px;
  padding: var(--space-8) var(--space-16);
  font-size: 1rem;
}

/* A button that is switched on (reading aids, chosen days). */
.button[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary-line);
  color: var(--color-primary-text);
}

/* A button over the whole width. */
.button.wide {
  width: 100%;
}

/* A dangerous button ("Bestellung absagen"): red frame. */
.button.danger {
  background: var(--color-surface);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Strong contrast: all buttons black with white text. */
body.high-contrast .button {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
body.high-contrast .button[aria-pressed="true"] {
  background: #ffd400;
  color: #000000;
}


/* =====================================================================
   The three ways on the start page
   ===================================================================== */

.role-list {
  display: grid;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

/* One big way: title and one line below, the whole box is a button. */
.role-button {
  display: block;
  width: 100%;
  text-align: start;                     /* left, or right in Arabic */
  padding: var(--space-16) var(--space-24);
  border: 2px solid var(--color-accent-green);
  border-radius: var(--radius-small);
  background: var(--color-accent-green);  /* "für meine Eltern": green */
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.role-button.sunny {                       /* "für mich selbst": yellow */
  background: var(--color-primary);
  border-color: var(--color-primary-line);
  color: var(--color-primary-text);
}
.role-button.plain {                       /* "Ich möchte helfen": white */
  background: var(--color-surface);
  color: var(--color-text);
}
.role-title {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
}
.role-line {
  display: block;
}
body.high-contrast .role-button {
  background: #ffffff;
  border-color: #000000;
  color: #000000;
}


/* =====================================================================
   Notes (Zettel): white boxes like paper on the board
   ===================================================================== */

.note {
  position: relative;
  background: var(--color-paper);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-note);
  padding: var(--space-24);
  margin-bottom: var(--space-24);
  box-shadow: var(--shadow);
}

/* A strip of yellow tape on top of the note. */
.note.taped::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 96px;
  height: 24px;
  margin-left: -48px;                    /* half the width: exactly in the middle */
  background: var(--color-tape);
  transform: rotate(-2deg);
}

/* The list of prices on the start page. */
.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.price-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-8) 0;
  border-bottom: 1px dashed var(--color-border);
}

/* A yellow price tag. */
.price-tag {
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  padding: 0 var(--space-8);
  border-radius: var(--radius-note);
  white-space: nowrap;
}


/* =====================================================================
   Forms
   ===================================================================== */

/* One field: label above, input below. */
.field {
  margin-bottom: var(--space-24);
}
.field label,
.field legend {
  display: block;
  font-weight: 700;
  margin-bottom: var(--space-8);
}
fieldset.field {
  border: 0;
  padding: 0;
  margin-inline: 0;
}

/* Inputs, lists and text areas: big and clear. */
input,
select,
textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-12) var(--space-16);
  border: 2px solid var(--color-field-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
textarea {
  min-height: 8rem;
}

/* The field for the code from the sign-in mail: large digits in the middle.
   "direction: ltr" keeps the digits in their order on the Arabic page too. */
.code-input {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  direction: ltr;
}

/* Space between the two buttons under the code field. */
#code-form .button + .button {
  margin-top: var(--space-12);
}
::placeholder {
  color: var(--color-placeholder);
}

/* Check boxes stay small squares, but with a big label next to them. */
input[type="checkbox"] {
  width: 28px;
  min-height: 28px;
  height: 28px;
}

/* A row of choice buttons (role, days, district ...). */
.choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}


/* =====================================================================
   Messages to the person
   ===================================================================== */

.message {
  padding: var(--space-16);
  border-inline-start: 6px solid var(--color-success);  /* left, or right in Arabic */
  background: var(--color-success-soft);
  border-radius: var(--radius-note);
  margin: var(--space-16) 0;
}
.message.error {
  border-inline-start-color: var(--color-error);
  background: var(--color-error-soft);
  color: var(--color-error);
}


/* =====================================================================
   Footer
   ===================================================================== */

.site-footer {
  text-align: center;
  padding: var(--space-24) var(--space-16);
  color: var(--color-muted);
  font-size: 0.95rem;
}


/* =====================================================================
   Ordering: the steps of the order form
   ===================================================================== */

/* A title above a list, with the yellow marker line below it. */
.section-title {
  margin-top: var(--space-32);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-decoration-thickness: 6px;
  text-underline-offset: 2px;
}

/* The kinds of help in step 1: one big button per line. */
.choice-list {
  display: grid;
  gap: var(--space-8);
  margin-bottom: var(--space-24);
}
.choice-list .button {
  justify-content: flex-start;            /* text on the left, like a list */
}

/* "von" [time] "bis" [time] in one row. */
.time-row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: var(--space-8);
}

/* "Zurück" and "Weiter" under each step. */
.step-buttons {
  margin-top: var(--space-24);
}

/* The yellow summary in step 4. */
.summary {
  background: var(--color-note);
  color: var(--color-primary-text);
}
.summary-price {
  font-size: 1.3rem;
  font-weight: 700;
}


/* =====================================================================
   Helper suggestions: one card per helper, the whole card is a button
   ===================================================================== */

.suggestion-list {
  display: grid;
  gap: var(--space-12);
  margin-bottom: var(--space-24);
}
.suggestion-card {
  display: grid;
  gap: var(--space-8);
  width: 100%;
  text-align: start;                     /* left, or right in Arabic */
  padding: var(--space-16);
  border: 2px solid var(--color-field-border);
  border-radius: var(--radius-small);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
/* The chosen card: yellow frame and a light yellow background. */
.suggestion-card[aria-pressed="true"] {
  border: 4px solid var(--color-primary-line);
  background: var(--color-primary-soft);
}
.suggestion-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  font-size: 1.15rem;
}
.about-text {
  font-style: italic;
}

/* Small badges: "Geprüft", "Hilft kostenlos". */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin: 0;
}
.badge {
  border: 1px solid var(--color-green-ink);
  color: var(--color-green-ink);
  border-radius: var(--radius-note);
  padding: 0 var(--space-8);
  font-size: 0.9rem;
  font-weight: 700;
}


/* =====================================================================
   Order cards ("Meine Bestellungen")
   ===================================================================== */

.order-list {
  display: grid;
  gap: var(--space-8);
}
.order-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-12);
}
.order-head h3 {
  margin: 0;
}
.order-details p {
  margin: 0 0 var(--space-8);
}
.helper-line {
  font-weight: 700;
}

/* The status as a rubber stamp: capital letters in a frame, a bit tilted. */
.stamp {
  display: inline-block;
  margin: var(--space-8) 0 var(--space-12);
  padding: 0 var(--space-8);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-note);
  color: var(--color-ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transform: rotate(-1.5deg);
}
.stamp.status-declined,
.stamp.status-cancelled {
  border-color: var(--color-stamp);
  color: var(--color-stamp);
}
.stamp.status-done,
.stamp.status-paid {
  border-color: var(--color-success);
  color: var(--color-success);
}

/* Only declined orders get a coloured frame (red): something to do. */
.status-card-declined {
  border: 3px solid var(--color-stamp);
}
/* Done orders wait for the payment: green frame. */
.status-card-done {
  border: 3px solid var(--color-success);
}

/* The buttons under a card. */
.order-card .choice-row {
  margin-top: var(--space-12);
}

/* Small forms inside a card (time, payment). */
.inline-form {
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px dashed var(--color-border);
}
.field-title {
  font-weight: 700;
  margin: var(--space-16) 0 var(--space-8);
}
.pay-box h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0;
}


/* =====================================================================
   Area of a helper (js/helper.js)
   ===================================================================== */

/* The money overview: four boxes side by side, two per row on phones. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-12);
  margin: var(--space-16) 0 var(--space-24);
}
.stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-12) var(--space-16);
}
/* The number big, the word under it small. */
.stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
}
.stat-label {
  display: block;
  color: var(--color-muted);
}

/* The three tabs: a row of buttons, the open one is filled. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
}
.tab {
  min-height: var(--control-height);
  padding: 0 var(--space-16);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.tab[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-primary-ink);
}

/* Direct requests stand out with a thick frame. */
.direct-card {
  border: 3px solid var(--color-primary);
}
/* The wish of the client, in handwriting. */
.order-note {
  font-family: var(--font-hand);
  font-size: 1.2rem;
}

/* A check box with its text in one line. Check boxes are not 100% wide. */
.check-line {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: var(--control-height);
  font-weight: 400;
}
.field .check-line {
  display: flex;
  font-weight: 400;
  margin-bottom: 0;
}
.check-line input {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
}

/* One kind of help: check box left, price field right. */
.task-price-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}
.task-price-line input[inputmode="decimal"] {
  width: 8rem;
  flex-shrink: 0;
}

/* The settings form and the box with the rules. */
.settings-form textarea {
  min-height: 5rem;
}
.rules-box {
  margin-top: var(--space-24);
}
.rules-box h2 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  margin-top: 0;
}


/* =====================================================================
   Chat (js/chat.js)
   ===================================================================== */

/* The list of messages: fixed height, scrolls inside. */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  height: 55vh;
  overflow-y: auto;
  margin: var(--space-16) 0;
}
/* One message: a bubble on the left (the other person). */
.chat-bubble {
  align-self: flex-start;
  max-width: 80%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-12);
}
/* Own messages: on the right, in the light main colour. */
.chat-bubble.own {
  align-self: flex-end;
  background: var(--color-primary-soft);
}
.chat-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-time {
  display: block;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: end;                        /* right, or left in Arabic */
}
/* Input field and "Senden" side by side. */
.chat-form {
  display: flex;
  flex-wrap: wrap;                        /* the message line gets its own row */
  gap: var(--space-8);
  align-items: flex-end;
}
.chat-form textarea {
  flex: 1;
}

/* The "Sprechen" button (js/speech.js). Under a field in the wish box,
   next to the field in the chat and help forms. */
.speech-button {
  margin-top: var(--space-8);
}
.chat-form .speech-button {
  margin-top: 0;
}
/* A small mark with a word on it ("2 neu"): not only a colour. */
.count-badge {
  display: inline-block;
  margin-inline-start: var(--space-8);
  padding: 0 var(--space-8);
  background: var(--color-note);
  color: var(--color-primary-text);
  border: 1px solid var(--color-primary-text);
  border-radius: var(--radius);
  font-weight: 700;
}
/* The note about new messages: text and button side by side, wrapping if needed. */
.unread-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  margin: var(--space-16) 0;
  background: var(--color-note);
  color: var(--color-primary-text);
  border-inline-start: 6px solid var(--color-primary-text);
  border-radius: var(--radius-note);
  font-weight: 700;
}
/* Strong contrast: the notes are white there, so the text and the line are black.
   (--color-primary-text is white in this mode, it is meant for black buttons.) */
body.high-contrast .count-badge,
body.high-contrast .unread-notice {
  color: var(--color-text);
  border-color: var(--color-text);
}
/* The line right above the field that says what the microphone does. It takes
   a whole row in the forms that stand side by side. */
.speech-status {
  flex-basis: 100%;
  margin: 0 0 var(--space-8);
}


/* =====================================================================
   AI: wish in own words (js/wish.js) and help assistant (js/help.js)
   ===================================================================== */

/* The box under the kinds of help: set apart by a dashed line. */
.wish-box {
  margin-top: var(--space-24);
  padding-top: var(--space-16);
  border-top: 1px dashed var(--color-border);
}
.wish-box h3 {
  font-family: var(--font-heading);
  margin-top: 0;
}
/* The help assistant: a side panel over the page. "inline-end" is the right
   side, in Arabic the left side, so the panel changes sides by itself. */
.help-panel {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 20;                                /* above the header and the page */
  width: 30rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border-inline-start: 2px solid var(--color-border);
  box-shadow: var(--shadow-float);
  animation: help-panel-in-right 0.2s ease-out;
}
/* Arabic: the panel comes in from the left. */
[dir="rtl"] .help-panel {
  animation-name: help-panel-in-left;
}
@keyframes help-panel-in-right {
  from { transform: translateX(100%); }
}
@keyframes help-panel-in-left {
  from { transform: translateX(-100%); }
}
/* People who asked their device for less movement get no sliding. */
@media (prefers-reduced-motion: reduce) {
  .help-panel {
    animation: none;
  }
}
/* Narrow screens: the panel fills the screen, the page behind stands still.
   The same width as NARROW_SCREEN in js/help.js. */
@media (max-width: 48rem) {
  .help-panel {
    width: 100%;
    border-inline-start: none;
  }
  body.help-panel-covers-page {
    overflow: hidden;
  }
}
/* Title and "Schließen" side by side; they wrap with very large text. */
.help-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.help-panel-head h2 {
  font-family: var(--font-heading);
  margin: 0;
}
/* The bubbles take all free height and scroll inside. "min-height: 0" allows
   a flex child to get smaller than its content, otherwise it would not scroll. */
.help-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-16);
}
.help-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
/* In the panel a bubble may be wider: the panel itself is narrow. */
.help-scroll .chat-bubble {
  max-width: 90%;
}
.help-scroll .hint {
  margin-bottom: 0;
  font-size: inherit;                         /* as large as the text: "kein kleiner Text" */
}
/* The name above a bubble ("Sie", "Assistent"): who wrote it is not only
   shown by the side and the colour. */
.chat-sender {
  margin: 0;
  font-weight: 700;
  color: var(--color-muted);
}
/* "Der Assistent schreibt ..." is slanted, so it does not look like an answer. */
.help-typing .chat-text {
  font-style: italic;
}
/* The field at the bottom. "safe-area-inset-bottom": the free edge of phones
   without a home button. */
.help-panel-foot {
  padding: var(--space-12) var(--space-16);
  padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}
.help-panel-foot .message {
  margin: 0 0 var(--space-8);
}
/* The field in its own row, the buttons "Sprechen" and "Fragen" below it. */
.help-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}
.help-form textarea {
  flex: 1 0 100%;
}
.help-form .button {
  flex: 1 1 auto;
  margin-top: 0;
}


/* =====================================================================
   Legal pages (impressum.html, datenschutz.html, nutzungsbedingungen.html)
   ===================================================================== */

/* The same width as the app, with room at the sides on phones. */
.legal-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-16);
}
.legal-page h1,
.legal-page h2 {
  font-family: var(--font-heading);
}
/* The placeholder note: some room above and below. */
.legal-placeholder {
  margin: var(--space-16) 0 var(--space-24);
}
/* Links in the footer: underlined, so everybody sees they are links. */
.site-footer a {
  color: inherit;
  text-decoration: underline;
}