/* Appens layout og komponenter. Roligt og forretningsagtigt: topbar med flammen og
   navnet, seks faner (bundlinje på telefon under 720 px). Alle farver kommer fra
   tokens.css. Klasserne hedder det, de er, på dansk uden æøå.

   BREDDEN er to slags, og skallen siger hvilken med data-bredde (sat i app.js):
     tekst   noter, en note, hjælpen, kontosiden, Opsætning, integrationerne.
             Én spalte på højst --bredde-tekst. En linje på 2000 px kan ingen læse.
     bred    tavlen, listen, Vigtigst nu, matricen, kortet, søgningen og I dag.
             Hele skærmen med en luft, der vokser med den. Loftet på kortenes
             egen bredde står i tavle.css, så et kort ikke bliver uendeligt bredt.
   Topbaren følger indholdet, så logoet og den første kolonne står på linje. */
*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--tekst);
  font-family: var(--skrift);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 0.75rem; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Safari på iPhone regner radioknappers og afkrydsningsfelters størrelse ud fra skriften,
   og font: inherit gjorde dem store. De har deres egen størrelse længere nede. */
input[type="radio"], input[type="checkbox"] { font: initial; }

/* ---- Skal: topbar, navigation, indhold ---- */
.skal { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  background: var(--flade);
  border-bottom: 1px solid var(--linje);
  padding-top: env(safe-area-inset-top);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-indre {
  max-width: var(--bredde-tekst);
  margin: 0 auto;
  padding: 0 1rem;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--tekst);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
.logo img { height: 24px; width: 24px; }

.nav { display: flex; gap: 0.25rem; margin-left: auto; flex: 0 0 auto; }
.nav a {
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  color: var(--tekst-svag);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--overgang), background-color var(--overgang);
}
.nav a:hover { color: var(--tekst); background: var(--flade-2); }
.nav a.aktiv { color: var(--accent); background: var(--accent-bg); }

.indhold {
  flex: 1;
  width: 100%;
  max-width: var(--bredde-tekst);
  margin: 0 auto;
  padding: 1.5rem 1rem 2rem;
}
/* Arbejdsfladerne slipper spalten og tager skærmen. Luften i siden vokser med
   vinduet, så indholdet ikke klistrer til kanten på en bred skærm. */
.skal[data-bredde="bred"] .topbar-indre,
.skal[data-bredde="bred"] .indhold { max-width: none; padding-inline: var(--bredde-side); }

.side-hoved { margin-bottom: 1.25rem; }
.side-hoved p { color: var(--tekst-svag); margin: 0.25rem 0 0; }

/* Telefon: navigation som bundlinje. */
@media (max-width: 720px) {
  body { padding-bottom: 0; }
  .topbar-indre { height: 48px; }
  .nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    margin: 0;
    background: var(--flade);
    border-top: 1px solid var(--linje);
    padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom));
    justify-content: space-around;
    gap: 0;
    z-index: 10;
  }
  .nav a, .nav .nav-assistent { flex: 1 1 auto; align-items: center; justify-content: center; font-size: 0.75rem; padding: 0.55rem 0.15rem; white-space: nowrap; min-width: 0; }
  .indhold { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ---- Offentlige sider (login, opret, glemt): ét kort midt på siden ---- */
.offentlig {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  padding-top: calc(1.5rem + env(safe-area-inset-top));
}
.offentlig-kort {
  width: 100%;
  max-width: 400px;
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}
.offentlig-kort .logo { justify-content: center; margin-bottom: 1.25rem; }
.offentlig-kort h1 { font-size: 1.25rem; margin-bottom: 1rem; text-align: center; }
.offentlig-kort .links {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  font-size: 0.925rem;
}
.eller {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--tekst-svag);
  font-size: 0.85rem;
  margin: 1rem 0;
}
.eller::before, .eller::after { content: ''; flex: 1; height: 1px; background: var(--linje); }

