/*
 * Mobile layer for the Fusion theme (sportskarate.de).
 *
 * Rule of the house: every layout rule below sits inside the
 * @media (max-width: 900px) block, so nothing above the breakpoint can move.
 * The only rules outside it hide the two controls this layer injects itself
 * (the nav toggle and the submenu toggles), which do not exist in the
 * untouched desktop DOM.
 */

.km-navtoggle,
.km-sub {
	display: none;
}

@media (max-width: 900px) {

/* ---------------------------------------------------------------- shell -- */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	/* the theme's 0.75em (12px) body copy is unreadable on a phone */
	font-size: 1em;
	line-height: 1.55;
	/* main-bg.gif is the fade that sits directly under the header band */
	background-position: left 112px;
	overflow-x: hidden;
}

/* header band: keep the tiled gradient, squashed from 200px to 104px, and
   drop the 1640px centre piece that cannot work at phone widths */
#page-wrap1 {
	background-size: auto 112px;
}

#page-wrap2 {
	height: 112px;
	background-image: none;
}

#page {
	width: auto;
	min-width: 0;
}

/* The desktop layout offsets three nested wrappers against each other with
   percentage left/right values. On mobile it is one column in source order:
   content first, sidebar underneath. */
#main-wrap,
#page #main-wrap #mid-wrap,
#page #main-wrap #side-wrap,
#page.with-sidebar #main-wrap #mid-wrap,
#page.with-sidebar #main-wrap #side-wrap,
#page.with-sidebar2 #main-wrap #mid-wrap,
#page.with-sidebar2 #main-wrap #side-wrap,
#page #main-wrap #mid,
#page.with-sidebar #main-wrap #mid,
#page.with-sidebar #main-wrap #sidebar,
#page.with-sidebar2 #main-wrap #mid,
#page.with-sidebar2 #main-wrap #sidebar,
#page.with-sidebar2 #main-wrap #sidebar2 {
	position: static;
	float: none;
	width: auto;
	left: auto;
	right: auto;
}

#mid-content {
	margin: 30px 0 10px;
	padding: 0 14px;
}

/* "Verfasst von admin unter Allgemein am ..." — noise on a phone */
#mid-content .postheader {
	display: none;
}

/* the top-right font-size / fixed-vs-liquid switcher is meaningless here */
#layoutcontrol {
	display: none;
}

/* --------------------------------------------------------------- header -- */

#header {
	height: 112px;
	overflow: visible;
}

/* The band's artwork is a light strip over a dark one, with the seam about a
   third of the way down. Centring the title in the whole band parked it right
   on that seam; it is centred in the dark part instead, which is what reads as
   "the header" — hence the padding-top rather than a plain centre. */
#header h1,
#header h1#title {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 14px;
	right: 82px;
	display: flex;
	align-items: center;
	padding-top: 38px;
	box-sizing: border-box;
	font-size: 1.5em;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------------ nav toggle -- */

/* Pages here run to several screens, and the header scrolls away with them.
   The button stays put so the menu is always one tap away; it is opaque dark
   so the white bars read against both the header band and white content. */
.km-navtoggle {
	display: block;
	position: fixed;
	top: 49px;
	right: 10px;
	z-index: 600;
	width: 56px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(26, 30, 36, 0.93);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	color: #fff;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.km-navtoggle:hover,
.km-navtoggle:focus {
	background: rgba(26, 30, 36, 1);
}

.km-bars,
.km-bars::before,
.km-bars::after {
	display: block;
	position: absolute;
	left: 16px;
	width: 24px;
	height: 2px;
	background: #fff;
	content: "";
}

.km-bars {
	top: 17px;
}

.km-bars::before {
	top: -7px;
	left: 0;
}

.km-bars::after {
	top: 7px;
	left: 0;
}

.km-navtoggle__text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	font-size: 11px;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

body.km-scrolled .km-navtoggle {
	top: 12px;
}

body.km-nav-open .km-bars {
	background: transparent;
}

body.km-nav-open .km-bars::before {
	top: 0;
	transform: rotate(45deg);
}

body.km-nav-open .km-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* ------------------------------------------------------------------ nav -- */

/* Fusion's tab bar is a row of sprite-backed floats with hover-only
   submenus — unusable on touch. Rebuild it as a collapsible panel. */
#header #tabs {
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0.14);
	position: fixed;
	top: 109px;
	right: 0;
	bottom: auto;
	left: 0;
	z-index: 500;
	display: none;
	width: 100%;
	max-height: calc(100vh - 121px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	font-size: 1em;
	background: #2b2f36;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body.km-nav-open #header #tabs {
	display: block;
}

