/*
Theme Name: eCardino Theme
Theme URI: https://www.ecardino.de/
Author: eCardino
Author URI: https://www.ecardino.de/
Description: Anpassbares redaktionelles WordPress-Theme für den eCardino Blog mit zentral steuerbaren Farben, Layout, Typografie, Boxen und Sidebar.
Version: 3.7.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: ecardino
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:root {
  --ecardino-primary:#073b52;
  --ecardino-primary-hover:#073b52;
  --ecardino-link:#073b52;
  --ecardino-heading:#202a34;
  --ecardino-text:#3b4650;
  --ecardino-page-bg:#ffffff;
  --ecardino-card-bg:#f4f8fb;
  --ecardino-widget-bg:#f4f8fb;
  --ecardino-inner-box-bg:#f7f7f7;
  --ecardino-header-bg:#ffffff;
  --ecardino-nav-bg:#073b52;
  --ecardino-footer-bg:#073b52;
  --ecardino-border:#d9e4eb;
  --ecardino-site-width:1220px;
  --ecardino-sidebar-width:300px;
  --ecardino-column-gap:44px;
  --ecardino-content-pad:34px;
  --ecardino-main-top:34px;
  --ecardino-body-size:16px;
  --ecardino-h1-size:34px;
  --ecardino-h2-size:26px;
  --ecardino-h3-size:20px;
  --ecardino-line-height:1.65;
  --ecardino-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ecardino-logo-height:58px;
  --ecardino-header-height:110px;
  --ecardino-nav-font-size:15px;
  --ecardino-card-radius:12px;
  --ecardino-widget-radius:12px;
  --ecardino-widget-pad:18px;
  --ecardino-shadow:0 4px 14px rgba(7,59,82,.06);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  background:var(--ecardino-page-bg);
  color:var(--ecardino-text);
  font-family:var(--ecardino-font-family);
  font-size:var(--ecardino-body-size);
  line-height:var(--ecardino-line-height);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; }
a { color:var(--ecardino-link); text-underline-offset:.16em; text-decoration-thickness:.07em; }
a:hover { color:var(--ecardino-primary); text-decoration-thickness:.11em; }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid color-mix(in srgb, var(--ecardino-primary) 28%, transparent);
  outline-offset:3px;
}

.screen-reader-text,.skip-link:not(:focus) {
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus {
  position:fixed;z-index:99999;top:12px;left:12px;padding:10px 14px;background:#fff;border:2px solid var(--ecardino-primary);border-radius:8px;color:var(--ecardino-heading);
}

.site-shell { width:min(calc(100% - 40px), var(--ecardino-site-width)); margin-inline:auto; }
.site-header { background:var(--ecardino-header-bg); border-bottom:1px solid var(--ecardino-border); }
.header-inner { display:flex; align-items:center; min-height:var(--ecardino-header-height); }
.site-branding { min-width:0; }
.custom-logo-link { display:inline-flex; align-items:center; }
.custom-logo { max-height:var(--ecardino-logo-height); width:auto; display:block; }
.site-title { margin:0; font-size:36px; line-height:1; font-weight:750; letter-spacing:-.025em; }
.site-title a { color:var(--ecardino-primary); text-decoration:none; }
.site-description { margin:.6rem 0 0; color:#6b7680; font-size:15px; }

.site-nav-wrap { background:var(--ecardino-primary); border-top:3px solid var(--ecardino-primary); }
.ecardino-sticky-nav .site-nav-wrap { position:sticky; top:32px; z-index:999; }
.nav-inner { display:flex; align-items:center; min-height:50px; }
.primary-menu { display:flex; flex-wrap:wrap; margin:0; padding:0; list-style:none; }
.primary-menu li { margin:0; }
.primary-menu a {
  display:block; padding:13px 16px; color:#fff; text-decoration:none; font-size:var(--ecardino-nav-font-size); font-weight:700; line-height:1.2;
}
.primary-menu a:hover,.primary-menu .current-menu-item>a,.primary-menu .current_page_item>a,.primary-menu .current-menu-ancestor>a {
  background:var(--ecardino-primary); color:#fff;
  box-shadow:inset 0 -3px rgba(255,255,255,.78);
}
.menu-toggle { display:none; width:44px; height:44px; border:0; border-radius:8px; background:var(--ecardino-primary); color:#fff; font-size:20px; cursor:pointer; }

.site-main-wrap { padding:var(--ecardino-main-top) 0 54px; background:var(--ecardino-page-bg); }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) var(--ecardino-sidebar-width); gap:var(--ecardino-column-gap); align-items:start; }
.content-grid.no-sidebar { grid-template-columns:minmax(0,1fr); }
.content-grid.no-sidebar .content-area { max-width:980px; margin-inline:auto; width:100%; }

/* Eine große Inhaltsbox links, optisch wie die Sidebar-Boxen rechts. */
.content-area {
  min-width:0;
  background:var(--ecardino-widget-bg);
  border:1px solid var(--ecardino-border);
  border-radius:var(--ecardino-widget-radius);
  box-shadow:var(--ecardino-shadow);
  padding:var(--ecardino-content-pad);
}
.sidebar { min-width:0; }