/* ---- Bokse, kort, lister ---- */
.boks {
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.boks h2 { margin-bottom: 0.25rem; }
.boks > .hjaelp { margin-bottom: 1rem; }
.kort {
  background: var(--flade);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  box-shadow: var(--skygge-kort);
  padding: 0.75rem 0.875rem;
}
.raekke { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.raekke-mellem { justify-content: space-between; }
.svag { color: var(--tekst-svag); }
.lille { font-size: 0.875rem; }

.tom {
  background: var(--flade);
  border: 1px dashed var(--linje);
  border-radius: var(--radius);
  padding: 2.5rem 1.5rem;
  text-align: center;
  max-width: 560px;
  margin: 2rem auto;
}
.tom p { color: var(--tekst-svag); margin-bottom: 1rem; }

/* ---- Formularer ---- */
.formular { display: flex; flex-direction: column; gap: 1rem; }
.felt { display: flex; flex-direction: column; gap: 0.3rem; }
.felt label { font-weight: 500; font-size: 0.925rem; display: flex; align-items: center; gap: 0.35rem; }
/* Radioknapper og afkrydsningsfelter er ikke tekstfelter og må ikke arve reglen herunder.
   Med width: 100% og ramme voksede de ud af deres etiket i Safari på iPhone. */
.felt input[type="radio"], .felt input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  padding: 0;
  border: 0;
  background: none;
  accent-color: var(--accent);
}
.felt input:not([type="radio"]):not([type="checkbox"]), .felt select, .felt textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  background: var(--flade);
  color: var(--tekst);
  transition: border-color var(--overgang);
}
.felt input:not([type="radio"]):not([type="checkbox"]):focus, .felt select:focus, .felt textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.felt input::placeholder { color: var(--tekst-svag); }
.hjaelp { color: var(--tekst-svag); font-size: 0.85rem; margin: 0; }
.tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid var(--linje);
  color: var(--tekst-svag);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: help;
  user-select: none;
}
/* Hjælpen bag "?" foldes ud med et tryk (ui.js Hjaelp), så den også findes på en telefon uden hover. */
.tooltip[role="button"] { cursor: pointer; }
.tooltip[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.tooltip-tekst { display: block; color: var(--tekst-svag); font-size: 0.85rem; font-weight: 400; margin: 0.25rem 0 0.35rem; }
.valg { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.valg label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--linje);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 500;
  transition: border-color var(--overgang), background-color var(--overgang);
}
.valg label:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.valg input { margin: 0; }
/* Safari på iPhone regner knappens størrelse ud fra skriften; her sætter vi den selv. */
.valg label { min-height: 44px; }
.handlinger { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ---- Knapper ---- */
.knap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: var(--flade-2);
  color: var(--tekst);
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
.knap:disabled { opacity: 0.55; cursor: default; }
.knap-primaer { background: var(--accent); color: var(--accent-tekst); }
.knap-primaer:hover:not(:disabled) { background: rgba(var(--accent-rgb), 0.9); }
.knap-sekundaer { background: var(--flade); border-color: var(--linje); }
.knap-sekundaer:hover:not(:disabled) { background: var(--flade-2); }
.knap-fare { background: transparent; color: var(--fejl); }
.knap-fare:hover:not(:disabled) { background: var(--fejl-bg); }
.knap-bred { width: 100%; }

/* ---- Beskeder ---- */
.besked {
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius);
  font-size: 0.925rem;
  border: 1px solid transparent;
}
.besked-ok { background: var(--ok-bg); color: var(--ok); }
.besked-advar { background: var(--advar-bg); color: var(--advar); }
.besked-fejl { background: var(--fejl-bg); color: var(--fejl); }

.status-prik {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tekst-svag);
  margin-right: 0.4rem;
}
.status-prik.ok { background: var(--ok); }
.status-prik.advar { background: var(--advar); }

