/* ==========================================================================
   handstaubsaugerprofi.de – Design (angelehnt an das alte WordPress-Theme)
   Keine externen Schriften: Verdana & Co. sind auf allen Systemen vorhanden.
   ========================================================================== */

:root {
    --gruen: #669900;
    --gruen-dunkel: #4d7300;
    --gruen-0: #f7faf2;
    --gruen-1: #e1ecce;
    --gruen-2: #d1e0b2;
    --gruen-3: #a3c266;
    --rot: #8f3b20;
    --text: #222;
    --text-hell: #666;
    --rahmen: #ccc;
    --hintergrund: #ccc;
}

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

html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--text);
    font-family: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; border: 0; }
a { color: var(--gruen); }
a:hover, a:focus { color: var(--gruen-dunkel); }
:focus-visible { outline: 2px solid var(--gruen); outline-offset: 2px; }

h1, h2, h3, h4 {
    font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;
    color: #333;
    font-weight: bold;
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin: 1.2em 0 0.4em;
}
h1 { font-size: 1.35rem; margin-top: 0; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
h4 { font-size: 0.9rem; }
p { margin: 0 0 1em; }

.mygreen { color: var(--gruen); }
.ared { color: var(--rot); }

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: #fff; padding: 8px 12px; z-index: 10;
}
.skip-link:focus { left: 8px; }

/* --------------------------------------------------------------------------
   Seitengerüst
   -------------------------------------------------------------------------- */
#wrap {
    background: #fff;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 32px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#header { padding-top: 16px; }
#header .logo { display: inline-block; margin-bottom: 14px; }
#header .logo img { display: block; }

#stirn {
    background: var(--gruen-1);
    border-bottom: 1px solid var(--gruen);
}
#stirn ul {
    list-style: none;
    margin: 0;
    padding: 4px 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
}
#stirn li {
    padding-left: 20px;
    background-repeat: no-repeat;
    background-position: left center;
}
#stirn a {
    display: inline-block;
    padding: 4px 0;
    color: #333;
}
#stirn a[aria-current="page"] { color: #000; font-weight: bold; text-decoration: none; }
.li_start        { background-image: url("/files/start-icon.gif"); }
.li_modelle      { background-image: url("/files/handstaubsauger-icon.gif"); }
.li_testberichte { background-image: url("/files/test-icon.gif"); }
.li_ratgeber     { background-image: url("/files/ratgeber-icon.gif"); }

#breadcrumbs {
    padding: 6px 0;
    color: var(--text-hell);
    font-size: 0.8rem;
}
#breadcrumbs a { color: var(--text-hell); }

#seite {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    padding: 24px 0 32px;
}
#home #seite { padding-top: 28px; }
#breadcrumbs + #seite { padding-top: 12px; }

/* --------------------------------------------------------------------------
   Inhalt
   -------------------------------------------------------------------------- */
#inhalt { min-width: 0; }

/* Artikel stehen wie früher in einem Kasten */
#inhalt.artikel {
    border: 1px solid var(--rahmen);
    padding: 24px 28px 8px;
    align-self: start;
}
#inhalt.artikel > .neue-artikel { margin: 32px -28px 0; border-width: 1px 0 0; }

.box {
    border: 1px solid var(--rahmen);
    padding: 20px 24px 8px;
    margin-bottom: 30px;
}
.box > h2:first-child { margin-top: 0; }
.weiter { margin-top: -0.4em; }

/* Bilder im Text */
.alignleft  { float: left;  margin: 4px 22px 10px 0; }
.alignright { float: right; margin: 4px 0 10px 22px; }
.aligncenter { display: block; margin: 0 auto 1em; }
.rechts { float: right; margin: 0 0 4px 12px; }
.links  { float: left;  margin: 0 12px 4px 0; }

figure.wp-caption { margin: 0 0 1.2em; max-width: 100%; }
figure.wp-caption img { display: block; }
figure.wp-caption figcaption, .wp-caption-text {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--text-hell);
    padding-top: 4px;
}

/* Videos (lokal, kein YouTube) */
.video { margin: 12px 0 20px; }
.video video {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
    aspect-ratio: 16 / 9;
    background: #000;
}

