/* Technische Aspekte und Fehler im Local SEO: Kategorien umschalten, Beispiele richtig/falsch, Pro-Tipp */
.container{width:100%;max-width:100%;margin:0;padding:0}

/* Äußere Karte ohne Rahmen, der Beitrag rahmt das Widget bereits */
.container>.card{background:none;border:0;padding:0}
.container>.card>.card-header{margin:0 0 16px}
.container>.card>.card-header>.card-title{font-size:19px;margin:0}
.container>.card>.card-content{padding:0;container-type:inline-size}

/* Kategorien als Umschalter */
.button-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 16px}
.category-button{display:flex;align-items:center;justify-content:center;min-width:0;width:100%;margin:0;padding:10px 8px;background:#fff;color:var(--gray);border:1px solid var(--line);border-radius:var(--r);font-size:13.5px;font-weight:500;line-height:1.3;text-align:center;transition:border-color .15s,color .15s,box-shadow .15s}
.category-button:hover{background:#fff}
@media (hover:hover){.category-button:hover{color:var(--ink);border-color:var(--ink)}}
.category-button.active{background:#fff;color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.category-icon{display:none}

/* Beispiele: richtig und falsch */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.grid>.card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.grid .card-header{margin:0 0 14px}
.grid .card-title{display:flex;align-items:center;font-size:15.5px;margin:0}
.grid .card-content{padding:0}

/* Status-Zeichen als gezeichnete Symbole statt Schriftzeichen */
.grid .card-title>span,.list-item .icon{position:relative;flex:none;font-size:0;line-height:0;color:var(--ink)}
.grid .card-title>span{width:22px;height:22px;border-radius:50%;border:1px solid}
.good .card-title>span{background:var(--ok-bg);border-color:var(--ok-line)}
.bad .card-title>span{background:var(--bad-bg);border-color:var(--bad-line)}
.list-item .icon{width:16px;height:16px;margin-top:2px;color:var(--gray)}
.grid .card-title>span::before,.grid .card-title>span::after,.list-item .icon::before,.list-item .icon::after{content:"";position:absolute;left:50%;top:50%}
.good .card-title>span::before,.list-item .icon.green::before{width:4.5px;height:8.5px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translate(-50%,-62%) rotate(45deg)}
.bad .card-title>span::before,.bad .card-title>span::after,.list-item .icon.red::before,.list-item .icon.red::after{width:9px;height:1.5px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.bad .card-title>span::after,.list-item .icon.red::after{transform:translate(-50%,-50%) rotate(-45deg)}
.list-item .icon.red::before,.list-item .icon.red::after{width:8.5px}

/* Codebeispiel: bricht um statt seitlich zu scrollen */
.code-block{margin:0;padding:12px;font-size:11.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}

.grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.list-item{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14.5px;line-height:1.45}

/* Codebeispiele nur nebeneinander, wenn die Zeilen ungebrochen passen */
@container (max-width:653px){.grid:has(.code-block){grid-template-columns:minmax(0,1fr)}}

/* Pro-Tipp */
.alert{margin-top:16px;background:var(--ok-bg);border:1px solid var(--ok-line);border-radius:12px;padding:16px;font-size:14.5px}
.alert strong{font-weight:600}

@media (max-width:560px){
  .button-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid>.card{padding:16px}
  .code-block{padding:12px 10px}
}
@media (max-width:350px){.code-block{font-size:10.5px}}