/*
Theme Name: Music Star Child (MISSINK)
Theme URI: https://missink.de/
Description: Child-Theme für missink.de. Traegt alle Anpassungen der Seite - Hover-Farben in der Theme-Palette, Responsive-Ebene, Kopfbild-Begrenzung, Inhalts-Linkfarben - damit ein Update des Eltern-Themes Music Star nichts davon ueberschreibt.
Author: Paul Schneider
Template: music-star
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: music-star-child
*/

/* ==============================================================
   Ab hier der bisherige Inhalt der so-css-Ebene, unveraendert
   uebernommen am 2026-08-25. Diese Datei ist jetzt die Quelle.
   ============================================================== */

textarea {
  font-family: inherit;
}

.main-navigation ul li a:hover {
  color: #000;
  background: #c0c0c0;
}

#primary-menu 
li a {
  color: #046c8c;
  font-size: 22px;
}

#Generelles
a:link {
  color: #C0C0C0;
}

a:hover {
  color: #000000;
  background: #c0c0c0;
}

font {
  color: #c0c0c0;
}

#Soundcloud
h2 a {
  color: #000000;
}

h2 a:hover {
  color: #000000;
  background: #c0c0c0;
  text-decoration: underline;
}

#blogposts
ul li a:hover {
  color: #000000;
  background: #c0c0c0;
  text-decoration: none;
}

article li a {
	color: #c0c0c0;
	text-decoration: underline;
}


/* ==============================================================
   Responsive- und Hover-Ebene · 2026-08-25
   Ergänzt das Theme music-star, ohne Theme-Dateien zu ändern,
   überlebt also Theme-Updates.
   Theme-Palette: Petrol #046c8c · Silber #c0c0c0 · Schwarz #000
   ============================================================== */

/* --- 1. Link-Hover in Theme-Farben statt Violett ---------------
   Das Theme setzt #c36dff als Hover-Farbe. Die Regel „a:hover"
   weiter oben ist richtig, verliert aber gegen die spezifischeren
   Theme-Regeln (z. B. #secondary ul li a:hover in der Sidebar).
   Deshalb hier dieselbe Optik mit passender Spezifität.        */

a:hover,
h1 a:hover,
h2 a:hover,
h3 a:hover,
.entry-title a:hover,
article header .entry-title a:hover,
.site-info a:hover,
.main-navigation ul li a:hover,
.main-navigation li a:hover,
article p a:hover,
article li a:hover,
#secondary ul li a:hover,
#secondary .widget ul li a:hover,
.footer-widgets li a:hover,
.news-cate a:hover,
.news-cate:hover a,
.link-more a:hover {
  color: #000;
  background: #c0c0c0;
  text-decoration: none;
}

/* Links im Inhalt waren Browser-Blau (#15c) - das Theme faerbt sie
   in einer Sammelregel. „article li a" oben war schon auf Silber
   gestellt, die uebrigen (z. B. die beiden Links auf /gallery)
   blieben blau. Jetzt durchgehend Silber wie der restliche Text. */
article h1 a,
article h2 a,
article h3 a,
article h4 a,
article h5 a,
article h6 a,
article p a,
.comment-metadata a,
.textwidget a,
article li a {
  color: #c0c0c0;
}

/* „Weiterlesen" war dauerhaft violett, nicht nur beim Hover */
.link-more a {
  color: #c0c0c0;
}

/* Oberes Menue: die Regel "#primary-menu li a" weiter oben traegt
   eine ID und schlaegt deshalb jede Klassen-Regel - der Hover muss
   die ID ebenfalls fuehren, sonst bleibt der Text petrol.      */
#primary-menu li a:hover,
#primary-menu li a:focus {
  color: #000;
  background: #c0c0c0;
  text-decoration: none;
}

/* Mobiles Menü — das Theme erzwingt Violett dort mit !important.
   Farbe wie beim Desktop-Menü weiter oben.                     */
@media screen and (max-width: 800px) {
  .main-navigation li a:hover,
  .main-navigation ul li a:hover {
    color: #000 !important;
    background: #c0c0c0;
    text-decoration: none;
  }
}