/* ---- Tavlen ---- */
.tavle {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.kolonne {
  background: var(--flade-2);
  border-radius: var(--radius);
  padding: 0.75rem;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kolonne h2 { font-size: 0.95rem; }
.kolonne .hjaelp { font-size: 0.8rem; }
@media (max-width: 720px) {
  .tavle { grid-template-columns: 1fr; overflow: visible; }
  .kolonne { min-height: 0; }
}

/* ---- Guide i trin ---- */
.trin { margin: 0.5rem 0 0; padding-left: 1.25rem; color: var(--tekst-svag); }
.trin li { margin-bottom: 0.25rem; }

/* ---- Låst side ---- */
.laast { max-width: 480px; margin: 3rem auto; text-align: center; }
.laast h1 { margin-bottom: 0.5rem; }
.laast p { color: var(--tekst-svag); margin-bottom: 1.25rem; }
.laast .links { margin-top: 1rem; font-size: 0.925rem; }

.indlaeser { color: var(--tekst-svag); padding: 2rem; text-align: center; }
.skjult-visuelt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- Afstande og trykfelter (rettelser efter kontrollen af trin 1) ---- */
.afstand-top { margin-top: 0.75rem; }
.afstand-bund { margin-bottom: 1rem; }
/* Linkene under formularerne er trykfelter på mindst 44 px, så tommelfingeren rammer. */
.offentlig-kort .links a { display: block; padding: 0.6rem; min-height: 44px; }
.sprogvalg { margin-bottom: 1rem; }
.sprogvalg .felt label:first-child { font-size: 0.85rem; color: var(--tekst-svag); }
.felt-med-knap { position: relative; }
.felt-med-knap input { padding-right: 3.75rem; }
.vis-knap {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
}
.vis-knap:hover { background: var(--accent-bg); }
/* Linjen uden net (afsnit 11.3): står øverst i indholdet, mens tavlen er skrivebeskyttet. */
.uden-net-linje { margin-bottom: 1rem; padding: 0.6rem 0.9rem; border-radius: var(--radius); background: var(--advar-bg); color: var(--advar); font-size: 0.9rem; }
.bemaerkning { margin-bottom: 1rem; }
.bemaerkning .link-knap { margin-left: 0.35rem; color: inherit; }
.hilsen p:first-child { font-size: 1.05rem; margin-bottom: 1rem; }
.hilsen h2 { margin-bottom: 0.35rem; }
.hilsen .formular { gap: 0.75rem; }
@media (max-width: 720px) {
  /* Syv punkter skal stå på én linje på en iPhone; 0,75 rem er den størrelse, de fylder ved. */
  .nav a, .nav .nav-assistent { font-size: 0.75rem; min-height: 44px; }
}

/* ---- Sammenfoldede afsnit i Opsætning ---- */
.fold { background: var(--flade); border: 1px solid var(--linje); border-radius: var(--radius); margin-bottom: 1rem; }
.fold > summary { cursor: pointer; padding: 0.9rem 1rem; font-weight: 600; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '›'; display: inline-block; width: 1rem; color: var(--tekst-svag); transition: transform var(--overgang); }
.fold[open] > summary::before { transform: rotate(90deg); }
.fold > summary .fold-linje { font-weight: 400; }
.fold > .boks, .fold > form.boks, .fold > div > .boks { border: none; border-radius: 0; margin-bottom: 0; box-shadow: none; }
.fold > .boks h2, .fold > form.boks h2 { display: none; }

/* ---- Samarbejde: dialogen "Send til kollega", linjen øverst på et sendt kort, mærket "fra Nikolaj", landingssiden ---- */
.send-dialog {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--flade-2);
  border: 1px solid var(--linje);
  border-radius: var(--radius);
}
.send-dialog .handlinger .knap { padding: 0.4rem 0.75rem; font-size: 0.9rem; }
.deling-linje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  background: var(--accent-bg);
  border-radius: var(--radius);
  font-size: 0.925rem;
}
.deling-linje .knap { padding: 0.3rem 0.65rem; font-size: 0.85rem; }
.maerke-fra { background: var(--accent-bg); color: var(--accent); }
.invitation-fra { text-align: center; font-size: 1.05rem; margin: 0 0 0.5rem; }

/* ---- Konto: abonnement, sletning af konto og siden Hvad sker der med mine data? ---- */
.slet-konto { border-top: 1px solid var(--linje); margin-top: 1.25rem; padding-top: 1rem; }
.data-side ul { margin: 0 0 0.25rem; padding-left: 1.25rem; }
.data-side li { margin-bottom: 0.4rem; }
.data-side .boks p:last-child { margin-bottom: 0; }
.laast .handlinger { justify-content: center; }
.laast .besked { text-align: left; margin-bottom: 1rem; }