.entry-header { margin-bottom:1.4rem; }
.entry-title { margin:0 0 .75rem; color:var(--ecardino-heading); font-size:var(--ecardino-h1-size); line-height:1.18; letter-spacing:-.025em; }
.entry-meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:#75808a; font-size:14px; }
.entry-meta a { color:inherit; }
.archive-description { margin-top:1rem; }

.entry-content { color:var(--ecardino-text); }
.entry-content>*:first-child { margin-top:0; }
.entry-content h2,.entry-content h3,.entry-content h4 { color:var(--ecardino-heading); line-height:1.3; letter-spacing:-.012em; scroll-margin-top:85px; }
.entry-content h2 { margin:1.9em 0 .65em; font-size:var(--ecardino-h2-size); }
.entry-content h3 { margin:1.55em 0 .5em; font-size:var(--ecardino-h3-size); }
.entry-content h4 { margin:1.4em 0 .5em; font-size:18px; }
.entry-content p { margin-top:0; }
.entry-content ul,.entry-content ol { padding-left:1.35em; }
.entry-content li { margin:.34em 0; }
.entry-content figure { margin:1.6em 0; }

/* Blogartikel: Medien einheitlich 700 x 600 px darstellen. */
.single .entry-content figure {
  width:min(700px, 100%);
  margin:1.6em auto;
}
.single .entry-content figure > img,
.single .entry-content figure > video,
.single .entry-content video {
  display:block;
  width:700px !important;
  max-width:100% !important;
  height:600px !important;
  margin-inline:auto;
  object-fit:cover;
}
.single .entry-content video {
  object-fit:contain;
  background:#000;
}

