body { margin: 0; font: 16px/1.6 Roboto, Arial, sans-serif; color: #222626; background: #f5f5f5; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
header { background: #00488a; color: #fff; padding: 14px 0; margin-bottom: 30px; }
.marke { font-weight: 700; font-size: 20px; } .sub { opacity: .85; margin-left: 8px; }
h1 { color: #00488a; font-weight: 400; font-size: 30px; line-height: 1.2; } h2 { color: #00488a; font-size: 20px; margin-top: 36px; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 24px 0; }
.karte { background: #fff; padding: 18px; text-decoration: none; color: #222626; border-left: 4px solid #00488a; box-shadow: 0 2px 4px rgba(0,0,0,.08); display: flex; flex-direction: column; gap: 4px; }
.karte:hover { background: #eef2f6; } .karte span { font-size: 12px; color: #6b7280; word-break: break-all; }
code { background: #fff; padding: 1px 5px; border: 1px solid #e5e7eb; border-radius: 3px; font-size: 13px; } .umbruch { word-break: break-all; }
textarea { width: 100%; height: 260px; font: 12px/1.4 Consolas, monospace; padding: 10px; border: 1px solid #939595; border-radius: 3px; box-sizing: border-box; background: #fff; }
.kopieren { background: #00488a; color: #fff; border: 0; padding: 10px 18px; border-radius: 3px; font-weight: 700; cursor: pointer; margin-bottom: 8px; }
.kopieren:hover { background: #003566; } .klein { font-size: 14px; } a { color: #00488a; } li { margin-bottom: 8px; }
footer { color: #6b7280; font-size: 13px; padding: 40px 16px; }