/* ---- Introguiden på I dag, morgenmøde-tilbuddet og hjælpesiden ---- */
.guide-omraade { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.guide-omraade:empty { display: none; }
.guide-hoved { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.guide-hoved h2 { margin-bottom: 0.15rem; }
.guide-hoved-hoejre { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; white-space: nowrap; }
.guide-fremdrift { font-weight: 600; font-size: 0.925rem; color: var(--accent); }
.guide-trin { list-style: none; counter-reset: guide; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.guide-trin > li { counter-increment: guide; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid transparent; }
.guide-trin > li.guide-trin-aktivt { border-color: var(--linje); background: var(--flade); }
.guide-trin-linje { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.guide-trin-linje::before { content: counter(guide) '.'; font-weight: 600; min-width: 1.25rem; color: var(--tekst-svag); }
.guide-trin-aktivt .guide-trin-linje::before { color: var(--accent); }
.guide-trin-titel { font-weight: 500; }
.guide-trin-faerdig .guide-trin-titel, .guide-trin-senere .guide-trin-titel { color: var(--tekst-svag); }
.guide-trin-faerdig .guide-trin-titel { text-decoration: line-through; text-decoration-color: var(--linje); }
.guide-maerke { font-size: 0.8rem; color: var(--tekst-svag); border: 1px solid var(--linje); border-radius: 999px; padding: 0 0.5rem; }
.guide-maerke-faerdig { color: var(--ok); border-color: var(--ok); }
.guide-trin-indhold { margin: 0.5rem 0 0.25rem 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.guide-trin-indhold > .hjaelp { margin: 0; }
.guide-formular { gap: 0.75rem; }
.guide-fod { margin-top: 0.75rem; }
.guide-lukket { margin: 0; }
.moede-tilbud p { margin-bottom: 0.75rem; }
.moede-tilbud .hjaelp { display: block; margin-top: 0.25rem; }
.hjaelp-side { display: flex; flex-direction: column; gap: 1rem; }
.hjaelp-side h3 { margin: 1rem 0 0.25rem; font-size: 1rem; }
.hjaelp-ord { margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.6rem; }
.hjaelp-ord-raekke dt { font-weight: 600; }
.hjaelp-ord-raekke dd { margin: 0.1rem 0 0; color: var(--tekst-svag); }
.hjaelp-liste { margin: 0.75rem 0 0; padding-left: 1.25rem; color: var(--tekst-svag); }
.hjaelp-liste li { margin-bottom: 0.35rem; }
@media (max-width: 720px) {
  .guide-hoved { flex-direction: column; gap: 0.5rem; }
  .guide-hoved-hoejre { flex-direction: row; align-items: center; gap: 0.75rem; }
  .guide-trin-indhold { margin-left: 0; }
}

/* --- morgenmødets tjekliste i panelet (én linje pr. opgave, fire valg, ét Send svar) --- */
.samtale-tjekliste ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.samtale-tjekliste li { padding: 0.5rem 0; border-top: 1px solid var(--kant, #e5e5e5); }
.samtale-tjekliste li:first-child { border-top: 0; }
.samtale-tjekliste-titel { margin: 0; font-weight: 600; }
.samtale-tjekliste-hjaelp { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--tekst-svag); }
.samtale-tjekliste-valg .knap[aria-pressed="true"] { color: var(--accent); background: var(--accent-bg); border-color: var(--accent); }
.samtale-tjekliste-mangler { align-self: center; }

/* ---- Prioritering (afsnit 7): kvadrant-mærket, frøen, fokus-uret i toppen og sektionen i Opsætning ---- */
/* Mærket på kortet har samme farve som ringen om kortet og som feltet i
   matricen: ét mærke, én farve, tre steder. Farverne står i tokens.css.
   To klasser i vælgeren, fordi .maerke selv står i tavle.css, som indlæses efter
   denne fil: med kun én klasse vandt den blå .maerke, og alle fire mærker så ens
   ud, uanset hvilken kvadrant kortet lå i. */
.maerke.maerke-kvadrant-goer_nu { background: rgba(var(--kv-goer_nu-rgb), var(--kv-flade)); color: rgb(var(--kv-goer_nu-rgb)); }
.maerke.maerke-kvadrant-planlaeg { background: rgba(var(--kv-planlaeg-rgb), var(--kv-flade)); color: rgb(var(--kv-planlaeg-rgb)); }
.maerke.maerke-kvadrant-giv_videre { background: rgba(var(--kv-giv_videre-rgb), var(--kv-flade)); color: rgb(var(--kv-giv_videre-rgb)); }
.maerke.maerke-kvadrant-overvej_at_lukke { background: rgba(var(--kv-overvej_at_lukke-rgb), var(--kv-flade)); color: rgb(var(--kv-overvej_at_lukke-rgb)); }
/* Frøen på selve kortet er et foto og ligger oven på kortets overkant (tavle.css).
   Her er kun det lille billede i linjen inde i kortpanelet. */
.froe { width: 30px; height: 23px; flex: 0 0 auto; object-fit: contain; }
.maerke-froe { display: inline-flex; align-items: center; gap: 0.3rem; }
.froe-linje { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.75rem; color: var(--ok); font-weight: 500; }
.kvadrant-begrundelse { margin: 0.25rem 0 0; font-size: 0.875rem; color: var(--tekst-svag); }
/* Uret i topbaren har en fast største bredde, så søgefeltet og navigationen beholder deres plads. */
.pomodoro-ur {
  display: flex;
  flex: 0 0 auto;
  max-width: 260px;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--linje);
  border-radius: 999px;
  background: var(--accent-bg);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.pomodoro-ur.pomodoro-pause { background: var(--ok-bg); color: var(--ok); }
.pomodoro-ur-titel { max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.pomodoro-ur .link-knap { color: inherit; }
.pomodoro-boks { border-top: 1px solid var(--linje); padding-top: 0.75rem; margin-top: 0.75rem; }
.pomodoro-boks .trin { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.prioritering-kontakt { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--linje); }
.prioritering-kontakt:first-of-type { border-top: 0; }
.prioritering-kontakt input { margin: 0.3rem 0 0; width: auto; }
.prioritering-kontakt label { font-weight: 500; cursor: pointer; }
.prioritering-kontakt .hjaelp { margin: 0; }
@media (max-width: 1000px) {
  .pomodoro-ur-titel { display: none; }
}