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

html, body {
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background: #F6F5F2;
  color: #22201C;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* --- Farbpalette --- */

.farbe-violett { background: #EEEDFE; color: #3C3489; }
.farbe-koralle { background: #FAECE7; color: #712B13; }
.farbe-teal    { background: #E1F5EE; color: #085041; }
.farbe-blau    { background: #E6F1FB; color: #0C447C; }
.farbe-pink    { background: #FBEAF0; color: #72243E; }
.farbe-amber   { background: #FAEEDA; color: #633806; }
.farbe-grau    { background: #F1EFE8; color: #444441; }

/* --- Icons (Lucide-Sprite via <use>) --- */

.kachel-icon, .icon-option-svg, .loesch-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kachel-icon { width: 20px; height: 20px; }
.icon-option-svg { width: 22px; height: 22px; }
.loesch-icon { width: 16px; height: 16px; color: #71716B; }

/* --- Kopfzeile --- */

.kopfzeile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
}

.kopf-spacer {
  flex: 1;
  min-width: 44px;
}

.titel {
  flex: 2;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  overflow-wrap: anywhere;
}

.zurueck-link {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  padding: 10px 0;
}

.bearbeiten-schalter {
  flex: 1;
  background: #fff;
  border: 0.5px solid #DDDBD3;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  min-height: 44px;
}

.bearbeiten-schalter[aria-pressed="true"] {
  background: #22201C;
  color: #fff;
  border-color: #22201C;
}

/* --- Fehlermeldungen --- */

.fehler-meldung {
  background: #FBEAF0;
  color: #72243E;
  border: 1px solid #F0C9D9;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.fehler-seite {
  margin: 0 16px 16px 16px;
}

/* --- Kachel-Grid --- */

.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 0 16px 24px 16px;
}

.kachel {
  position: relative;
  background: #fff;
  border: 0.5px solid #DDDBD3;
  border-radius: 12px;
  padding: 16px;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-wrap: anywhere;
}

.kachel-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kachel-titel {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.kachel-beschreibung {
  font-size: 13px;
  line-height: 1.5;
  color: #71716B;
}

/* --- Löschen (nur im Bearbeiten-Modus sichtbar) --- */

.kachel-loeschen {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}

.kachel-grid.bearbeiten-modus .kachel-loeschen {
  display: flex;
}

.loesch-kreis {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #DDDBD3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Kachel „Link hinzufügen" --- */

.kachel-hinzufuegen {
  border: 1.5px dashed #C7C4B8;
  align-items: flex-start;
  justify-content: center;
}

.kachel-plus-box {
  background: #EDEBE3;
  color: #71716B;
}

/* --- Login --- */

.login-wrap {
  max-width: 360px;
  margin: 0 auto;
  padding: 48px 20px;
}

.login-form {
  background: #fff;
  border: 0.5px solid #DDDBD3;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Formulare (Login + Link hinzufügen) --- */

label {
  font-size: 14px;
  font-weight: 500;
  margin-top: 8px;
}

input[type="text"],
input[type="url"],
input[type="password"] {
  min-height: 44px;
  font-size: 16px;
  border: 0.5px solid #DDDBD3;
  border-radius: 10px;
  padding: 0 14px;
  width: 100%;
  background: #fff;
  color: #22201C;
}

input:focus {
  outline: 2px solid #0C447C;
  outline-offset: 1px;
}

.link-form {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 16px 32px 16px;
  display: flex;
  flex-direction: column;
}

button.absenden {
  margin-top: 20px;
  min-height: 44px;
  background: #22201C;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
}

.login-form button[type="submit"] {
  min-height: 44px;
  background: #22201C;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  margin-top: 8px;
}

/* --- Icon-Auswahl --- */

.icon-auswahl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.icon-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.icon-option-box {
  min-height: 44px;
  border: 0.5px solid #DDDBD3;
  border-radius: 10px;
  background: #fff;
  color: #444441;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-option input:checked + .icon-option-box {
  border: 2px solid #22201C;
  background: #EDEBE3;
}

.icon-option input:focus-visible + .icon-option-box {
  outline: 2px solid #0C447C;
}

/* --- Farb-Auswahl --- */

.farb-auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.farb-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.farb-kreis {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
  border: 2px solid transparent;
}

.farb-option input:checked + .farb-kreis {
  border-color: #22201C;
}

.farb-option input:focus-visible + .farb-kreis {
  outline: 2px solid #0C447C;
  outline-offset: 2px;
}

/* --- Desktop --- */

@media (min-width: 640px) {
  .kopfzeile {
    padding: 24px 32px;
  }
  .kachel-grid {
    padding: 0 32px 32px 32px;
  }
}