/* Boxen innerhalb der großen Artikelbox bewusst leicht grau absetzen. */
.single .entry-content section[style*="background"],
.single .entry-content aside[style*="background"],
.single .entry-content .wp-block-group.has-background,
.single .entry-content .wp-block-columns.has-background {
  background:var(--ecardino-inner-box-bg) !important;
  border-color:#d7dde2 !important;
}
.entry-content figcaption { margin-top:.65em; color:#75808a; font-size:14px; text-align:center; }
.entry-content blockquote { margin:1.5em 0; padding:1em 1.15em; background:#fff; border-left:4px solid var(--ecardino-primary); border-radius:0 8px 8px 0; }
.entry-content table { width:100%; border-collapse:collapse; margin:1.25em 0; font-size:15px; }
.entry-content th,.entry-content td { padding:.65em .75em; border:1px solid var(--ecardino-border); vertical-align:top; text-align:left; }
.entry-content th { background:#fff; color:var(--ecardino-heading); }
.entry-content section,.entry-content aside { max-width:100%; }
.entry-content section[style*="background"],.entry-content aside[style*="background"] { border-radius:var(--ecardino-widget-radius) !important; }
.featured-image { margin:0 0 1.6rem; }
.featured-image img { display:block; width:100%; border-radius:8px; }

.post-card { display:grid; grid-template-columns:220px minmax(0,1fr); gap:22px; padding:0 0 28px; margin-bottom:28px; border-bottom:1px solid var(--ecardino-border); }
.post-card:last-child { margin-bottom:0; }
.post-card-thumb a { display:block; overflow:hidden; border-radius:8px; background:#fff; }
.post-card-thumb img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.post-card-title { margin:0 0 .4rem; font-size:21px; line-height:1.3; }
.post-card-title a { color:var(--ecardino-heading); text-decoration:none; }
.post-card-title a:hover { color:var(--ecardino-primary); text-decoration-thickness:.11em; }
.post-card-excerpt p { margin-bottom:.75rem; }
.read-more { font-weight:700; text-decoration:none; }

.widget {
  margin-bottom:26px;
  padding:var(--ecardino-widget-pad);
  background:var(--ecardino-widget-bg);
  border:1px solid var(--ecardino-border);
  border-radius:var(--ecardino-widget-radius);
  box-shadow:var(--ecardino-shadow);
}
.widget-title { margin:0 0 1rem; padding-bottom:.65rem; color:var(--ecardino-heading); font-size:18px; border-bottom:3px solid var(--ecardino-primary); }
.widget ul { margin:0; padding:0; list-style:none; }
.widget li { margin:.72rem 0; }
.widget a { text-decoration:none; }

.search-form { display:flex; gap:0; }
.search-field { min-width:0; width:100%; padding:10px 11px; border:1px solid #cbd8e2; border-right:0; border-radius:9px 0 0 9px; background:#fff; color:var(--ecardino-text); font:inherit; }
.search-submit { padding:0 14px; border:0; border-radius:0 9px 9px 0; background:var(--ecardino-primary); color:#fff; font-weight:700; cursor:pointer; }
.search-submit:hover { background:var(--ecardino-primary); text-decoration:underline; }

/* Einheitliche eCardino-Akzentfarbe für Theme-Buttons und WordPress-Buttons. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.wp-element-button,
.wp-block-button__link {
  background-color:var(--ecardino-primary);
  border-color:var(--ecardino-primary);
}

.pagination,.posts-navigation,.post-navigation { margin-top:34px; }
.nav-links { display:flex; flex-wrap:wrap; gap:10px; }
.page-numbers,.post-navigation a,.posts-navigation a { display:inline-block; padding:8px 12px; border:1px solid var(--ecardino-border); border-radius:8px; background:#fff; text-decoration:none; }
.page-numbers.current { background:var(--ecardino-primary); border-color:var(--ecardino-primary); color:#fff; }

.comments-area { margin-top:2.5rem; }
.comment-list { padding-left:1.25rem; }

.site-footer { background:var(--ecardino-footer-bg); color:rgba(255,255,255,.84); }
.footer-main { padding:34px 0 26px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:30px; }
.footer-title { margin:0 0 .7rem; color:#fff; font-size:18px; }
.footer-main a { color:#fff; }
.footer-menu { margin:0; padding:0; list-style:none; }
.footer-menu li { margin:.5rem 0; }
.site-info { padding:16px 0; border-top:1px solid rgba(255,255,255,.16); font-size:14px; }

.alignwide { max-width:980px; margin-left:auto; margin-right:auto; }
.alignfull { width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

@media (max-width:980px) {
  .site-shell { width:min(calc(100% - 28px), var(--ecardino-site-width)); }
  .content-grid { grid-template-columns:1fr; gap:28px; }
  .sidebar { border-top:1px solid var(--ecardino-border); padding-top:28px; }
  .footer-main { grid-template-columns:1fr 1fr; }
}

@media (max-width:760px) {
  .site-shell { width:min(calc(100% - 24px), var(--ecardino-site-width)); }
  .header-inner { min-height:88px; }
  .site-description { font-size:14px; }
  .nav-inner { flex-wrap:wrap; min-height:56px; }
  .menu-toggle { display:inline-flex; align-items:center; justify-content:center; margin:6px 0; }
  .primary-menu-wrap { display:none; width:100%; }
  .primary-menu-wrap.is-open { display:block; }
  .primary-menu { width:100%; flex-direction:column; padding-bottom:8px; }
  .primary-menu a { padding:12px 10px; border-top:1px solid rgba(255,255,255,.1); }
  .site-main-wrap { padding-top:22px; }
  .content-area { padding:max(18px, calc(var(--ecardino-content-pad) * .65)); }
  .single .entry-content figure > img,
  .single .entry-content figure > video,
  .single .entry-content video {
    width:100% !important;
    height:auto !important;
    aspect-ratio:7 / 6;
  }
  .post-card { grid-template-columns:1fr; gap:16px; }
  .post-card-thumb img { aspect-ratio:16/10; }
  .footer-main { grid-template-columns:1fr; }
  .entry-content table { font-size:14px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}