@charset "utf-8";

/* =============================================================
Stylesheet bildschirm.css 
============================================================= */


@media screen {


/* =============================================================
  1. Reset - alle Abstände auf null setzen
=============================================================== */

html { overflow-y: scroll; } 
                 /* somit auf allen Seiten eine Bildlaufleiste */
body, div,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, code,
ul, ol, li, table, th, td,
form, fieldset, legend, input, textarea {
	padding: 0;
	margin: 0; }

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
	display: block; }


/* =======================================================
  2. Body + allgemeine styles für Überschriften, Absätze und Listen
========================================================= */

body { background-color: white;
       color: black;
	   font-family: Verdana, Segoe, "Segoe UI", Arial, "Lucida Sans", "Trebuchet MS", sans-serif;
	   font-size: 100%; }   /* margin: 10px; ist optisch für Balken am BS-Rand nicht schön */  
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }


/* ========================================================
  3. Header  (kopfbereich = 1000px breit)
=========================================================== */

header { width: 100%; }
#kopfbereich {
	width: 960px;
	padding: 40px 20px 12px 20px;
	margin: 0 auto; }
p.claim { font-size: 100%;
          padding-top: 5px;
		  padding-left: 1px;
		  font-weight: normal;
		  color: #0033AA;        /* #003399; #1414cc; #C00 = preiselbeer,  #666 = dunkelgrau */
		  letter-spacing: 1px; } 

		  
/* ==========================================================
  4. navmain + hyperlinks    (navibereich ist 960px breit)
=========================================================== */

#navibereich {
	width: 100%;
	overflow: hidden;
	background: #B0BFFC;  
	background-image: linear-gradient(#B0BFFC, #404FB5);
	color: white; }
ul.navmain { 
    width: 960px;
    margin: 0 auto; }                            /* damit ist die ul zentriert ! */
ul.navmain li {
	float: left;  
	list-style-type: none; }