body.km-scrolled #header #tabs {
	top: 72px;
	max-height: calc(100vh - 84px);
}

/* the panel scrolls on its own; the page behind it should not */
html.km-nav-open,
body.km-nav-open {
	overflow: hidden;
}

/* Dim the page so the panel reads as an overlay rather than a floating slab.
   This has to hang off #header, not off body: #header carries z-index: 2, so
   it is its own stacking context and the panel's z-index 500 only counts
   inside it. A backdrop on body would paint over the panel and the close
   button and swallow every tap. */
body.km-nav-open #header::after {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.45);
}

#tabs ul,
#tabs ul ul,
#tabs ul ul ul {
	position: static;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	list-style: none;
	line-height: inherit;
}

#tabs li {
	position: relative;
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	list-style: none;
}

#tabs > ul > li:first-child {
	border-top: 0;
}

#tabs a,
#tabs ul li ul a {
	display: block;
	float: none;
	width: auto;
	height: auto;
	margin: 0;
	padding: 13px 60px 13px 16px;
	background: none;
	color: #e8e9ec;
	font-size: 1em;
	font-weight: normal;
	text-decoration: none;
	text-shadow: none;
	line-height: 1.35;
}

#tabs a span,
#tabs a span span,
#tabs ul li ul a span,
#tabs ul li ul a span span {
	display: inline;
	float: none;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	color: inherit;
}

/* Fusion styles :hover on every DESCENDANT link of a hovered row
   ("#tabs li:hover a"), and on a touch screen :hover latches after a tap — so
   expanding a branch lit up every row inside it. Backgrounds are stated once
   here and only the row itself may be highlighted; hover is handled further
   down, and only on pointers that can actually hover.

   The !important is deliberate: a dozen sprite-era theme rules paint
   background and colour onto #tabs links and their nested spans, and matching
   each one selector-for-selector is what let this bug through twice. */
#tabs a,
#tabs ul li ul a {
	background: none !important;
}

#tabs a {
	color: #e8e9ec !important;
}

#tabs ul ul a,
#tabs ul li ul a {
	color: #c6cad1 !important;
}

#tabs li.current_page_item > a,
#tabs li.current_page_ancestor > a,
#tabs li.current-cat > a,
#tabs li.current-cat-parent > a {
	background: rgba(255, 255, 255, 0.13) !important;
	color: #fff !important;
	font-weight: bold;
}

#tabs ul ul a,
#tabs ul li ul a {
	padding-left: 34px;
	font-size: 0.95em;
	color: #c6cad1;
}

#tabs ul ul ul a,
#tabs ul li ul ul a {
	padding-left: 52px;
}

/* Submenus open on tap, never on hover. Fusion opens them with
   "#tabs ul li:hover ul" (0,1,1,3) and a tap leaves :hover stuck on a touch
   device, so a plain "#tabs li:hover > ul" cannot close them again — these
   have to outrank it, hence the long chains. */
#tabs ul ul {
	display: none;
}

#tabs ul li:not(.km-open) > ul,
#tabs ul li li:not(.km-open) > ul,
#tabs ul li li li:not(.km-open) > ul,
#tabs ul li li li li:not(.km-open) > ul {
	display: none;
}

#tabs ul li.km-open > ul,
#tabs ul li li.km-open > ul,
#tabs ul li li li.km-open > ul,
#tabs ul li li li li.km-open > ul {
	display: block;
	background: rgba(0, 0, 0, 0.22);
}

/* The current branch gets a white panel with dark text on desktop, which on
   the dark mobile panel hides the text and the "+" completely. */
#tabs ul a.active ul,
#tabs ul li.current_page_item > ul,
#tabs ul li.current_page_ancestor > ul,
#tabs ul li.current-cat > ul,
#tabs ul li.current-cat-parent > ul {
	background: rgba(0, 0, 0, 0.22);
	border: 0;
}

#tabs ul a.active ul a,
#tabs ul li.current_page_item > ul a,
#tabs ul li.current_page_ancestor > ul a,
#tabs ul li.current-cat > ul a,
#tabs ul li.current-cat-parent > ul a {
	text-shadow: none;
}

/* the theme paints link colour onto the nested spans in a dozen rules */
#tabs a span,
#tabs a span span {
	color: inherit !important;
}

