/*
Theme Name: GRV-Theme
Theme URI: http://example.com/
Author: GRV
Author URI: http://example.com/
Description: GRV-Theme — A lightweight WordPress theme for a cycling club (Gravel / Radsportverein).
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: grv-theme
*/

/*
Primärfarbe: Beige: #97821c rgb(151,130,28,1)
Sekundärfarbe: Orange: #da9b16 rgb(218,155,22,1)
Drittfarbe: Schwarz: #000000 rgb(0,0,0,1)
Aktionsfarbe: Lila: #33088b rgb(51,8,139,1)
*/

:root{
  --color-primary: #97821c; /* beige */
  --color-secondary: #da9b16; /* orange */
  --color-tertiary: #000000; /* black */
  --color-action: #33088b; /* purple */
  --max-width: 1100px;
  --sidebar-width: 320px;
  --gap: 0px;
  --heading-font: "Oswald", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --body-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/*** general layout ***/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600;700&family=Open+Sans:wght@300;400;600&display=swap');
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--body-font);color:var(--color-tertiary);background:#fff;line-height:1.5}
a{color:var(--color-action);text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:var(--gap)}

h2 {font-size:24px;}
nav {list-style-type: none;}

/* Post previews */
.post{border-bottom:1px solid rgb(51,8,139,0.1);padding:18px 0}
.post-title{font-family:var(--heading-font);font-size:20px;margin:0 0 6px}
.meta{font-size:13px;color:rgba(0,0,0,0.6)}


