/* =====================================================================
   STEFANO FANELLO · THEMEN-UNTERSEITEN
   /keramik-pokerchips/  /pokerchips-mit-logo/  /pokerchips-verschenken/

   Gleiche Gestaltung wie Startseite und Rechtstexte:
   - Header, Footer, Schriftgrößen  → rahmen.css
   - Schriften, Farben, Überschriften → style.css
   - hier nur die Bausteine dieser Seiten
   Keine festen Schriftgrößen, nur die Variablen --fs-… aus rahmen.css.
   ===================================================================== */

main.seo {
         display: block;
         padding: 70px 20px 260px 20px;   /* unten Platz für die Kugel über dem Footer */
         box-sizing: border-box;
}

main.seo * {
         box-sizing: border-box;
}

main.seo .inhalt {
         max-width: 860px;
         margin: 0 auto;
         font-size: var(--fs-p);
         line-height: 1.9;
}

main.seo img {
         max-width: 100%;
         height: auto;
         display: block;
}


/* ---------- Brotkrumen ---------- */
main.seo .pfad {
         text-align: center;
         font-size: var(--fs-small);
         letter-spacing: 1px;
         text-transform: uppercase;
         color: var(--neroverylight);
         margin: 0 0 30px 0;
}

main.seo .pfad a {
         color: var(--neroverylight);
         text-decoration: none;
}

/* ---------- Kopfbereich (wie div.intro der Startseite) ---------- */
main.seo .held {
         max-width: 640px;
         margin: 0 auto 40px auto;
         text-align: center;
}

main.seo .dachzeile {
         display: block;
         text-transform: uppercase;
         font-size: var(--fs-small);
         font-weight: bold;
         letter-spacing: 1px;
         color: var(--bordeaux);
         margin: 0 0 6px 0;
}

main.seo h1,
main.seo h2,
main.seo h3 {
         font-family: "Concrette";
         font-weight: 900;
         color: var(--nerolight);
}

main.seo h1 {
         font-size: var(--fs-h1);
         line-height: 1.05;
         margin: 0 0 24px 0;
         text-shadow:
                  1.5px 1.5px 0px var(--avoriolight),
                  3px 3px 0px var(--oro);
}

main.seo h2 {
         font-size: var(--fs-h2);
         line-height: 1.1;
         margin: 0 0 18px 0;
         text-align: center;
         text-shadow:
                  1.5px 1.5px 0px var(--avoriolight),
                  3px 3px 0px var(--oro);
}

main.seo h3 {
         font-size: var(--fs-h3);
         line-height: 1.1;
         margin: 0 0 10px 0;
         text-shadow:
                  1px 1px 0px var(--avoriolight),
                  2px 2px 0px var(--oro);
}

main.seo .einleitung {
         margin: 0;
}

/* ---------- Abschnitte ---------- */
main.seo section {
         padding: 50px 0;
}

main.seo section > p,
main.seo section > .liste {
         max-width: 640px;
         margin-left: auto;
         margin-right: auto;
}

main.seo p {
         margin: 0 0 16px 0;
}

main.seo .leise {
         color: var(--neroverylight);
         font-size: var(--fs-small);
         text-align: center;
}

main.seo .liste {
         padding-left: 22px;
         margin-bottom: 16px;
}

main.seo .liste li {
         margin-bottom: 6px;
}

/* ---------- Buttons (wie .button der Startseite) ---------- */
main.seo .knopfreihe {
         display: flex;
         flex-wrap: wrap;
         gap: 16px;
         align-items: center;
         justify-content: center;
         margin-top: 26px;
}

main.seo .knopf {
         background: var(--verde);
         color: var(--avoriolight);
         font-family: "Concrette";
         font-weight: 900;
         font-size: var(--fs-button);
         line-height: 28px;      /* Maße wie .button der Startseite */
         text-align: center;
         border-radius: 30px;
         text-decoration: none;
         padding: 15px 30px;
         display: inline-block;
         position: relative;
         box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.25);
         text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
         transition: background 0.25s;
}

main.seo .knopf:after {
         box-sizing: content-box;   /* wie auf der Startseite: Ring rundum 4px Abstand */
         position: absolute;
         top: 4px;
         left: 4px;
         width: calc(100% - 12px);
         height: calc(100% - 12px);
         border: 2px solid var(--avoriolight);
         border-radius: 25px;
         content: " ";
}

main.seo .knopf:hover {
         background: var(--verdelight);
         color: var(--avoriolight);
}