.km-sub {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	height: 47px;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.km-sub:hover,
.km-sub:focus {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid #2d83d5;
	outline-offset: 2px;
}

/* -------------------------------------------------------------- content -- */

/* The theme gives content images 3px padding, a 1px border and 10px side
   margins. With content-box sizing a "max-width: 100%" image still ends up
   28px wider than its column, which is what pushed the page sideways. */
#mid img,
#sidebar img,
#footer img,
.entry img,
.attachment img {
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	margin-left: 0;
	margin-right: 0;
}

#mid-content img.aligncenter,
#mid-content .wp-caption {
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	width: auto !important;
	max-width: 100% !important;
}

iframe,
embed,
object,
video {
	max-width: 100%;
}

/* Headings are sized in % of a 12px body on desktop; against a 16px body they
   come out huge, and German compounds then break mid-word. */
#mid-content h1,
#mid-content h2,
#mid-content h3,
#mid-content h3.title,
#mid-content .postheader h1,
#mid-content .postheader h2 {
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
	line-height: 1.18;
}

#mid-content h1,
#mid-content .postheader h1 {
	font-size: 1.9em;
}

#mid-content h2,
#mid-content .postheader h2 {
	font-size: 1.45em;
}

#mid-content h3,
#mid-content h3.title {
	font-size: 1.3em;
}

/* second column of a row that faked two columns with   runs
   (mobile.js breaks the line and wraps the remainder in this) */
#mid-content .km-col {
	display: inline-block;
	padding-left: 1.7em;
	color: #4e5359;
}

/* headings/paragraphs that only hold   spacing for the 980px layout
   (class is added by mobile.js) */
#mid-content .km-spacer {
	display: none;
}

/* wide tables get a horizontal scroller of their own rather than pushing
   the whole page sideways (wrapper is added by mobile.js) */
.km-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 1em;
}

.km-tablewrap > table {
	min-width: 100%;
}

/* many old tables carry a hard width="380"-style attribute */
#mid-content table {
	max-width: 100%;
}

#mid-content ul li,
#mid-content ol li {
	margin-left: 1.25em;
}

#mid-content dt {
	float: none;
	width: auto;
	text-align: left;
}

#mid-content dd {
	margin-left: 0;
}

blockquote {
	margin: 10px 0;
	padding: 18px 12px 8px;
}

pre,
code {
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* long unbroken words/URLs must not widen the page */
#mid-content,
#sidebar,
#footer {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.navigation,
.navigation#pagenavi {
	font-size: 1em;
	padding: 0 0 10px;
}

.navigation a,
#footer a#toplink,
#footer p a,
#footer a.rss {
	display: inline-block;
	padding: 11px 4px;
}

/* the theme pins these to 2px of padding with !important */
#pagenavi a,
#pagenavi span.pages,
#pagenavi span.extend,
#pagenavi span.current,
.commentnavi a,
.commentnavi .page-numbers,
p.postpages a {
	display: inline-block;
	padding: 11px 14px !important;
	margin: 0 3px 6px !important;
}

/* ------------------------------------------------------------- forms ---- */

/* password gate, comment form, anything else authored into the content */
#mid-content input[type="text"],
#mid-content input[type="email"],
#mid-content input[type="url"],
#mid-content input[type="password"],
#mid-content input[type="search"],
#mid-content input[type="tel"],
#mid-content textarea,
#mid-content select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 8px 12px;
	/* below 16px iOS zooms the whole page in on focus */
	font-size: 16px;
}

#mid-content textarea {
	min-height: 140px;
}

#mid-content input[type="submit"],
#mid-content button {
	box-sizing: border-box;
	width: auto;
	min-height: 44px;
	margin-top: 8px;
	padding: 0 22px;
	font-size: 16px;
	cursor: pointer;
}

#mid-content .post-password-form label,
#mid-content #commentform label {
	display: block;
	margin-bottom: 4px;
}

/* ---------------------------------------------------------- comments ---- */

li.comment .details .text {
	font-size: 1em;
}

/* -------------------------------------------------------------- sidebar -- */

#sidebar {
	margin-top: 26px;
	padding: 0 14px;
}

/* the two decorative side panels are fixed-width slices with 28/30px of
   padding for artwork that is not shown at this size */
#sidebar-wrap1 {
	margin-top: 0;
	padding-left: 0;
	background: none;
}

