/*
Theme Name: Twenty Ten KFW
Template: twentyten
Description: Child-Theme von Twenty Ten fuer kfw-spoeck.de: Seitentitel ueber WordPress/Yoast statt fest aus header.php, Suche als ausklappbare Lupe im Menue (Desktop und Mobile Menu). Doku: Nextcloud Collective Sport > Kajak > Webseite.
Author: Kai Hartung
Version: 1.1.0
Text Domain: twentyten
*/
/*
 * Ladereihenfolge: header.php laedt das Stylesheet von Twenty Ten; diese Datei gibt
 * functions.php erst am Ende von <head> aus (wp_head, Prioritaet 101) - genau dort, wo
 * vorher Customizer-CSS und Simple Custom CSS standen. Dadurch gewinnt sie weiterhin
 * gegen Plugin-Styles (Mobile Menu, Responsive Twenty Ten).
 *
 * Aufbau:
 *   1. Uebernommen aus Customizer -> Zusaetzliches CSS   (bis 26.09.2026)
 *   2. Uebernommen aus Plugin Simple Custom CSS           (bis 26.09.2026)
 *   3. Uebernommen aus NextGEN wp-content/ngg_styles/nggallery.css
 *   4. Suche im Menue (neu 26.09.2026)
 *   5. Layout: Inhalt volle Breite ohne Seitenleiste, Menue fett (neu 26.09.2026)
 *   6. Hintergrund: Wellenmuster (neu 26.09.2026)
 * Reihenfolge 1 -> 2 entspricht der bisherigen Reihenfolge im Seitenkopf.
 * Originale: 02_Kai/Kajak/Website/Backup/2026-09-25/css-*-vorher.css
 */


/* ==========================================================
   1. Aus Customizer -> Zusaetzliches CSS
   ========================================================== */

/* General Size */
/* WIRKUNGSLOS, bewusst auskommentiert: Die zwei @media-Zeilen sind fehlerhaft ("@media=...",
   @media ohne Klammer), der Browser verwirft deshalb den ganzen Block - #wrapper war nie 90 % breit.
   Vor einer Aktivierung erst pruefen, ob das Layout so gewollt ist.
@media="only screen and (max-device-width: 480px)"
@media screen and (min-width: 321px)
#wrapper {
    margin: 0 auto;
    width: 90% !important;
    overflow: auto;
}
*/

#branding img {
	width: 100%;
  height: auto;
}

/* Fonts */
body {
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
}

/* Bewusst auskommentiert (26.09.2026): wirkte nie, weil bis dahin kein Menue zugewiesen war
   (Twenty Ten gab die Seitenliste als div.menu aus). Mit dem gemeinsamen "Hauptmenue" heisst
   der Container .menu-header - die Regel wuerde die Menueschrift um 20 % vergroessern.
#access .menu-header {
	font-size: 1.2em;
}
*/

/* Menu */
#access a {
	padding: 0 1.1em;
}

.mob-menu-logo-holder {
	padding-left: 40px;
	padding-right: 40px;
}

.menu-item-5304 > a {
	/*font-size: 0px;
	width: 1em;
	margin: 0;
	float: left;
	list-style: none;
	display: block;
	background: url("/wp-content/uploads/2021/03/logo.png") no-repeat 0px 0px;*/
}

/* Sidebar Widgets*/

.widget-title {
		font-weight: normal;
		color: #666;
}

.widget-area {
	width: 200px ! important ;
}

.widget_search #s {
	width: 80%;
	height: 20px;
}

.widget_search #searchsubmit {
	width: 40%;
	height: 26px;
	margin-left: 0%;
	margin-top: 1px;
}

#secondary.widget-area {
	visibility: hidden !important;
}

.wysija-paragraph {
	width: 80%;
	height: 20px;
	margin-bottom: 4px;
}

.wysija-input {
	width: 100%;
}

.wysija-submit {
	width: 40%;
	height: 26px;
}

.widget_wysija_cont .wysija-submit {
	margin-top: 1px;
}

/* Menu */

#menu-quicklinks {
	margin-left: 13% ! important ;
}

/* Nextgen Gallery */

#jj-nexgen-jquery_cycle-3 {
	padding-top: 7px;
	padding-bottom: 5px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
		margin-top:30px;
    width: 98%;
}
	
	.cycle_lite_container {
		margin-top:10px;
	}
	
	#main .widget-area ul {
		padding-right: 0px;
	}

/* ==========================================================
   2. Aus Plugin Simple Custom CSS
   ========================================================== */

.img-container { position: relative; }

.img-container .top {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.img-container .bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.img-container .bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.holder{
    width: 135%;
    height:1000px;
    position:relative
}
.frame{
    width: 100%;
    height:1000px;
}

.holderstrassenfest{
    width: 135%;
    height:500px;
    position:relative
}
.framestrassenfest{
    width: 100%;
    height:500px;
}

.bartop{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:2.3%;
    background-color: white;
    }

.barleft{
    position:absolute;
    top:0;
    left:0;
    width:5.2%;
    height:100%;
    background-color: white;
    }

.barright{
    position:absolute;
    top:0;
    right:0;
    width:27.9%;
    height:100%;
    background-color: white;
    }

.barbottom1{
    position:absolute;
    bottom:0;
    left:5.2%;
    width:7%;
    height:3.8%;
    background-color: #EEEEEE;
    }

.barbottom2{
    position:absolute;
    bottom:15%;
    left:5.2%;
    width:50%;
    height:3.8%;
    background-color: #F3F3F3;
    }

#access{
		background-color: #022444;
}

#branding img{
		border-top: 4px solid #022444;
}

#colophon {
    border-top: 4px solid #022444;
}