/* Button-Verlauf endete in Violett */
.h-button-1:hover,
.h-button-2:hover {
  background: linear-gradient(to right, #000, #046c8c);
}

/* Kopfbild: das Theme setzt width:100% auf ein <img>, das fuer ein
   Hintergrundbild gedacht war - auf breiten Monitoren waechst das
   2008px-Logo dadurch ueber die halbe Seite. Ueber die Hoehe
   begrenzt skaliert es auf jeder Breite sauber mit.            */
.header-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 220px;
  height: auto;
  margin: 0 auto;
}

/* --- 2. Responsive ---------------------------------------------
   Das Theme bringt genau einen Breakpoint mit (max-width: 800px).
   Ergänzt: Umbruchsicherheit, Tablet-Hochformat, kleine Phones,
   Touch-Flächen und mitwachsende Titel.                        */

/* 2a. Lange Wörter und Bilder bleiben im Viewport */
img {
  height: auto;
}

h1, h2, h3, h4,
p, li, td, dd, dt,
.entry-title,
.widget-title,
.site-description {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 2b. Beitragstitel wächst mit, statt bei 800px von 20 auf 30px
       zu springen — Endwerte wie im Theme.                     */
article header .entry-title {
  font-size: clamp(20px, 2.6vw, 30px);
}

/* 2c. Tablet-Hochformat 801–1024px: bekam bisher exakt das
       Desktop-Layout (70/28-Spalten bleiben, nur luftiger).    */
@media screen and (min-width: 801px) and (max-width: 1024px) {
  body #content {
    padding-left: 12px;
    padding-right: 12px;
  }
  #primary-menu li a {
    font-size: 18px;
  }
  .main-navigation ul li a {
    padding-left: 10px;
    padding-right: 10px;
  }
  #secondary section {
    padding: 0 12px;
  }
}

/* 2d. Touch-Flächen auf Tablet und Phone (Richtwert 44px) */
@media screen and (max-width: 1024px) {
  .main-navigation ul li a {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  #secondary ul li a {
    display: inline-block;
    padding: 7px 0;
  }
}

/* 2e. Kleine Phones */
@media screen and (max-width: 480px) {
  body #content,
  body .h-center {
    padding: 8px !important;
  }
  .site-branding .site-description {
    font-size: 5vw;
  }
  #secondary section {
    padding: 0 10px;
  }
}

/* 2f. Kommentarformular: Felder liefen über die Kante, und die
       Hinweiszeile mischte zwei Schriftgrößen in einer Zeile.  */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  max-width: 100%;
  box-sizing: border-box;
}

.comment-notes,
.comment-notes span,
.required-field-message {
  font-size: 14px;
  line-height: 1.5;
}

/* Sidebar- und Footer-Links: die beim Hover einfahrende
   Unterstreichung (a:after) war violett - sie entfaellt jetzt
   ganz, der Hover zeigt nur noch die silberne Flaeche.        */
#secondary ul li a:after,
.footer-widgets li a:after {
  display: none;
}

/* --- 3. Abschnitts-Ueberschriften im Inhalt --------------------
   Auf /gallery/auftritte standen drei Varianten nebeneinander:
   <h2> mit Gutenberg-Klassen (weisser Kasten, Text in
   cyan-bluish-gray - auf Weiss kaum lesbar), <h2> ganz ohne
   Kasten, und ein <p>, das nur wie eine Ueberschrift aussieht.
   Jetzt einheitlich derselbe Kasten in den Hover-Farben.
   !important ist noetig, weil WordPress die has-*-color-Klassen
   selbst mit !important ausgibt.                              */
.entry-content h2,
.entry-content p.has-background {
  background-color: #c0c0c0 !important;
  color: #000 !important;
  padding: 18px 28px !important;
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}

.entry-content h2 a,
.entry-content p.has-background a,
.entry-content h2 strong,
.entry-content p.has-background strong {
  color: inherit;
}