/*** header ***/
.header{background:var(--color-secondary);color:#fff;position:sticky;top:0;z-index:1000;box-shadow: 0 2px 6px rgba(0,0,0,0.08);}
.header-wrapper{position:relative}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 20px}
.site-logo{display:flex;align-items:center;gap:12px}
.grv-logo{position:absolute;margin-left:-55px;margin-top:40px;}
.grv-logo img{width:115px}
.half-circle{width:115px;height:115px;border-radius:0 0 115px 115px;border-bottom: 5px solid #33088b;margin-top:35px;margin-left:-55px;position:absolute}
.logo-placeholder{width:235px;height:66px}
.logo-title {margin-left:70px}
.main-nav{display:flex;gap:4px;align-items:center}
.main-nav a{padding:5px;border-radius:4px;font-weight:bold}
.main-nav li{padding:8px 0px 8px 0px;}
.main-nav li:last-child{padding:8px 10px 8px 0px;}
.main-nav a:hover{background:rgba(255,255,255,0.08);}
.header-nav-line{background:#33088b;height:5px}

/* Responsive header / search fallback for small screens */
.header-inner{flex-wrap:wrap;}/* Erlaubt Umbrechen des Header-Innerbereichs */
.site-logo{flex:0 1 auto;min-width: 0;}/* Stelle sicher, dass Logo/Titel links bleiben */
.search-social{display:flex;align-items:center;gap:8px;}/* Such- und Social-Bereich unter Logo bei kleinen Bildschirmen */

/* Hero Slider */
.hero{position:relative;overflow:hidden}
.hero-slide{display:none;min-height:340px;align-items:center;justify-content:center;background-size:cover;background-position:bottom;}
.hero-slide.active{display:flex}
.hero-overlay{background:linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)); color:#fff; padding:40px; text-align:left; width:60%; border-radius:8px; margin:40px}
.hero-title{font-family:var(--heading-font);font-size:36px;margin:0 0 8px}
.hero-sub{margin:0 0 12px;font-size:16px}
.hero-cta{display:inline-block;padding:10px 16px;border-radius:6px;background:var(--color-action);color:#fff;font-weight:600}

.hero-slider {position: relative;width: 100%;overflow: hidden;}
.hero-slider .slide{width: 100%;}
.hero-slider img {width: 100%;height: auto;display: block;}

/*** main content ***/
.layout{display:flex;gap:var(--gap);padding:var(--gap) 0;padding-bottom:50px;}
.content{flex:1;min-width:0;padding-top:20px;padding-right:20px;padding-bottom:100px;}

/*** sidebar ***/
.sidebar{padding-top:20px;}
.sidebar a{padding:5px;border-radius:4px;}
.sidebar a:hover{background:rgba(255,255,255,0.35);}
.sidebar{width:var(--sidebar-width);background:#eee;box-shadow:3px 0px 10px lightgray;padding:10px;}
.sidebar li {margin-bottom:10px;display: flex;}

.search-form input{padding:6px 8px;border-radius:4px;border:1px solid rgba(0,0,0,0.1)}
.social-icons{display:flex;gap:8px}
.social-icon-komoot img {width: 30px;  /* Logo-Größe anpassen */height: 30px;display: block;border: 1px;}

/*** footer ***/
.footer{background:#f7f7f7;color:#000;padding:0px 0;border-top:1px solid rgba(0,0,0,0.04);box-shadow: 0 2px 6px rgba(0,0,0,0.08);z-index:1000;position:sticky;position: fixed;bottom: 0;width: 100%;}
.footer .container{display:flex;justify-content:space-between;align-items:center}
.footer-top-line,.footer-bottom-line{background:#33088b;height:7px;}
.footer-nav-line,footer,.footer{background:var(--color-secondary);}



/*** Responsive ***/
@media (max-width:1200px){
	.half-circle{display:none;}
	.grv-logo{margin-left:-15px;margin-top:15px;}
	.grv-logo img{width:75px}
}
@media (max-width:900px){
  .hero-overlay{width:90%;margin:20px; padding:20px}
  .layout{flex-direction:column;margin-left:5px;}
  .sidebar{width:100%}
  .main-nav{display:none}
}

/* Default: Suchbereich auf einer Zeile; bei sehr kleinen Viewports rutscht er unter das Logo */
@media (max-width: 650px) {
  	.grv-logo{margin-left:-15px;margin-top:-30px;}
	.search-social {order: 3;/* unter die bisherigen header-elemente */width: 100%;justify-content: flex-start;margin-top: 10px;padding: 0 20px;}

	/* Suchformular: volle Breite, gut sichtbar */
	.search-form {display: flex;width: 100%;gap: 8px;}
	.search-form input[type="search"],
	.search-form input[type="text"] {flex: 1 1 auto;min-width: 0;padding: 8px 10px;border: 1px solid rgba(0,0,0,0.12);border-radius: 4px;background: #fff;color: var(--color-tertiary);}
	.search-form .search-submit,
	.search-form button {padding: 8px 10px;border-radius: 4px;border: 1px solid rgba(0,0,0,0.08);background: var(--color-action);color: #fff;font-weight:600;}
}

/* Bis zur kleinsten Breite 350px: sicherstellen, dass alles lesbar bleibt */
@media (max-width: 380px) {
	html, body{font-size:14px; /* kleine Schrift, aber lesbar */}
	.hero-title{font-size:24px;}
  	.hero-sub{font-size:13px;}
  	.header-inner{padding:8px 12px;}
  	.search-form input[type="search"], .search-form input[type="text"] {padding:6px 8px;}
	.grv-logo{margin-left:-15px;margin-top:-80px;}
}



/* mobile menu */
.main-navigation{display:none;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;position:relative;}
.mobile-menu{padding:0px 20px;display:flex;}

/* Hamburger Balken */
.menu-toggle .hamburger,
.menu-toggle .hamburger::before,
.menu-toggle .hamburger::after{content:"";display:block;width:30px;height:3px;background-color:#333;border-radius:3px;transition:0.3s ease-in-out;}
.menu-toggle .hamburger::before{transform:translateY(-8px);}
.menu-toggle .hamburger::after{transform:translateY(5px);}
.menu-toggle.open .hamburger{background-color:transparent;}
.menu-toggle.open .hamburger::before{transform:rotate(45deg) translate(-3px,-3px);}
.menu-toggle.open .hamburger::after{transform:rotate(-45deg) translate(6px,-6px);}

/* Menü im mobilen Zustand verstecken */
@media (max-width:900px) {
  .main-navigation{display:none;}
  .menu-toggle{display:inline-block;}
  .main-navigation.active{display:block;}
}
@media (max-width:300px) {
	.search-social,.mobile-menu{padding:0px;}
	.menu-toggle{height:50px;}
}





.bike-chain-border {
    position: relative;
    padding: 20px;
}

/* realistische Fahrradkette – oben */
.bike-chain-border::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 0;
    width: 300%;
    height: 40px;

    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTIwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHg9IjAiIHk9IjEyIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjE2IiByeD0iOCIgZmlsbD0iI2JiYmJiYiIgb3BhY2l0eT0iMC40Ii8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iNiIgZmlsbD0iI2M5YzljOSIgc3Ryb2tlPSIjNTU1IiBzdHJva2Utd2lkdGg9IjEiLz48Y2lyY2xlIGN4PSI5MCIgY3k9IjIwIiByPSI2IiBmaWxsPSIjYzljOWM5IiBzdHJva2U9IiM1NTUiIHN0cm9rZS13aWR0aD0iMSIvPjxyZWN0IHg9IjAiIHk9IjE2IiB3aWR0aD0iNjAiIGhlaWdodD0iOCIgcng9IjQiIGZpbGw9IiNjN2M3YzciIG9wYWNpdHk9IjAuNSIvPjxyZWN0IHg9IjYwIiB5PSIxNiIgd2lkdGg9IjYwIiBoZWlnaHQ9IjgiIHJ4PSI0IiBmaWxsPSIjYzdjN2M3IiBvcGFjaXR5PSIwLjUiLz48L3N2Zz4=");

    background-repeat: repeat-x;
    background-size: 120px 40px;

    animation: chainMove 20s linear infinite;
    opacity: 0.5;
}

/* realistische Fahrradkette – unten */
.bike-chain-border::after {
    content: "";
    position: absolute;
    bottom: -28px;
    left: 0;
    width: 300%;
    height: 40px;

    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTIwIDQwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHg9IjAiIHk9IjEyIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjE2IiByeD0iOCIgZmlsbD0iI2JiYmJiYiIgb3BhY2l0eT0iMC40Ii8+PGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iNiIgZmlsbD0iI2M5YzljOSIgc3Ryb2tlPSIjNTU1IiBzdHJva2Utd2lkdGg9IjEiLz48Y2lyY2xlIGN4PSI5MCIgY3k9IjIwIiByPSI2IiBmaWxsPSIjYzljOWM5IiBzdHJva2U9IiM1NTUiIHN0cm9rZS13aWR0aD0iMSIvPjxyZWN0IHg9IjAiIHk9IjE2IiB3aWR0aD0iNjAiIGhlaWdodD0iOCIgcng9IjQiIGZpbGw9IiNjN2M3YzciIG9wYWNpdHk9IjAuNSIvPjxyZWN0IHg9IjYwIiB5PSIxNiIgd2lkdGg9IjYwIiBoZWlnaHQ9IjgiIHJ4PSI0IiBmaWxsPSIjYzdjN2M3IiBvcGFjaXR5PSIwLjUiLz48L3N2Zz4=");

    background-repeat: repeat-x;
    background-size: 120px 40px;

    animation: chainMoveReverse 20s linear infinite;
    opacity: 0.5;
}

/* Animation – sanftes Gleiten */
@keyframes chainMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-40%); }
}

@keyframes chainMoveReverse {
    0% { transform: translateX(-40%); }
    100% { transform: translateX(0); }
}