#site-title a {
		color: #333333;
}

#site-info a {
    color: #333333;
}

/* ==========================================================
   3. Aus NextGEN ngg_styles/nggallery.css
   ========================================================== */

/* Remove the breadcrumb at top of pages */
.breadcrumbs {
	display: none;
}

/* ==========================================================
   4. Suche im Menue
   ========================================================== */

.kfw-search-toggle {
	background: none;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.kfw-search-form {
	display: none;
}
.kfw-open .kfw-search-form {
	align-items: stretch;
	display: flex;
	gap: 6px;
}
.kfw-search-form input[type="search"],
.kfw-search-submit {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 3px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	height: 34px;
	line-height: 1;
	margin: 0;
}
.kfw-search-form input[type="search"] {
	background: #fff;
	border: 1px solid #fff;
	color: #333;
	padding: 0 10px;
}
.kfw-search-form input[type="search"]:focus {
	border-color: #6d9ccf;
	outline: 2px solid #6d9ccf;
	outline-offset: 0;
}
.kfw-search-submit {
	background: #fff;
	border: 1px solid #fff;
	color: #022444;
	cursor: pointer;
	font-weight: bold;
	padding: 0 14px;
}
.kfw-search-submit:hover,
.kfw-search-submit:focus {
	background: #e8eef5;
}

/* ---------- Desktop: rechts in der Menueleiste ---------- */
/* Responsive Twenty Ten setzt div.menu auf 940 px, Twenty Ten rueckt es 12 px ein ->
   das Menue ragte 12 px ueber die Leiste hinaus (sichtbar erst mit der Lupe ganz rechts). */
#access div.menu,
#access .menu-header {
	width: auto;
}
#access li.kfw-search-item {
	float: right;
	position: relative;
}
#access .kfw-search-toggle {
	color: #aaa;
	font-family: inherit;
	font-size: inherit;
	gap: 7px;
	height: 38px;
	padding: 0 1.1em; /* wie #access a */
}
#access .kfw-search-toggle:hover,
#access .kfw-search-toggle:focus,
#access .kfw-open .kfw-search-toggle {
	background: #333;
	color: #fff;
}
#access .kfw-search-form {
	background: #333;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
	padding: 10px;
	position: absolute;
	right: 0;
	top: 38px;
	z-index: 99999;
}
#access .kfw-search-form input[type="search"] {
	width: 220px;
}

/* ---------- Mobil: rechts in der Kopfleiste von Mobile Menu ---------- */
/* Nur Lupe, kein Text: mittig steht der Vereinsname, rechts sind nur 40 px frei. */
.kfw-msearch .kfw-search-label {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}
.kfw-msearch {
	display: none;
}
@media only screen and (max-width: 1024px) {
	.kfw-msearch {
		display: block;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 100000;
	}
	body.admin-bar .kfw-msearch {
		top: 46px;
	}
	.kfw-msearch .kfw-search-toggle {
		color: #fff;
		height: 50px;
		width: 50px;
	}
	.kfw-msearch .kfw-search-toggle svg {
		height: 22px;
		width: 22px;
	}
	.kfw-msearch .kfw-search-form {
		background: #022444;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
		box-sizing: border-box;
		left: 0;
		padding: 8px 10px 10px;
		position: fixed;
		right: 0;
		top: 50px;
	}
	body.admin-bar .kfw-msearch .kfw-search-form {
		top: 96px;
	}
	.kfw-msearch .kfw-search-form {
		font-family: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", sans-serif;
	}
	.kfw-msearch .kfw-search-form input[type="search"],
	.kfw-msearch .kfw-search-submit {
		font-size: 16px; /* verhindert Auto-Zoom auf iOS */
		height: 40px;
	}
	.kfw-msearch .kfw-search-form input[type="search"] {
		flex: 1;
		min-width: 0;
	}
	/* Lupe ausblenden, solange das Handy-Menue offen ist */
	body.show-nav-left .kfw-msearch {
		display: none;
	}
}

/* ==========================================================
   5. Layout (26.09.2026)
   ========================================================== */

/* Hauptpunkte im Menue fett (Twenty Ten setzt sie normal - wirkte zu duenn) */
#access ul.menu > li > a,
#access div.menu > ul > li > a,
#access .kfw-search-toggle {
	font-weight: bold;
}

/* Keine Seitenleiste mehr (sidebar.php ist leer): Inhalt ueber die volle Breite, 10 % Rand.
   Ueberstimmt Twenty Ten (#content 280 px rechts frei fuer die Seitenleiste) und die
   Prozentwerte von Responsive Twenty Ten. */
#container,
.one-column #container {
	float: none;
	margin: 0;
	width: 100%;
}
#content,
.one-column #content {
	margin: 0 10% 36px;
	width: auto;
}
@media screen and (max-width: 660px) {
	#content,
	.one-column #content {
		margin: 0 4% 36px;
	}
}

/* ==========================================================
   6. Hintergrund (26.09.2026)
   ========================================================== */

/* Wellen als SVG-Kachel (48 x 28 px, nahtlos): parallele Hauptwellen, darunter eine um
   eine Viertelwelle versetzte, zarte unterbrochene Zweitlinie (0,9 px, 16 px Strich, 8 px Luecke; die
   Luecken macht ein clipPath, damit sie an den Kachelraendern nicht springen). Tuerkis.
   Ersetzt das Punktraster Background_4.jpg aus Design -> Hintergrund: dessen 2-px-Raster
   flimmerte bei 125 % Skalierung (Moire-Streifen alle ~3 cm). */
body {
	background: #7cc3cd url("images/hintergrund-wellen.svg?v=3") repeat left top;
}