/* zweiter Button: gleiche Form, helle Fläche */
main.seo .knopf.knopf-rahmen {
         background: var(--avorio);
         color: var(--verde);
         text-shadow: none;
}

main.seo .knopf.knopf-rahmen:after {
         border-color: var(--verde);
}

main.seo .knopf.knopf-rahmen:hover {
         background: #e9dcc0;
}

/* ---------- Karten (wie die Leistungs-Kacheln) ---------- */
main.seo .raster {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
         gap: 16px;
         margin-top: 26px;
}

main.seo .karte {
         background: var(--avorio);
         border-radius: 20px;
         padding: 26px 24px;
         text-align: center;
}

main.seo .karte h3 {
         margin-bottom: 10px;
}

main.seo .karte p {
         margin: 0;
}

/* ---------- Preise (wie die Preiskarten der Startseite) ---------- */
main.seo .preise {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
         gap: 16px;
         margin: 26px 0;
}

main.seo .karte.preis {
         background: var(--oro);
         color: var(--nero);
         border-radius: 10px;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
}

main.seo .preis h3 {
         text-shadow:
                  1px 1px 0px var(--oro),
                  2px 2px 0px var(--avorio);
}

main.seo .preis .betrag {
         font-family: "Concrette";
         font-weight: 900;
         font-size: var(--fs-h2);
         line-height: 1;
         margin: 8px 0 6px 0;
         text-shadow:
                  1.5px 1.5px 0px var(--oro),
                  3px 3px 0px var(--avorio);
}

main.seo .preis .menge {
         font-size: var(--fs-p);
}

main.seo .preis .zusatz {
         font-size: var(--fs-small);
         margin-top: 4px;
}

main.seo .preis .knopf {
         margin-top: 16px;
}

/* ---------- Bild ---------- */
main.seo .bild {
         border-radius: 20px;
         overflow: hidden;
         margin: 26px 0 8px 0;
}

/* ---------- Tabelle (wie in den Rechtstexten) ---------- */
main.seo .tabelle-huelle {
         overflow-x: auto;
         margin: 26px 0;
}

main.seo table {
         width: 100%;
         min-width: 520px;
         border-collapse: collapse;
         background: #fff;
         border-radius: 14px;
         overflow: hidden;
         font-size: var(--fs-p);
         line-height: 1.5;
}

main.seo th,
main.seo td {
         text-align: left;
         padding: 12px 16px;
         border-bottom: 1px solid var(--avorio);
         vertical-align: top;
}

main.seo th {
         font-size: var(--fs-small);
         letter-spacing: 1px;
         text-transform: uppercase;
         background: var(--avorio);
}

main.seo td:first-child {
         font-weight: bold;
         white-space: nowrap;
}

main.seo tr:last-child td {
         border-bottom: 0;
}

/* ---------- Zitat (wie im Kundenprojekt) ---------- */
main.seo .zitat {
         max-width: 640px;
         margin: 26px auto;
         padding: 24px 28px;
         background: var(--avorio);
         border-radius: 20px;
         font-family: "Concrette";
         font-weight: 900;
         font-size: var(--fs-h4);
         line-height: 1.4;
         text-align: center;
}

main.seo .zitat cite {
         display: block;
         margin-top: 10px;
         font-family: "Lato";
         font-weight: normal;
         font-style: normal;
         font-size: var(--fs-small);
         text-transform: uppercase;
         letter-spacing: 1px;
         color: var(--bordeaux);
}

/* ---------- FAQ (wie auf der Startseite) ---------- */
main.seo details {
         max-width: 640px;
         margin: 0 auto;
         border-bottom: 1px solid var(--oro);
         padding: 16px 0;
}

main.seo summary {
         font-family: "Concrette";
         font-weight: 600;
         cursor: pointer;
}

main.seo details p {
         margin: 12px 0 0 0;
}

/* ---------- Abschluss ---------- */
main.seo .abschluss {
         text-align: center;
}

/* ---------- Weitere Themen-Seiten ---------- */
main.seo .mehr {
         max-width: 640px;
         margin: 30px auto 0 auto;
         text-align: center;
}

main.seo .mehr a {
         display: inline-block;
         margin: 0 10px;
}

@media (max-width: 768px) {
         main.seo {
                  padding: 44px 16px 140px 16px;
         }

         main.seo section {
                  padding: 34px 0;
         }

         main.seo .knopf {
                  line-height: 20px;
                  padding: 20px 40px;
         }

         main.seo .zitat {
                  padding: 18px 20px;
         }
}