/* Tabellen */
.tabelle { overflow-x: auto; margin: 0 0 1.2em; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; }
.datatable { font-size: 0.8rem; min-width: 560px; width: 100%; }
.datatable th, .datatable td { border: 1px solid #999; padding: 4px 6px; vertical-align: top; }
.datatable th, .bggreen { background: var(--gruen); color: #fff; }

/* Amazon-Textlinks */
.produkt-hinweis { clear: both; margin: 1.2em 0 1.6em; }
.produkt-hinweis .button { margin: 0 8px 8px 0; }
.produkt-hinweis small { display: block; color: var(--text-hell); font-size: 0.72rem; line-height: 1.4; }
.button {
    display: inline-block;
    background: var(--gruen);
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 4px;
}
.button::after { content: " ›"; }
.button:hover, .button:focus { background: var(--gruen-dunkel); color: #fff; }

/* Startseite: Begrüßung mit drei Kästen */
.intro { border: 1px solid var(--rahmen); margin-bottom: 30px; }
.intro-text { padding: 24px 24px 4px; overflow: hidden; }
.intro-text h1 { font-size: 1.15rem; margin: 12px 0 0.2em; }
.intro-text h2 { margin-top: 0; font-size: 1.05rem; }
.intro-bild { float: right; margin: 0 0 0 20px; }
.intro-boxen { display: grid; grid-template-columns: repeat(3, 1fr); }
.intro-boxen p {
    margin: 0;
    padding: 18px 20px;
    font-size: 0.78rem;
    line-height: 1.45;
    overflow: hidden;
}
.bggreen0 { background: var(--gruen-0); }
.bggreen1 { background: var(--gruen-1); }
.bggreen2 { background: var(--gruen-2); }
.bggreen3 { background: var(--gruen-3); color: #fff; }
.bggreen a, .bggreen0 a, .bggreen1 a, .bggreen2 a { color: #000; }
.bggreen3 a { color: #fff; }

/* Listen: Kategorien und Themen */
.teaser {
    border: 1px solid var(--rahmen);
    padding: 16px 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.teaser h2 { margin: 0 0 8px; font-size: 1rem; }
.teaser h2 a { color: #333; }
.teaser p { margin: 0; }
.teaser-bild { float: left; margin: 0 16px 4px 0; }
.teaser-bild img { display: block; }

/* "Die neusten Artikel" */
.neue-artikel { font-size: 0.8rem; line-height: 1.45; }
.neue-artikel h2 { font-size: 1rem; }
.kompakt { list-style: none; margin: 0; padding: 0; }
.kompakt li { padding: 8px 0; overflow: hidden; }
.kompakt a { display: block; font-weight: bold; }
.kompakt img { float: left; margin: 2px 12px 4px 0; }

/* --------------------------------------------------------------------------
   Seitenleiste
   -------------------------------------------------------------------------- */
#navigation { font-size: 0.85rem; }
#navigation a { color: #333; }
#navigation .banner { display: block; margin-bottom: 18px; line-height: 0; }
#navigation .banner img { display: block; margin: 0 auto; }
.table_wrap { max-width: 300px; margin: 0 auto 22px; }
.table_wrap h2 {
    margin: 0;
    padding: 4px 9px;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}
#navigation .table_wrap h2 a { color: #fff; }
.table_wrap > p { margin: 0; padding: 5px 6px 5px 9px; overflow: hidden; }
.make_font_s { font-size: 0.75rem; line-height: 1.35; }
.marken {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.marken li { padding: 4px 9px; background: var(--gruen-1); }
.marken li:nth-child(4n+3), .marken li:nth-child(4n+4) { background: var(--gruen-0); }
.mehr ul { list-style: none; margin: 0; padding: 0; background: var(--gruen-0); }
.mehr li { padding: 5px 9px; border-bottom: 1px solid #fff; font-size: 0.8rem; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Fußzeile
   -------------------------------------------------------------------------- */
#footer {
    margin: 0 -32px;
    padding: 8px 32px;
    background: #999;
    color: #f5f5f5;
    font-size: 0.8rem;
}
#footer p { margin: 0; }
#footer a { color: #f5f5f5; }
#footer .affiliate { font-size: 0.72rem; opacity: 0.9; }

/* --------------------------------------------------------------------------
   Tablet und Handy
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    #wrap { padding: 0 20px; }
    #footer { margin: 0 -20px; padding: 10px 20px; }
    #seite { grid-template-columns: 1fr; gap: 24px; }
    #navigation {
        border-top: 1px solid var(--rahmen);
        padding-top: 24px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 0 24px;
        align-items: start;
        justify-items: center;
    }
    .table_wrap { width: 100%; }
}

@media (max-width: 600px) {
    body { font-size: 0.9375rem; }
    #wrap { padding: 0 12px; }
    #footer { margin: 0 -12px; padding: 12px; }
    #header { padding-top: 12px; }
    #header .logo { margin-bottom: 10px; }

    /* Menü als gut tippbare Schaltflächen */
    #stirn { background: none; border: 0; }
    #stirn ul { padding: 0; gap: 6px; }
    #stirn li {
        flex: 1 1 calc(50% - 6px);
        display: flex;
        align-items: center;
        background-color: var(--gruen-1);
        background-position: 8px center;
        border-bottom: 2px solid var(--gruen);
        padding-left: 30px;
        border-radius: 3px;
    }
    #stirn a { display: block; width: 100%; padding: 9px 6px 9px 0; text-decoration: none; font-size: 0.85rem; line-height: 1.3; }
    #stirn a[aria-current="page"] { text-decoration: underline; }

    #inhalt.artikel { border: 0; padding: 0; }
    #inhalt.artikel > .neue-artikel { margin: 28px 0 0; border-width: 1px; }
    .box { padding: 16px 14px 4px; }
    h1 { font-size: 1.2rem; }

    /* Bilder nicht mehr umfließen lassen, wenn es zu eng wird */
    .alignleft, .alignright { float: none; display: block; margin: 0 auto 1em; }
    .intro-text { padding: 16px 14px 0; }
    .intro-bild { width: 110px; margin-left: 12px; }
    .intro-boxen { grid-template-columns: 1fr; }
    .intro-boxen p { padding: 12px 14px; font-size: 0.85rem; }

    .teaser { padding: 12px 14px; }
    .teaser-bild img { width: 72px; height: 72px; }
    .produkt-hinweis .button { display: block; text-align: center; margin-right: 0; }
    #navigation { grid-template-columns: 1fr; }
}

@media print {
    body, #wrap { background: #fff; }
    #stirn, #navigation, #breadcrumbs, .produkt-hinweis, .skip-link { display: none; }
    #seite { display: block; }
    #inhalt.artikel { border: 0; padding: 0; }
}