ul.navmain a {
	display: block;
	text-decoration: none;
    font-size: 96%; 
	color: white;	
    padding:  9px 15px 8px 15px; 
	border-left: 1px solid #E6E6E6; }            /* verikale hellgraue Trennlinie, war white */
ul.navmain a.sie-sind-hier {
	background: #fcd6e1;  
    background-image: linear-gradient(#fcd6e1, #9c2245);
	color: white;
	text-decoration: none; }
ul.navmain .en { padding-left: 30px;
    padding-right: 30px; }
ul.navmain a:hover,
ul.navmain a:focus {
	text-decoration: none;
	color: white;
	background: #fcd6e1;                          /* früher: #e6ebff; */
	background-image: linear-gradient(#fcd6e1, #9c2245); } 
ul.navmain a:active {
	background: #fcd6e1;
	background-image: linear-gradient(#fcd6e1, #9c2245);
	color: white; }
/* Keine Deklarationen für a:link und a:visited notiert, weil hier unnötig */


/* ===========================================================
  6. main + hyperlinks  (inhaltsbereich = 1000px breit)
========================================================== */

main { width: 100%; }

#inhaltsbereich {
	width: 960px;
	line-height: 1.4;
	padding: 40px 20px 50px 20px;
	margin: 0 auto; }

h1.home { font-size: 125%; 
    color:  #C75262; }               /* war #6262d1; */
h1.subline { font-size: 125%;
     color: #C75262;
	 padding: 3px 0 25px 0; }
h1.categ { font-size: 120%;       /* = rote Überschr. Dom-Kateg */
     color: #0000B5;              /* war #C75262; bzw  #BA1229; */     
     padding-bottom: 20px; }     
span.small { font-size: 90%;       
     font-weight: normal; } 
span.color { color: #C00; }       /* war blau #0000B5; } */
h1.heading { font-size: 125%;     /* = Überschr. auf Info-Seiten */
     font-weight: bold;  
     color: #0000B5;
     padding-bottom: 25px; }       
h1.pricelist { font-size: 125%;    /* = Überschr. über Preisl.-Tab. */
     font-weight: bold;  
     color: #0000B5;
     padding-bottom: 30px; }            

.intro-1 { font-size: 100%;       /*  für Home-Seite */
    padding: 0 90px 15px 0; }
.intro-2 { font-size: 100%;       /*  für Home-Seite */
    padding: 0 90px 30px 0; }   
.agb { padding-right: 150px; }    /*  für AGB-Seite */    
     
h2 { font-size: 95%;              /*  für div. Zwischenüberschriften */
     font-weight: bold;
	 color: #333333;
	 padding: 0 0 8px 0; }
h3.person { font-size: 100%;      /* h3 nur auf Kontakts. verwendet */
     font-weight: normal;
	 color: #0000B5;
	 padding: 15px 0 5px 0; } 	 
p { font-size: 90%; 
     color: #333333;
	 padding-bottom: 12px; }   
ol { padding: 0 0 0.7em 3em;
   	 color: #0000B5; }
ol li { font-size: 95%; }
.buy { color: #0D0D90;        
    padding-top: 10px; }
.buy-page { padding-right: 120px; }
.in-ruhe { font-size: 83%;
     padding: 10px 120px 0 0;
     border-top: 1px solid #CCCCCC; }
.copy { font-size: 85%;
     padding-top: 20px; }
p.anker { padding-top: 20px;
          text-align: center; }

main a { text-decoration: underline; }
main a:link { color: #0000B5; }   
main a:hover, a:focus { text-decoration: underline;
           color: #C00; }

/*  ========================================================= 
  7. Zu floatende Bilder  (s. KK-website)
===================================================== */


/* ========================================================
  8. Tabelle Kategorien  (startpage)
========================================================= */  

table.categories { width: 750px;   /*  vorher war keine Angabe */ 
         margin: 0 20px 0 0;       /* margin: 0 auto; würde Tab zentr.*/
         background-color: white;
         border-collapse: collapse;   /* oder: border-spacing: 3px; */
         border: 1px solid #8794E6; }     /* war rot #C00; } */
.categories tbody tr { font-size: 100%;
         color: #0000B5; }  
.categories tbody td:nth-child(1)         /* = 1. Spalte */
        { width: 40px;   
         text-align: left;
		 padding: 0 0 0 10px; }           /* Abstand Pfeil v. links */
.categories tbody td:nth-child(2)         /* = 2. Spalte */
        { width: 720px;   
         text-align: left;
		 padding: 6px 0 6px 0; }    /* = Abstand der Schrift o. + u. */
.categories tbody a { color: #0000B5;
         text-decoration: none; }
.categories tbody tr:nth-child(even)
        { background-color: #EBEFFF; }
                                    /* #f1f1f1; wäre Zebra hellgrau */
.categories td a:hover,
               a:focus { color: #C00;      /* war #0000B5; */
               text-decoration: underline; }              


/* ====================================================  
  9. Tabellen  Domain-Kaufpreise (inkl. Promotions-page)
=============================================== */  

table.domains { width: 600px;
	     background-color: white;
         border-collapse: collapse;  /* für Zw.-raum: { border-spacing: 3px; } */
		 border-bottom: 1px solid #CCCCCC;     
         margin: 0; }  	 /*  margin: 0 auto;  würde die Tabelle zentrieren */	
.domains tbody tr { font-size: 85%;
         color: black; }
.domains tbody td:nth-child(1) { width: 250px;    /* = Domain-Spalte */
         text-align: left;
		 padding: 3px 0 5px 15px; }
.domains tbody td:nth-child(2) { width: 350px;   /* = Preis-Spalte */
         text-align: right;
		 padding: 3px 30px 5px 0; }
.domains tbody tr:nth-child(odd) { background-color: #EBEFFF; }
         /* für Zebra-Tabelle */
/* .domains td.premium { color: #BA1229;   
         font-size: 110%;
         font-weight: bold; } */

h1.promo { font-size: 125%;    /* = Überschr. über Prom.-Tab. */
     font-weight: bold;  
     color: #0000B5;
     padding-bottom: 15px; }
span.sub { font-size: 90%;       
     font-weight: normal; 
     color:  #C75262; }     
p.info { font-size: 90%;
         line-height: 1.6;
         color: #0000B5;  
         padding: 0 200px 30px 0; }
p.steuer { font-size: 75%; 
         color: #0000B5;
		 padding: 25px 0 0 0; }     
         /* in main ist padding-bottom 40px notiert */   

/*  ============================================================ 
  10. Zu floatende Bilder:  s. website Kira Kenning
===================================================================== */


/* =====================================================
  11. footer + hyperlinks   (fussbereich = 1000px breit)
========================================================== */

footer {
	width: 100%;
	background: #E6EBFF;
	background-image: linear-gradient(#E6EBFF, #6977D6); }

#fussbereich {
	width: 960px;
	line-height: 1.2em;
	padding-top: 15px;
	padding-right: 20px;
	padding-bottom: 20%;  /* dh 20% der gesamten Seitenhöhe */
	padding-left: 20px;
	/* border-top: 1px solid silver; */
	margin: 0 auto; } 
	
p.hotline { font-size: 100%;
            letter-spacing: 1px;      /* font-size in body notiert */ 
		    color: #d90000;  
			padding-bottom: 1.5em; }  
p.kontakt { padding-top: 0;
            padding-bottom: 3px;
			font-size: 95%; }
p.impressum { padding-top: 0;
            padding-bottom: 3px;
			font-size: 95%; }
p.agb       { padding-top: 0;
            font-size: 95%; 
            padding-bottom: 2em;  }
p.copyright { font-size: 82%;
              color: #0000B5; }

ul.navfooter { padding-left: 2em; }
ul.navfooter li { list-style-type: none; }
footer a { text-decoration: none;
           font-size: 95%; }	
footer a:link { color: #0000B5; }     /* dunkelblau */   
footer a:visited { color: #0000B5; }  /* war #008DA6; */
footer a:hover, a:focus { text-decoration: underline;
           color: #C00; }



}   /* Ende @media - nicht löschen !! */


/* ======================================================
    ENDE
===================================================== */