#sidebar-wrap2 {
	min-height: 0;
	padding-top: 0;
	padding-right: 0;
	background: none;
}

#sidebar2-wrap {
	margin-top: 0;
	padding-left: 0;
}

ul#sidelist,
ul#sidelist li,
ul#sidelist ul li {
	margin-left: 0;
	list-style: none;
}

/* The search box is a 40px sprite with two absolutely positioned inputs at
   fixed pixel offsets. Rebuild it as a plain field + button. */
#searchtab,
#searchtab .inside {
	height: auto;
	background: none;
}

#searchtab fieldset {
	display: flex;
	gap: 8px;
	padding: 0;
	border: 0;
}

#searchtab input.searchfield,
#searchtab input#s {
	position: static;
	flex: 1 1 auto;
	box-sizing: border-box;
	width: auto;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
	color: #000;
	/* below 16px iOS zooms the whole page in on focus */
	font-size: 16px;
}

#searchtab input.searchbutton,
#searchtab input#searchsubmit {
	position: static;
	flex: 0 0 auto;
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 4px;
	background: #2d83d5;
	color: #fff;
	font-size: 15px;
	cursor: pointer;
}

#sidebar select,
#sidebar input[type="text"],
#sidebar input[type="search"],
#sidebar textarea {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	padding: 0 10px;
	font-size: 16px;
}

/* widget and footer link lists are 17px rows on desktop — too small to hit */
#sidebar .widget li > a,
#footer li > a,
ul#footer-widgets li > a {
	display: block;
	padding: 9px 0;
	line-height: 1.35;
}

/* --------------------------------------------------------------- footer -- */

#footer {
	box-sizing: border-box;
	padding: 0 14px 28px;
}

#mid-content,
#sidebar,
.km-tablewrap {
	box-sizing: border-box;
}

ul#footer-widgets li.widget,
ul#footer-widgets.widgetcount-1 li.widget,
ul#footer-widgets.widgetcount-2 li.widget,
ul#footer-widgets.widgetcount-3 li.widget,
ul#footer-widgets.widgetcount-4 li.widget,
ul#footer-widgets.widgetcount-5 li.widget,
ul#footer-widgets.widgetcount-6 li.widget {
	float: none;
	width: auto;
}

ul#footer-widgets li.widget li {
	margin-left: 0;
}

}

/* Tablet-ish widths still get the single-column layout, but full-bleed text
   at 768px is a 700-character line — cap it and centre the column. */
@media (min-width: 620px) and (max-width: 900px) {

#mid-content,
#sidebar,
#footer {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

#header h1,
#header h1#title {
	font-size: 1.8em;
}

}

/* Phones only: a floated image leaves a text column too narrow to read, so
   aligned images become full-width blocks. Small tablets keep the float. */
@media (max-width: 619px) {

#mid-content img.alignleft,
#mid-content img.alignright,
#mid-content .wp-caption.alignleft,
#mid-content .wp-caption.alignright,
#mid-content .alignleft img,
#mid-content .alignright img {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#mid-content .wp-caption.alignleft,
#mid-content .wp-caption.alignright {
	width: auto !important;
}

/* comments: a 64px avatar plus a 108px offset leaves a 250px text column */
li.comment,
li.comment .wrap {
	min-height: 0;
	background-image: none;
}

li.comment .avatar {
	padding-left: 0;
}

li.comment .avatar img {
	width: 40px;
	height: 40px;
	margin: 4px 8px 4px 0;
}

li.comment .details,
li.comment.with-avatars .details {
	margin-left: 56px;
}

li.comment .details .text {
	min-height: 0;
}

ol#comments,
ol#comments li.comment {
	margin-left: 0;
}

ol#comments li.comment.with-avatars.depth-2,
ol#comments li.comment.with-avatars.depth-3,
ol#comments li.comment.with-avatars.depth-4,
ol#comments li.comment.with-avatars.depth-5,
ol#comments li.comment.with-avatars.depth-6,
ol#comments li.comment.with-avatars.depth-7,
ol#comments li.comment.with-avatars.depth-8,
ol#comments li.comment.with-avatars.depth-9 {
	margin-left: 16px;
}

}

/* Hover highlights belong to mice. A touch screen latches :hover on whatever
   was tapped last, which left rows looking permanently selected. */
@media (max-width: 900px) and (hover: hover) {

#tabs a:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
}

.km-sub:hover {
	background: rgba(255, 255, 255, 0.16);
}

}