/*
Theme Name: Kraks
Theme URI: https://www.kraks.de/
Author: Kraks Kinderschuhe
Description: WordPress-Theme für kraks.de.
Version: 0.4.9
Text Domain: kraks
*/

:root {
  --kraks-blue: #1392e8;
  --kraks-orange: #e74e2a;
  --kraks-yellow: #f5e820;
  --kraks-ink: #080808;
  --kraks-white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--kraks-ink);
  background: var(--kraks-blue) url("assets/images/wellen.gif") repeat-x 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.25;
}
a { color: #000; font-weight: 700; text-decoration: none; }
a:hover, a:focus-visible { color: var(--kraks-orange); }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid #111; outline-offset: 2px; }

.screen-reader-text, .skip-link:not(:focus) {
  position: absolute;
  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: 10000;
  top: 1rem;
  left: 1rem;
  padding: .65rem 1rem;
  background: #fff;
}

.site-shell {
  position: relative;
  width: min(900px, calc(100% - 2rem));
  margin: 150px auto 3.5rem;
  background: var(--kraks-yellow);
  border-bottom: 6px solid var(--kraks-orange);
}
.site-header { position: relative; z-index: 2; background: #f39500; }
.brand { display: block; width: 100%; }
.brand img { display: block; width: 100%; }
.primary-nav { display: none; }

.ocean-decoration { position: absolute; display: block; z-index: 1; background-repeat: no-repeat; pointer-events: none; }
.ocean-decoration--submarine { left: -20px; top: -110px; width: 250px; height: 196px; background-image: url("assets/images/uboot.gif"); z-index: 4; }
.ocean-decoration--bubbles-left { left: -50px; top: -75px; width: 50px; height: 400px; background-image: url("assets/images/luftblasen.gif"); }
.ocean-decoration--bubbles-right { right: -50px; bottom: 30px; width: 50px; height: 400px; background-image: url("assets/images/luftblasen2.gif"); }
.ocean-decoration--seahorse { left: -50px; top: 350px; width: 45px; height: 77px; background-image: url("assets/images/seepferdchen.gif"); z-index: 3; }
.ocean-decoration--crab { right: -50px; bottom: 0; width: 50px; height: 30px; background-image: url("assets/images/krabbe.gif"); z-index: 3; }

.site-main {
  display: grid;
  grid-template-columns: 210px minmax(0, 480px) 210px;
  align-items: stretch;
  min-height: 520px;
  padding: 0;
  background: var(--kraks-yellow) url("assets/images/verlauf.gif") repeat-x 0 0;
}
.content-card {
  min-width: 0;
  padding: 15px;
  background: transparent;
}
.entry-header { margin: 0; border: 0; }
h1, h2, h3, h4 { color: #000; line-height: 1.12; }
h1 { margin: 5px 0; font-size: 1.55rem; }
h2 { margin: 1.15rem 0 .5rem; font-size: 1.15rem; }
h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
/* Historische Inhalte enthalten teils verschachtelte <font>-Tags. Diese
 * dürfen die semantische Überschrift nicht wieder auf "large" oder eine
 * alte Inline-Größe zurücksetzen. Die Regel gilt nur in Überschriften;
 * historische Formatierungen in Absätzen bleiben unverändert. */
.entry-content :is(h1, h2, h3, h4, h5, h6) font {
  font-family: inherit !important;
  font-size: inherit !important;
}
.entry-content { min-width: 0; overflow-wrap: anywhere; }
.entry-content > :first-child { margin-top: 0; }
.entry-content > :last-child { margin-bottom: 0; }
.entry-content p { margin: 0 0 1rem; }
.entry-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.entry-content td, .entry-content th { padding: .25rem; vertical-align: top; }
.entry-content figure { margin: 1.25rem 0; }

/* Die historische Markentabelle bleibt semantisch und inhaltlich erhalten.
 * Nur ihre Darstellung wird in zwei gleich breite Spalten aufgelöst. */
.kraks-brands .entry-content table {
  display: table;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  table-layout: fixed;
}
.kraks-brands .entry-content table > tbody > tr > td {
  width: 50%;
  min-width: 0;
  height: 6.5rem;
  vertical-align: middle;
  text-align: center;
}
.kraks-brands .entry-content table p {
  margin: 0;
  text-align: center;
}
.kraks-brands .entry-content table img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.kraks-brands .entry-content table td {
  padding: .45rem .35rem;
}

.kraks-shoe-gallery .entry-content table { width: 100%; }
.kraks-shoe-gallery .entry-content table img { width: 100px; height: 100px; max-width: none; }

@media (min-width: 36.01rem) {
  .kraks-shoe-gallery .entry-content table { display: table; overflow-x: visible; border-collapse: separate; border-spacing: 1px; }
  .kraks-shoe-gallery .entry-content td { padding: 1px; vertical-align: middle; }
  .kraks-shoe-gallery .entry-content td[valign="top"] { vertical-align: top; }
  .kraks-imprint .entry-content table { display: table; width: 100%; overflow-x: visible; border-collapse: separate; border-spacing: 1px; }
  .kraks-imprint .entry-content td { padding: 5px; vertical-align: middle; }
  .kraks-imprint .entry-content td[valign="top"] { vertical-align: top; }
  .kraks-imprint .entry-content table img { max-width: none; }
}

.site-sidebar { min-width: 0; padding: 15px 5px; background: transparent; }
.sidebar-section { margin: 0 0 2rem; }
.sidebar-heading {
  display: block;
  margin: 0 0 .8rem;
  padding: 5px;
  color: #fff;
  background: var(--kraks-orange);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
}
.sidebar-nav { margin: 0; padding: 0 0 0 20px; list-style: none; }
.sidebar-nav li { margin: 0; padding: 0; }
.sidebar-nav a { display: inline-block; font-size: 15px; line-height: 1.12; }
.sidebar-nav--children { margin: .15rem 0 .35rem; padding-left: 1rem; list-style: none; }
.sidebar-nav--children .sidebar-nav--children { padding-left: 1.1rem; }
.sidebar-nav .is-current > a { color: var(--kraks-orange); font-style: italic; }
.weekly-shoe { min-height: 6rem; }
.sidebar-news { margin-top: 2.8rem; }
.news-link { display: grid; grid-template-columns: 45px 1fr; align-items: center; gap: .65rem; margin: 0 0 1.1rem; padding-left: 20px; font-size: 13px; line-height: 1.05; }
.news-link img { display: block; max-width: 45px; max-height: 45px; }
.news-link--phone { grid-template-columns: 24px 1fr; margin-top: 1.75rem; font-size: 14px; }
.news-link--phone img { max-width: 24px; max-height: 24px; }

.kraks-contact-layout { max-width: 100%; }
.kraks-contact-lead { margin-bottom: .5rem; }
.kraks-contact-image { width: 200px; margin: .35rem auto .8rem; }
.kraks-contact-image img { display: block; width: 200px; height: 150px; }
.kraks-contact-card { display: block; margin: 0 0 .8rem; font-style: normal; }
.kraks-contact-card > span { display: block; margin: 0 0 .8rem; }
.kraks-contact-card a { display: inline; }
.kraks-contact-hours { padding-top: 1.3rem; }
.kraks-contact-hours-title { display: block; margin-bottom: .8rem; }
.kraks-contact-hours > span:not(.kraks-contact-hours-title) { display: block; margin-bottom: .45rem; }
.kraks-contact-form { width: 100%; max-width: 450px; margin: 0 auto; }
.kraks-contact-form .kraks-form-field { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 6px; align-items: start; margin: 0 0 .4rem; }
.kraks-contact-form label { padding-top: .35rem; font-size: 12px; text-align: right; }
.kraks-required { color: #d3170a; }
.kraks-contact-form input, .kraks-contact-form textarea { min-width: 0; max-width: 100%; padding: .35rem; color: #000; background: transparent; border: 3px solid var(--kraks-orange); }
.kraks-contact-form input { width: 200px; }
.kraks-contact-form textarea { width: 310px; min-height: 105px; resize: vertical; }
.kraks-contact-form button, .wp-block-button__link, .kraks-button { padding: .45rem .7rem; color: #fff; background: var(--kraks-orange); border: 0; font-weight: 700; cursor: pointer; }
.kraks-contact-form .kraks-form-actions { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 6px; margin-left: 0; }
.kraks-contact-form .kraks-form-actions button { grid-column: 2; justify-self: start; }
.form-privacy { margin-left: 106px; }
.kraks-honeypot { position: absolute; left: -10000px; }
.form-privacy { font-size: .85rem; }
.form-notice { padding: .7rem; border: 2px solid var(--kraks-orange); }

.kraks-intro { font-size: 1.1rem; }
.kraks-notice, .kraks-card { padding: .8rem; border: 2px solid var(--kraks-orange); background: rgba(255,255,255,.25); }
.kraks-image-text { gap: 1rem; }
.kraks-card-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .7rem; }
.kraks-faq details { margin: .5rem 0; padding: .6rem; border: 2px solid var(--kraks-orange); }
.kraks-memory-game { max-width: 432px; margin: 1rem auto 0; text-align: center; }
.kraks-memory-help { margin: 0 0 .75rem; }
.kraks-memory-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.kraks-memory-card { display: block; min-width: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.kraks-memory-card img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.kraks-memory-card.is-matched { cursor: default; }
.kraks-memory-start, .kraks-memory-close { margin-top: 1rem; padding: .45rem .7rem; color: #fff; background: var(--kraks-orange); border: 0; font-weight: 700; cursor: pointer; }
.kraks-memory-success { position: fixed; z-index: 10001; top: 50%; left: 50%; width: min(20rem, calc(100vw - 2rem)); transform: translate(-50%, -50%); padding: 1.5rem; color: #000; background: var(--kraks-yellow); border: 4px solid var(--kraks-orange); box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); text-align: center; }
.kraks-memory-success h2 { margin: 0 0 .75rem; }
.kraks-memory-success p { margin: 0; }
.kraks-memory-success .kraks-memory-close { display: block; margin: .75rem auto 0; color: #000; background: transparent; }

.site-footer {
  position: absolute;
  bottom: -45px;
  left: 25%;
  width: 50%;
  color: #000;
  background: transparent;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  clear: both;
}

@media (max-width: 58rem) {
  body { background-position: 0 0; }
  .site-shell { width: min(48rem, calc(100% - 1rem)); min-width: 0; margin-top: 110px; }
  .site-header { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
  .ocean-decoration { display: none; }
  .primary-nav { display: block; contain: inline-size; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; padding: .35rem .5rem; background: transparent; border-bottom: 2px solid var(--kraks-orange); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .primary-nav ul { display: flex; flex-wrap: nowrap; width: max-content; min-width: 100%; gap: .15rem .35rem; margin: 0; padding: 0; list-style: none; }
  .primary-nav a { display: block; padding: .5rem .6rem; border-radius: .35rem; white-space: nowrap; }
  .primary-nav a:hover { color: var(--kraks-white)}
  .primary-nav .is-current a { color: var(--kraks-orange); background: #fff; }
  .site-main { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .site-sidebar--left { display: none; }
  .content-card { padding: 1.25rem; }
  .entry-header { margin-bottom: 0; }
  .site-footer { left: 10%; width: 80%; }
  .site-sidebar--right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; }
  .sidebar-news { margin-top: 0; }
}

@media (max-width: 36rem) {
  body { font-size: 16px; overflow-x: hidden; }
  .site-shell { width: calc(100% - 1rem); max-width: calc(100vw - 1rem); margin: 100px auto 7rem; overflow-x: clip; }
  .site-footer { bottom: -6.2rem; left: 1rem; width: calc(100% - 2rem); }
  .primary-nav ul { justify-content: flex-start; }
  .primary-nav a { padding: .48rem .55rem; }
  .content-card { padding: 1rem; }
  .kraks-contact-form .kraks-form-field { grid-template-columns: 1fr; gap: .15rem; }
  .kraks-contact-form label { padding-top: 0; text-align: left; }
  .kraks-contact-form input, .kraks-contact-form textarea { width: 100%; }
  .kraks-contact-form .kraks-form-actions { display: block; }
  .kraks-contact-form .kraks-form-actions button { grid-column: auto; }
  .form-privacy { margin-left: 0; }
  .site-sidebar--right { grid-template-columns: 1fr; }
  .sidebar-nav { padding-left: .4rem; }
  .news-link { padding-left: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


.BMheader {
  background-color: #E74E2A;
  color: #fff;
  vertical-align: middle;
  font-weight: bold;
  text-align: center;
}