/*
Theme Name: Spassfoto Fotobox
Theme URI: https://spassfoto.de
Author: Frank Haubold
Author URI: https://spassfoto.de
Description: WordPress-Theme für den Fotobox-Verleih Spassfoto (weiß, dunkelrot, Verdana) inkl. Sidebar/News & Social Buttons.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: spassfoto
*/
:root{
  --brand:#8B0000;
  --brand-hover:#a00000;
  --text:#222;
  --bg:#fff;
}
*{box-sizing:border-box}
body{
  font-family: Verdana, sans-serif;
  margin:0; color:var(--text); background:var(--bg); line-height:1.6;
}
/* Header */
.site-header{
  background:var(--brand); color:#fff; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-header .logo{height:100px; max-width:480px}
.main-menu{display:flex; align-items:center; gap:16px}
.main-menu ul{list-style:none; margin:0; padding:0; display:flex; gap:16px}
.main-menu a{color:#fff; text-decoration:none; font-weight:bold}
.main-menu a:hover{text-decoration:underline}

/* Social icons */
.social-icons-header, .social-icons-footer{display:flex; gap:10px}
.social-icons-header a, .social-icons-footer a{
  color:#fff; background:var(--brand); width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background .3s ease;
}
.social-icons-header a:hover, .social-icons-footer a:hover{ background:var(--brand-hover);}

/* Layout */
.site-wrap{max-width:1200px; margin:20px auto; padding:0 20px; display:flex; gap:20px}
.content{flex:1 1 auto; min-width:0}
.sidebar{flex:0 0 300px}

/* Hero */
.hero {
  /*background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/hero-image.jpg');*/
	background-image: url("https://tittenfotos.de/wp-content/uploads/2025/09/hero-image-1.jpg");
  background-size: cover;
  background-position: center;
  height: 500px; /* Höhe des Hero-Bereichs */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.hero-text {
  background: rgba(0,0,0,0.4); /* halbtransparenter Hintergrund für bessere Lesbarkeit */
  padding: 20px;
  border-radius: 10px;
}

/*.hero{height:320px; background:url('../assets/images/hero-image.jpg') center/cover no-repeat; color:#fff; display:flex; align-items:center; justify-content:center; text-shadow:0 0 6px rgba(0,0,0,.6); border-radius:8px;}*/

/* Buttons */
.btn{
  background:var(--brand); color:#fff; padding:12px 25px; border:none; border-radius:6px; cursor:pointer; font-weight:bold; text-decoration:none; display:inline-block; transition:all .3s ease;
}
.btn:hover{ background:var(--brand-hover); transform:translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,.2)}
.btn:focus,.btn:active{ outline:none; transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.2)}

/* Forms (CF7) */
.wpcf7-form{
  font-family: Verdana, sans-serif; background:#fff; padding:20px; border:1px solid #ddd; border-radius:6px; max-width:700px; margin:20px auto; color:var(--text);
}
.wpcf7-form label{display:block; margin-bottom:10px; font-weight:bold}
.wpcf7-form input,.wpcf7-form select,.wpcf7-form textarea{
  width:100%; padding:10px; margin-top:4px; border:1px solid #ccc; border-radius:4px; font-family: Verdana, sans-serif;
}
.wpcf7-form textarea{resize:vertical; min-height:120px}
.wpcf7-form input[type="submit"]{ background:var(--brand); color:#fff; padding:12px 25px; border:none; border-radius:4px; cursor:pointer; font-weight:bold; transition:background .3s}
.wpcf7-form input[type="submit"]:hover{ background:var(--brand-hover)}
.wpcf7-form .wpcf7-response-output{ margin-top:15px; font-weight:bold}

/* Sidebar News */
.news-sidebar{
  background:#fff; border:1px solid #ddd; border-radius:6px; padding:15px; font-family: Verdana, sans-serif;
}
.news-sidebar h3{ color:var(--brand); margin:0 0 12px}
.news-item{ background:#f9f9f9; border-radius:4px; padding:10px; margin-bottom:10px; transition:transform .3s ease, box-shadow .3s ease}
.news-item:hover{ transform:translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,.2)}
.news-item h4{ color:var(--brand-hover); margin:0 0 6px; font-size:16px}
.news-item p{ margin:0; font-size:14px; color:#222}

/* Footer */
.site-footer{ background:#333; color:#fff; padding:20px}
.footer-inner{ max-width:1200px; margin:0 auto; padding:0 20px; display:flex; align-items:center; justify-content:space-between; gap:20px}
.footer-links a{ color:#fff; text-decoration:none; margin-right:12px}
.footer-links a:hover{ text-decoration:underline}

/* Images */
img{ max-width:100%; height:auto; display:block}

/* Responsive */
@media (max-width:1024px){
  .site-header{ flex-direction:column; align-items:flex-start}
  .main-menu{ flex-wrap:wrap}
  .site-wrap{ flex-direction:column}
  .sidebar{ order:2}
  .content{ order:1}
  .btn{ width:100%; text-align:center; padding:12px 0; font-size:16px}
}
@media (max-width:600px){
  .site-header .logo{ height:40px}
  .hero{ height:200px; font-size:18px}
}