/* tools.herrdorok.de – nur was es hier gibt. Grundlage: herrdorok-basis.css (vorher laden). */

body { display: flex; flex-direction: column; min-height: 100dvh; }
main.seite { flex: 1; width: 100%; padding-top: 32px; }
h1 { font-family: var(--titel); font-weight: 600; font-size: clamp(1.8rem, 4.5vw, 2.5rem); line-height: 1.15; margin: 0 0 10px; }
.lead { margin: 0 0 26px; max-width: 46rem; color: var(--text-2); }

/* Die fünf Werkzeuge: große Kacheln */
.werkzeuge-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.werkzeuge-liste li { display: flex; }
.werkzeug { flex: 1; display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto 1fr; gap: 0 16px; padding: 20px;
  background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten-klein); color: inherit; text-decoration: none;
  transition: transform .15s, box-shadow .15s; }
.werkzeug:hover { transform: translateY(-2px); box-shadow: var(--schatten); }
.werkzeug:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.werkzeug img { grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 14px; }
.w-name { font-family: var(--titel); font-weight: 600; font-size: 1.35rem; line-height: 1.2; }
.w-adresse { color: var(--akzent); font-size: .85rem; font-weight: 700; overflow-wrap: anywhere; }
.w-text { color: var(--text-2); font-size: .95rem; line-height: 1.45; margin-top: 6px; }
@media (max-width: 420px) {
  .werkzeug { grid-template-columns: 44px 1fr; gap: 0 12px; padding: 16px; }
  .werkzeug img { width: 44px; height: 44px; border-radius: 11px; }
}

/* Abgesetzt: die übrigen Seiten, kleiner und ruhiger */
.weiteres { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linie); }
.weiteres h2 { font-family: var(--titel); font-weight: 600; font-size: 1.1rem; color: var(--text-2); margin: 0 0 12px; }
.weiteres ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px 16px; }
.weiteres a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; color: inherit; text-decoration: none; }
.weiteres a:hover, .weiteres a:focus-visible { background: var(--flaeche); box-shadow: var(--schatten-klein); outline: none; }
.weiteres img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.weiteres b { display: block; font-weight: 700; }
.weiteres small { display: block; color: var(--text-3); font-size: .85rem; line-height: 1.3; }

/* Datenschutz */
.text-seite h2 { font-family: var(--titel); font-weight: 600; font-size: 1.2rem; margin: 26px 0 6px; }
.text-seite p { color: var(--text-2); max-width: 46rem; }