/*
Theme Name: Beamtenexperten Theme
Theme URI: https://beamten-pkv-vergleichen.de
Author: Marco Fragomeno
Description: Custom Theme für beamten-pkv-vergleichen.de – kein Elementor, sauberes semantisches HTML
Version: 1.2.0
License: Private
Text Domain: beamtenexperten
*/

/* ═══════════════════════════════════════════════════════════════
   BASE RESET
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; overflow-x: clip; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #1c1c1c; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; border-bottom: 1px solid #e5e7eb; width: 100%; max-width: 100%; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: 14px 30px; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo-container { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-logo-img { height: 60px; width: auto; max-width: 100%; display: block; }
.header-nav { display: flex; align-items: center; gap: 24px; }
.header-nav a { font-size: 15px; font-weight: 500; color: #475569; transition: color 0.2s ease; text-decoration: none; white-space: nowrap; }
.header-nav a:hover { color: #0066cc; }
.header-cta { background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%); color: #fff !important; padding: 12px 22px; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,102,204,0.25); }
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,102,204,0.35); color: #fff !important; }

/* Dropdowns */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; padding: 10px 0; font-size: 15px; font-weight: 500; color: #475569; cursor: pointer; white-space: nowrap; transition: color 0.2s ease; }
.nav-drop-btn::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: #0066cc; }
.nav-drop.open .nav-drop-btn::after { transform: translateY(1px) rotate(225deg); }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: -14px; min-width: 250px; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,0.12); padding: 8px; z-index: 101; }
.nav-drop-menu--2 { grid-template-columns: 1fr 1fr; min-width: 340px; }
.nav-drop.open .nav-drop-menu { display: block; }
.nav-drop.open .nav-drop-menu--2 { display: grid; }
@media (hover: hover) {
  .nav-drop:hover .nav-drop-menu { display: block; }
  .nav-drop:hover .nav-drop-menu--2 { display: grid; }
}
.nav-drop-menu a { display: block; padding: 9px 12px; border-radius: 6px; }
.nav-drop-menu a:hover { background: #f1f5f9; }
.nav-drop-menu a.nav-drop-all { grid-column: 1 / -1; margin-top: 6px; padding-top: 12px; border-top: 1px solid #e5e7eb; border-radius: 0 0 6px 6px; color: #0066cc; font-weight: 600; }
.nav-drop-btn:focus-visible, .header-nav a:focus-visible, .mobile-menu-btn:focus-visible, .mobile-nav-close:focus-visible, .mobile-nav-panel a:focus-visible, .mobile-nav-group summary:focus-visible { outline: 2px solid #0066cc; outline-offset: 3px; border-radius: 4px; }

.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.mobile-menu-btn span { display: block; width: 24px; height: 2px; background: #1a365d; margin: 5px 0; transition: 0.3s; }

/* Mobile Nav */
.mobile-nav-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; }
.mobile-nav-overlay.active { display: block; }
.mobile-nav-panel { position: fixed; top: 0; right: -320px; width: 300px; max-width: 86vw; height: 100%; overflow-y: auto; background: #fff; z-index: 1000; padding: 30px 25px; transition: right 0.3s ease; box-shadow: -5px 0 30px rgba(0,0,0,0.15); }
.mobile-nav-panel.active { right: 0; }
.mobile-nav-panel a { display: block; clear: both; font-size: 16px; font-weight: 500; color: #475569; padding: 14px 0; border-bottom: 1px solid #f0f0f0; text-decoration: none; }
.mobile-nav-panel a:hover { color: #0066cc; }
.mobile-nav-close { background: none; border: none; font-size: 28px; color: #475569; cursor: pointer; float: right; line-height: 1; margin-bottom: 20px; padding: 0; }
.mobile-nav-group { clear: both; border-bottom: 1px solid #f0f0f0; }
.mobile-nav-group summary { display: flex; align-items: center; justify-content: space-between; list-style: none; font-size: 16px; font-weight: 500; color: #475569; padding: 14px 0; cursor: pointer; }
.mobile-nav-group summary::-webkit-details-marker { display: none; }
.mobile-nav-group summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; margin-right: 4px; }
.mobile-nav-group[open] summary::after { transform: rotate(225deg); }
.mobile-nav-group a { padding: 11px 0 11px 14px; font-size: 15px; border-bottom: 0; }
.mobile-nav-group a:last-child { padding-bottom: 16px; }
.mobile-nav-panel a.header-cta { margin-top: 20px; padding: 13px 20px; text-align: center; border-bottom: 0; }

@media (max-width: 1160px) { .header-nav { display: none; } .mobile-menu-btn { display: block; } }
@media (max-width: 768px) { .header-inner { padding: 10px 20px; } .site-logo-img { height: 46px; width: auto; } }

/* ═══════════════════════════════════════════════════════════════
   FOOTER — Clean & Light
   ═══════════════════════════════════════════════════════════════ */
.site-footer { background: #f8fafc; border-top: 1px solid #e2e8f0; color: #475569; padding: 64px 30px 32px; font-size: 15px; line-height: 1.6; margin-top: 80px; width: 100%; max-width: 100%; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 40px 32px; }

.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-logo-link { display: inline-block; transition: opacity 0.2s ease; }
.footer-logo-link:hover { opacity: 0.75; }
.footer-logo { display: block; width: 180px; max-width: 100%; height: auto; }
.footer-tagline { margin: 0; font-size: 14px; color: #64748b; max-width: 280px; line-height: 1.5; }
.footer-address { font-style: normal; font-size: 14px; line-height: 1.6; color: #475569; }
.footer-address a { color: #334155; font-weight: 600; }
.footer-address a:hover { color: #0066cc; }
.footer-cta { display: inline-block; margin-top: 6px; font-size: 15px; }

.footer-heading { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #1a365d; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-col a { display: inline-block; padding: 3px 0; color: #334155; text-decoration: none; transition: color 0.2s ease; }
.footer-col a:hover, .footer-col a:focus-visible { color: #0066cc; }

.footer-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #e2e8f0; font-size: 13px; color: #64748b; }
.footer-copy, .footer-license { margin: 0; line-height: 1.7; }
.footer-legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal-list a { color: #64748b; text-decoration: none; transition: color 0.2s ease; }
.footer-legal-list a:hover, .footer-legal-list a:focus-visible { color: #0066cc; }

@media (max-width: 1000px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .site-footer { padding: 48px 20px 24px; margin-top: 56px; }
  .footer-top { gap: 32px 20px; }
  .footer-col a { padding: 6px 0; }
  .footer-bottom { margin-top: 36px; }
}
@media (max-width: 359px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG POST — WRAPPER & LAYOUT
   ═══════════════════════════════════════════════════════════════ */
.pkv-blog-wrapper { background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%); padding: 60px 20px; color: #1c1c1c; line-height: 1.8; width: 100%; max-width: 100%; margin: 0; }
.pkv-blog-inner { max-width: 900px; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════════
   AI SUMMARY BOX
   ═══════════════════════════════════════════════════════════════ */
.pkv-ai-summary { background: linear-gradient(135deg, #0066cc 0%, #004499 100%); color: #ffffff; padding: 35px; border-radius: 20px; margin-bottom: 35px; box-shadow: 0 15px 40px rgba(0,102,204,0.25); position: relative; overflow: hidden; }
.pkv-ai-summary::before { content: ""; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); pointer-events: none; }
.pkv-ai-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.2); padding: 8px 16px; border-radius: 50px; font-size: 13px; font-weight: 600; margin-bottom: 20px; backdrop-filter: blur(10px); }
.pkv-ai-badge svg { width: 16px; height: 16px; }
.pkv-ai-summary h1 { font-size: 28px; font-weight: 700; margin: 0 0 20px 0; line-height: 1.3; color: #ffffff; }
.pkv-ai-summary p { font-size: 17px; line-height: 1.7; margin: 0 0 20px 0; color: rgba(255,255,255,0.95); }
.pkv-ai-summary strong { color: #ffc107; }
.pkv-summary-bullets { list-style: none; padding: 0; margin: 0; }
.pkv-summary-bullets li { color: rgba(255,255,255,0.92); font-size: 15px; line-height: 1.65; padding: 7px 0 7px 28px; position: relative; border-bottom: 1px solid rgba(255,255,255,0.1); }
.pkv-summary-bullets li:last-child { border-bottom: none; }
.pkv-summary-bullets li::before { content: "✓"; position: absolute; left: 0; color: #ffc107; font-weight: 700; }
.pkv-summary-bullets li strong { color: #ffc107; }

/* ═══════════════════════════════════════════════════════════════
   AUTHOR BOX
   ═══════════════════════════════════════════════════════════════ */
.pkv-author-box { display: flex; gap: 20px; align-items: center; background: #ffffff; padding: 25px 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); margin-bottom: 35px; border-left: 4px solid #0066cc; }
.pkv-author-avatar { width: 75px; height: 75px; border-radius: 50%; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0,102,204,0.2); }
.pkv-author-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.pkv-author-info h3 { font-size: 20px; margin: 0 0 4px 0; color: #0066cc; }
.pkv-author-title { font-size: 14px; color: #666; margin: 0 0 8px 0; }
.pkv-author-meta { display: flex; gap: 15px; flex-wrap: wrap; }
.pkv-author-stat { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #555; }
.pkv-author-stat svg { width: 14px; height: 14px; color: #ffc107; }

/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ═══════════════════════════════════════════════════════════════ */
.pkv-toc { background: #ffffff; padding: 30px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); margin-bottom: 35px; }
.pkv-toc-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e8f4fc; }
.pkv-toc-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0066cc, #004999); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pkv-toc-icon svg { width: 20px; height: 20px; }
.pkv-toc-header h2 { font-size: 20px; margin: 0; color: #1c1c1c; }
.pkv-toc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pkv-toc-list li { display: flex; align-items: center; gap: 12px; }
.pkv-toc-number { width: 28px; height: 28px; background: linear-gradient(135deg, #e8f4fc, #d0e8f7); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #0066cc; flex-shrink: 0; }
.pkv-toc-list a { color: #333; text-decoration: none; font-size: 15px; transition: all 0.2s ease; padding: 8px 0; flex: 1; }
.pkv-toc-list a:hover { color: #0066cc; padding-left: 8px; }

/* ═══════════════════════════════════════════════════════════════
   ARTICLE BODY
   ═══════════════════════════════════════════════════════════════ */
.pkv-article { background: #ffffff; padding: 45px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); }
.pkv-article h2 { font-size: 24px; color: #1c1c1c; margin: 50px 0 25px 0; padding-top: 35px; border-top: 1px solid #e8e8e8; scroll-margin-top: 100px; }
.pkv-article h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.pkv-article h3 { font-size: 20px; color: #0066cc; margin: 35px 0 18px 0; }
.pkv-article p { font-size: 17px; color: #333; margin-bottom: 20px; }
.pkv-article strong { color: #1c1c1c; }

/* ═══════════════════════════════════════════════════════════════
   INFO BOXES
   ═══════════════════════════════════════════════════════════════ */
.pkv-info-box { background: linear-gradient(135deg, #e8f4fc, #ffffff); border-left: 4px solid #0066cc; padding: 22px 25px; border-radius: 0 12px 12px 0; margin: 25px 0; }
.pkv-info-box.warning { background: linear-gradient(135deg, #fff8e1, #ffffff); border-left-color: #ff9800; }
.pkv-info-box.success { background: linear-gradient(135deg, #e8f5e9, #ffffff); border-left-color: #43a047; }
.pkv-info-box.danger { background: linear-gradient(135deg, #ffebee, #ffffff); border-left-color: #e53935; }
.pkv-info-box strong { color: #0066cc; }
.pkv-info-box.warning strong { color: #e65100; }
.pkv-info-box.success strong { color: #2e7d32; }
.pkv-info-box p { margin: 0; font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */
.pkv-table-wrapper { overflow-x: auto; margin: 30px 0; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.08); width: 100%; -webkit-overflow-scrolling: touch; }
.pkv-table { width: 100%; border-collapse: collapse; min-width: 540px; }
.pkv-table caption { font-size: 13px; font-weight: 600; color: #0a2540; text-align: left; padding: 0 0 10px 4px; caption-side: top; }
.pkv-table th { background: linear-gradient(135deg, #0066cc, #004999); color: #fff; padding: 15px 12px; text-align: left; font-size: 14px; font-weight: 600; }
.pkv-table th:first-child { border-radius: 12px 0 0 0; }
.pkv-table th:last-child { border-radius: 0 12px 0 0; }
.pkv-table td { padding: 14px 12px; border-bottom: 1px solid #e8e8e8; font-size: 14px; color: #333; vertical-align: top; line-height: 1.5; }
.pkv-table tr:nth-child(even) { background: #f8fafc; }
.pkv-table tr:hover { background: #e8f4fc; }
.pkv-table tfoot td { padding: 9px 12px; font-size: 12px; color: #94a3b8; border-top: 1px solid #e8e8e8; font-style: italic; background: #fafafa; }
.pkv-table tfoot td:first-child { border-radius: 0 0 0 12px; }
.pkv-table tfoot td:last-child { border-radius: 0 0 12px 0; }
.pkv-table .check { color: #43a047; font-weight: 600; }
.pkv-table .limit { color: #ff9800; font-weight: 600; }
.pkv-table .cross { color: #e53935; font-weight: 600; }
.pkv-table .cell-label { font-weight: 600; color: #1c1c1c; min-width: 120px; }

/* ═══════════════════════════════════════════════════════════════
   COMPARE CARDS
   ═══════════════════════════════════════════════════════════════ */
.pkv-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin: 30px 0; }
.pkv-compare-card { background: #ffffff; border: 2px solid #e8f4fc; border-radius: 16px; padding: 25px; transition: all 0.3s ease; }
.pkv-compare-card:hover { border-color: #0066cc; box-shadow: 0 10px 30px rgba(0,102,204,0.12); transform: translateY(-3px); }
.pkv-compare-card.highlight { border-color: #43a047; background: linear-gradient(135deg, #f1f8e9, #ffffff); }
.pkv-compare-card h4 { font-size: 18px; color: #0066cc; margin: 0 0 15px 0; display: flex; align-items: center; gap: 10px; }
.pkv-compare-card.highlight h4 { color: #2e7d32; }
.pkv-badge { display: inline-block; background: #43a047; color: #fff; font-size: 11px; padding: 3px 10px; border-radius: 50px; font-weight: 600; }
.pkv-compare-card p { font-size: 15px; color: #555; margin: 0; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════════
   CTA BOXES
   ═══════════════════════════════════════════════════════════════ */
.pkv-cta-box { background: linear-gradient(135deg, #0066cc 0%, #004499 100%); padding: 35px; border-radius: 16px; text-align: center; margin: 40px 0; position: relative; overflow: hidden; }
.pkv-cta-box h3 { font-size: 24px; color: #ffffff; margin: 0 0 12px 0; position: relative; }
.pkv-cta-box p { font-size: 16px; color: rgba(255,255,255,0.9); margin: 0 0 25px 0; position: relative; }
.pkv-cta-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #ffc107; color: #1c1c1c !important; padding: 16px 35px; border-radius: 50px; font-size: 17px; font-weight: 600; text-decoration: none !important; transition: all 0.3s ease; position: relative; box-shadow: 0 8px 25px rgba(255,193,7,0.35); }
.pkv-cta-button:hover { background: #ffca28; transform: translateY(-2px); box-shadow: 0 12px 35px rgba(255,193,7,0.45); color: #1c1c1c !important; }
.pkv-cta-button svg { width: 20px; height: 20px; flex-shrink: 0; }
.pkv-cta-mini { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #0066cc, #004999); color: #ffffff !important; padding: 12px 25px; border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none !important; transition: all 0.3s ease; margin: 15px 0; }
.pkv-cta-mini:hover { background: linear-gradient(135deg, #0077ee, #0055bb); transform: translateY(-2px); color: #ffffff !important; }

/* ═══════════════════════════════════════════════════════════════
   FAQ SECTION
   ═══════════════════════════════════════════════════════════════ */
.pkv-faq-section { margin-top: 50px; padding-top: 40px; border-top: 1px solid #e8e8e8; }
.pkv-faq-header { display: flex; align-items: center; gap: 15px; margin-bottom: 30px; }
.pkv-faq-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #ff9800, #f57c00); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pkv-faq-icon svg { width: 26px; height: 26px; }
.pkv-faq-header h2 { font-size: 24px; margin: 0; padding: 0; border: none; color: #1c1c1c; }
.pkv-faq-card { background: #ffffff; border: 2px solid #ffe0b2; border-radius: 14px; margin-bottom: 18px; overflow: hidden; transition: all 0.3s ease; }
.pkv-faq-card:hover { border-color: #ff9800; box-shadow: 0 8px 25px rgba(255,152,0,0.12); }
.pkv-faq-question { background: linear-gradient(135deg, #fff8e1, #ffffff); padding: 20px 25px; display: flex; align-items: center; gap: 15px; }
.pkv-faq-number { width: 34px; height: 34px; background: linear-gradient(135deg, #ff9800, #f57c00); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; font-weight: 700; flex-shrink: 0; }
.pkv-faq-question h3 { font-size: 17px; color: #e65100; margin: 0; line-height: 1.4; }
.pkv-faq-answer { padding: 20px 25px 25px 74px; border-top: 1px solid #ffe0b2; }
.pkv-faq-answer p { font-size: 16px; color: #444; margin: 0; line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════════════ */
.pkv-final-cta { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); padding: 50px 40px; border-radius: 20px; text-align: center; margin-top: 50px; position: relative; overflow: hidden; }
.pkv-final-cta h2 { font-size: 28px; color: #ffffff; margin: 0 0 15px 0; padding: 0; border: none; }
.pkv-final-cta p { font-size: 17px; color: rgba(255,255,255,0.85); margin: 0 0 30px 0; max-width: 600px; margin-left: auto; margin-right: auto; }
.pkv-final-features { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; }
.pkv-final-feature { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.9); font-size: 14px; }
.pkv-final-feature svg { width: 18px; height: 18px; color: #ffc107; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pkv-blog-wrapper { padding: 30px 15px; }
  .pkv-ai-summary { padding: 25px 20px; }
  .pkv-ai-summary h1 { font-size: 22px; }
  .pkv-author-box { flex-direction: column; text-align: center; padding: 25px 20px; }
  .pkv-author-meta { justify-content: center; }
  .pkv-article { padding: 30px 20px; }
  .pkv-article h2 { font-size: 20px; }
  .pkv-faq-answer { padding-left: 25px; }
  .pkv-final-cta { padding: 40px 25px; }
  .pkv-final-cta h2 { font-size: 22px; }
  .pkv-compare-grid { grid-template-columns: 1fr; }
  .pkv-final-features { flex-direction: column; gap: 15px; align-items: center; }
}